Menu dynamique horizontal simple
Description
C'est un menu, différent de mon dernier car, dans celui-ci, les sous-menus s'affichent à coté des menus au lieu d'en dessous. Aussi, on peut définir sa position avec des coordonnées xy. J'espère qu'il vous sera utile ;-)
Il se peut que le code ne fonctionne pas sur certains navigateurs autres que Internet Explorer.
Source / Exemple :
__________
Fichier JS
¯¯¯¯¯¯¯¯¯¯
// -----------------------------------------------------...
function createMenu() {
document.write("<table border=.5 bordercolor="+menu_bordercolor+" style=cursor:default;position:absolute;top:"+y+";left:"+x+"; cellspacing=0 width="+elementW+">")
for (var i = 0; i < menu.length; i++)
document.write("<tr><td bgcolor="+menu_bgcolor_normal+" id=menu"+i+" onmouseover=menuOver(this,"+i+") onmouseout=menuOut(this,"+i+") onclick=hideSubMenu("+i+") height="+elementH+" > "+menu[i]+"</td></tr>")
document.write("</table>")
for (var i = 0; i < submenu.length; i++) {
document.write("<table border=1 bordercolor="+menu_bordercolor+" style=display:none;cursor:hand;position:absolute;left:"+(x + elementW - 5)+";top:"+(y + (i * elementH))+"; id=submenu"+i+" cellspacing=0 onmouseover=revealSubMenu("+i+") onmouseout=hideSubMenu("+i+") width="+elementW+">")
for (var j = 0; j < submenu[i].length; j++)
document.write("<tr><td bgcolor="+menu_bgcolor_normal+" onmouseover=styleOver(this) onmouseout=styleOut(this) height="+elementH+"> "+submenu[i][j]+"</td></tr>")
document.write("</table>")
}
}
// -----------------------------------------------------...
// -----------------------------------------------------
function menuOver(element, numMenu) {
setDefaultStyle(element)
styleOver(element)
revealSubMenu(numMenu)
}
// -----------------------------------------------------
function menuOut(element, numMenu) {
hideSubMenu(numMenu)
}
// -----------------------------------------------------
function styleOver(element) {
element.bgColor = menu_bgcolor_over
}
// -----------------------------------------------------
function styleOut(element) {
element.bgColor = menu_bgcolor_normal
}
// -----------------------------------------------------
function setDefaultStyle() {
for (var i = 0; i < menu.length; i++)
O("menu"+i).bgColor = menu_bgcolor_normal
}
// -----------------------------------------------------
// -----------------------------------------------------
function revealSubMenu(numMenu) {
hideAll()
show( O("submenu"+numMenu) )
}
// -----------------------------------------------------
function hideSubMenu(numMenu) {
hide( O("submenu"+numMenu) )
}
// -----------------------------------------------------
function show(element) {
element.style.display = ""
}
// -----------------------------------------------------
function hideAll() {
for (var i = 0; i < submenu.length; i++)
hideSubMenu(i)
}
// -----------------------------------------------------
function hide(element) {
element.style.display = "none"
}
// -----------------------------------------------------
// -----------------------------------------------------
function O(id) {
return document.getElementById(id)
}
// -----------------------------------------------------
__________
Fichier HTML
¯¯¯¯¯¯¯¯¯¯
<hmtl>
<title>:: Bienvenue sur ma page!</title>
<head>
<script language=JavaScript src="dyn_menu(hor).js"></script>
<script language=JavaScript>
<!--
var x = 25, y = 50
var elementH = 25, elementW = 150
var menu_bgcolor_normal = "005099"
var menu_bgcolor_over = "#002575"
var menu_bordercolor = "#0075ff"
var menu = [
"<font color=white size=3>Menu 1 ></font>",
"<font color=white size=3>Menu 2 ></font>",
"<font color=white size=3>Menu 3 ></font>",
"<font color=white size=3>Menu 4 ></font>",
"<font color=white size=3>Menu 5 ></font>",
"<font color=white size=3>Menu 6 ></font>",
"<font color=white size=3>Menu 7 ></font>",
"<font color=white size=3>Menu 8 ></font>"
]
var submenu = [
[
"<font color=white size=3>Menu 1 - Option 1</font>",
"<font color=white size=3>Menu 1 - Option 2</font>",
"<font color=white size=3>Menu 1 - Option 3</font>",
"<font color=white size=3>Menu 1 - Option 4</font>",
"<font color=white size=3>Menu 1 - Option 5</font>",
"<font color=white size=3>Menu 1 - Option 6</font>",
"<font color=white size=3>Menu 1 - Option 7</font>",
"<font color=white size=3>Menu 1 - Option 8</font>"
],
[
"<font color=white size=3>Menu 2 - Option 1</font>",
"<font color=white size=3>Menu 2 - Option 2</font>",
"<font color=white size=3>Menu 2 - Option 3</font>",
"<font color=white size=3>Menu 2 - Option 4</font>",
"<font color=white size=3>Menu 2 - Option 5</font>",
"<font color=white size=3>Menu 2 - Option 6</font>",
"<font color=white size=3>Menu 2 - Option 7</font>",
"<font color=white size=3>Menu 2 - Option 8</font>"
],
[
"<font color=white size=3>Menu 3 - Option 1</font>",
"<font color=white size=3>Menu 3 - Option 2</font>",
"<font color=white size=3>Menu 3 - Option 3</font>",
"<font color=white size=3>Menu 3 - Option 4</font>",
"<font color=white size=3>Menu 3 - Option 5</font>",
"<font color=white size=3>Menu 3 - Option 6</font>",
"<font color=white size=3>Menu 3 - Option 7</font>",
"<font color=white size=3>Menu 3 - Option 8</font>"
],
[
"<font color=white size=3>Menu 4 - Option 1</font>",
"<font color=white size=3>Menu 4 - Option 2</font>",
"<font color=white size=3>Menu 4 - Option 3</font>",
"<font color=white size=3>Menu 4 - Option 4</font>",
"<font color=white size=3>Menu 4 - Option 5</font>",
"<font color=white size=3>Menu 4 - Option 6</font>",
"<font color=white size=3>Menu 4 - Option 7</font>",
"<font color=white size=3>Menu 4 - Option 8</font>"
],
[
"<font color=white size=3>Menu 5 - Option 1</font>",
"<font color=white size=3>Menu 5 - Option 2</font>",
"<font color=white size=3>Menu 5 - Option 3</font>",
"<font color=white size=3>Menu 5 - Option 4</font>",
"<font color=white size=3>Menu 5 - Option 5</font>",
"<font color=white size=3>Menu 5 - Option 6</font>",
"<font color=white size=3>Menu 5 - Option 7</font>",
"<font color=white size=3>Menu 5 - Option 8</font>"
],
[
"<font color=white size=3>Menu 6 - Option 1</font>",
"<font color=white size=3>Menu 6 - Option 2</font>",
"<font color=white size=3>Menu 6 - Option 3</font>",
"<font color=white size=3>Menu 6 - Option 4</font>",
"<font color=white size=3>Menu 6 - Option 5</font>",
"<font color=white size=3>Menu 6 - Option 6</font>",
"<font color=white size=3>Menu 6 - Option 7</font>",
"<font color=white size=3>Menu 6 - Option 8</font>"
],
[
"<font color=white size=3>Menu 7 - Option 1</font>",
"<font color=white size=3>Menu 7 - Option 2</font>",
"<font color=white size=3>Menu 7 - Option 3</font>",
"<font color=white size=3>Menu 7 - Option 4</font>",
"<font color=white size=3>Menu 7 - Option 5</font>",
"<font color=white size=3>Menu 7 - Option 6</font>",
"<font color=white size=3>Menu 7 - Option 7</font>",
"<font color=white size=3>Menu 7 - Option 8</font>"
],
[
"<font color=white size=3>Menu 8 - Option 1</font>",
"<font color=white size=3>Menu 8 - Option 2</font>",
"<font color=white size=3>Menu 8 - Option 3</font>",
"<font color=white size=3>Menu 8 - Option 4</font>",
"<font color=white size=3>Menu 8 - Option 5</font>",
"<font color=white size=3>Menu 8 - Option 6</font>",
"<font color=white size=3>Menu 8 - Option 7</font>",
"<font color=white size=3>Menu 8 - Option 8</font>"
]
]
createMenu()
//-->
</script>
</head>
<body bgcolor=black></body>
</html>
Conclusion :
Il se peut que le code ne fonctionne pas sur certains navigateurs autres que Internet Explorer.
Codes Sources
A voir également
- Menu dynamique horizontal simple
- Cv dynamique - Forum PHP
- Menu c - Forum C
- Menu php ✓ - Forum PHP
- Tableau dynamique c++ - Forum C / C++ / C++.NET
- Devis site web dynamique ✓ - Forum PHP
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.