Voilà un code source qui vous permettra de faire un menu pour votre site en HTML :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="utf-8">
<TITLE>Test de menu dynamique</TITLE>
<STYLE>
.parent {
font-family: verdana;
font-weight: bold;
font-size: 10pt;
cursor: hand;
}
.child {
font-size: 10pt;
font-weight: normal;
margin-left: 14pt;
}
a:hover { color:red; }
</STYLE>
<SCRIPT LANGUAGE=javascript>
var intCount = 0;
//-Fonction d'ajout d'entrées principales-------------------------
function DynamicMenu_addParent(strName) {
var strID = 'P_' + strName;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onClick="expandCollapse(this);">';
strTemp += '<IMG SRC="left.gif" Height="12">';
strTemp += ' ' + strName;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
this.div.innerHTML += strTemp;
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout des sous entrées principales-------------------------
function DynamicMenu_addSousParent(strName) {
var strID = 'S_' + strName;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onClick="expandCollapse(this);">';
strTemp += '<IMG SRC="left.gif" Height="12">';
strTemp += ' ' + strName;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout de liens dans le menu-------------------------
function DynamicMenu_addChild(strName,strURL) {
var strTemp = '<A HREF="' + strURL + '"'
+ ' onClick="cancelBubble(arguments[0]);">'
+ strName + '</A><BR>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
}
//-inhibe la cascade d'évènements au DIV conteneur----------------
function cancelBubble(netEvent) {
if (document.all) {
window.event.cancelBubble = true;
} else {
netEvent.cancelBubble = true;
}
}
//-Contracte ou expanse le menu-----------------------------------
function expandCollapse(objElement) {
var strId = objElement.id;
if (intCount == 0) {
if (document.all) {
var imgIcon = objElement.children[0];
objElement = objElement.children[1];
} else {
var imgIcon = objElement.childNodes[0];
objElement = objElement.childNodes[2];
}
if (objElement.style.display == "none") {
objElement.style.display = "block" ;
imgIcon.src = "bottom.gif" ;
} else {
objElement.style.display = "none" ;
imgIcon.src = "left.gif" ;
}
}
if (strId.substring(0,1) == 'S') {
intCount = 1;
}
if (strId.substring(0,1) == 'P' && intCount == 1) {
intCount = 0;
}
}
//-Fonction de création de menu dynamique-------------------------
function DynamicMenu(strName) {
//var id = "Menu" + intCount++;
var id = strName;
document.write('<DIV Id="' + id + '"></DIV>');
this.div = document.getElementById(id);
this.currentChild = null;
this.addParent = DynamicMenu_addParent;
this.addSousParent = DynamicMenu_addSousParent;
this.addChild = DynamicMenu_addChild;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language="Javascript">
var menu = new DynamicMenu("Menu1");
menu.addParent("Node 1","page1.html");
menu.addChild("Lien 1","page1.html");
menu.addSousParent("Node 11","");
menu.addChild("Lien 1","page1.html");
menu.addChild("Lien 2","page2.html");
menu.addSousParent("Node 111","");
menu.addChild("Lien 1","page1.html");
menu.addParent("Node 2","");
menu.addChild("Lien 1","page1.html");
menu.addChild("Lien 2","page2.html");
</SCRIPT>
</BODY>
</HTML>
Y a plus simple...
RépondreSupprimer