Menu dynamique horizontal simple
Soyez le premier à donner votre avis sur cette source.
Vue 43 548 fois - Téléchargée 4 650 fois
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
- Menu dynamique horizontal ✓ - Forum - Javascript / DHTML
- Menu horizontal simple - Codes sources - Flash (Menu & navigation)
- Javascript menu dynamique - Guide
- Menu dynamique php - Guide
- Ajout de sous menu dynamiquement - Codes sources - Visual Basic / VB.NET (API)
Merci par avancepour lui et à très bientôt.
Très cordialement MA11
je voulais savoir deux choses:
-que fait-on lorsque dans un menu on ne veut pas de sous-menu? J'ai enlevé le contenu [] mais j'ai l'impression que ca fait buger le navigateur; (Internet Explorer me dit que submenu.lengh prend une valeur nulle, je pense que tous mes problèmes partent de la mais je ne vois pas trop comment résoudre cela)
- mon menu se planque derrierre mes calques. Comment je le fais passer devant?
Merci d'avance.
j'ai réussi avec cette chaîne ce qui me donne une image (celle qui me convient) dans le menu de gauche.
encore merci et a + pour de nouvelles options mais la je pense que ça ira.
cordialement Michel A.
"
"
je suis en train de restructurer mon site familial mais avant de le mettre en ligne j'aimerais avoir tous les éléments en main.
Cordialement Michel Azéma
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.