MENU DYNAMIQUE HORIZONTAL SIMPLE menu, horizontal, simple, navigation, vecteurs, Source N°29170

Information sur la source

Catégorie :Menu & Co Classé sous : menu, horizontal, simple, navigation, vecteurs Niveau : Débutant Date de création : 29/01/2005 Date de mise à jour : 28/11/2006 19:32:42 Vu / téléchargé: 30 659 / 3 903

Auteur : FasteX_

Ecrire un message privé

Note :

6,63 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (19)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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 ;-)

Source

__________
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 = [
"Menu 1 >",
"Menu 2 >",
"Menu 3 >",
"Menu 4 >",
"Menu 5 >",
"Menu 6 >",
"Menu 7 >",
"Menu 8 >"
]
var submenu = [
[
"Menu 1 - Option 1",
"Menu 1 - Option 2",
"Menu 1 - Option 3",
"Menu 1 - Option 4",
"Menu 1 - Option 5",
"Menu 1 - Option 6",
"Menu 1 - Option 7",
"Menu 1 - Option 8"
],
[
"Menu 2 - Option 1",
"Menu 2 - Option 2",
"Menu 2 - Option 3",
"Menu 2 - Option 4",
"Menu 2 - Option 5",
"Menu 2 - Option 6",
"Menu 2 - Option 7",
"Menu 2 - Option 8"
],
[
"Menu 3 - Option 1",
"Menu 3 - Option 2",
"Menu 3 - Option 3",
"Menu 3 - Option 4",
"Menu 3 - Option 5",
"Menu 3 - Option 6",
"Menu 3 - Option 7",
"Menu 3 - Option 8"
],
[
"Menu 4 - Option 1",
"Menu 4 - Option 2",
"Menu 4 - Option 3",
"Menu 4 - Option 4",
"Menu 4 - Option 5",
"Menu 4 - Option 6",
"Menu 4 - Option 7",
"Menu 4 - Option 8"
],
[
"Menu 5 - Option 1",
"Menu 5 - Option 2",
"Menu 5 - Option 3",
"Menu 5 - Option 4",
"Menu 5 - Option 5",
"Menu 5 - Option 6",
"Menu 5 - Option 7",
"Menu 5 - Option 8"
],
[
"Menu 6 - Option 1",
"Menu 6 - Option 2",
"Menu 6 - Option 3",
"Menu 6 - Option 4",
"Menu 6 - Option 5",
"Menu 6 - Option 6",
"Menu 6 - Option 7",
"Menu 6 - Option 8"
],
[
"Menu 7 - Option 1",
"Menu 7 - Option 2",
"Menu 7 - Option 3",
"Menu 7 - Option 4",
"Menu 7 - Option 5",
"Menu 7 - Option 6",
"Menu 7 - Option 7",
"Menu 7 - Option 8"
],
[
"Menu 8 - Option 1",
"Menu 8 - Option 2",
"Menu 8 - Option 3",
"Menu 8 - Option 4",
"Menu 8 - Option 5",
"Menu 8 - Option 6",
"Menu 8 - Option 7",
"Menu 8 - Option 8"
]
]
createMenu()
//-->
</script>
</head>
<body bgcolor=black></body>
</html>

__________

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.

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

dyn_menu(hor).js 2 993 octets
Test.html 4 658 octets

Télécharger le zip

Historique

30 janvier 2005 03:53:10 :: Je m'étais trompé de zip, désolé pour le désagrément...
28 novembre 2006 19:32:42 :: [...]

Sources du même auteur

Toutes les sources de FasteX_

Sources de la même categorie

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

Commentaires

Commentaire de FraGag le 30/01/2005 03:15:33

Tu n'as pas envoyé le bon ZIP, je pense que tu as envoyé celui de ton dernier script. Une chance que tu as donné le code, sinon je n'aurais pas pu le voir.
Commentaire de FasteX_ le 30/01/2005 04:08:25

Je suis désolé, je m'était trompé car les 2 noms de fichiers était très semblables (soit dyn_menu(hor).zip et dyn_menu(ver).zip). J'ai changé le Zip pour le bon. Merci beaucoup de me l'avoir dit :-)

A+
Commentaire de coucou747 le 01/02/2005 19:52:46

à moins que je ne me trompe, il ne fait que deux sous menus, et n'est pas facilement modifiable (comparé à certains...)
Commentaire de squaters le 07/02/2005 17:08:20

question c'est quoi la commande pour ajouter un lien dans le sous menu?????
Commentaire de sphax69 le 30/09/2005 10:13:38

pareil, j'aimerais bien savoir comment faire pour positionner un lien dans un des sousmenu...
Commentaire de FasteX_ le 30/09/2005 23:26:43

Remplacez tout simplement le contenu d'un sous-menu par:

<a href=[url]>[titre]</a>

ou encore:

<span... onclick=location.href('[url]')>[texte]

FasteX
Commentaire de majidali le 12/05/2006 02:35:17

salut tout le monde ,j'ai rmplacé le contenue par ("<a href="www.google.com">aaaaaa</a>",)
mais ça marche pas .
j'aimerais bien savoir comment ?
et merci
Commentaire de FasteX_ le 13/05/2006 02:07:43

Salut MAJIDALI,

 Il y a 2 erreurs apparentes dans ton code.

 - 1ère erreur: Dans le cas présent tu dois définir l'adresse complète (http://...)

 - 2ème erreur: Les "" s'emboitent.. ce qui cause un sacré problème à l'interpreteur.

 Remplace le contenu par:
 ("<a href='http://www.google.com'>aaaaaa</a>")

A+,
 FasteX_
Commentaire de majidali le 13/05/2006 02:21:04

merci FasteX_ ,meintenant ça marche bien
Commentaire de jpheng le 30/05/2006 08:54:34

Bonjour , ton menu dynamique fonction parfaitement :D , cependant je voudrai savoir quel ligne ajouter afin que lorsqu'on réduit la fenetre du navigateur le menu diminu aussi ,car quand je diminu la fenetre le menu se "deplace" . merci ^^
Commentaire de ma11 le 27/11/2006 23:07:33

Pour moi, ce menu est super.
il fonctionne bien avec un lien url, mais comment l'utiliser avec
un lien pour ouvrir une page html ou une photo par exemple.
Cordialement michel Azéma
Commentaire de FasteX_ le 28/11/2006 01:13:11

Pour ce qui est du déplacement "involontaire" du menu, je n'ai malheureusement aucune solution à proposer.

Dans le cas d'une page qui s'ouvrirait au clic sur un élément du menu, il serait possible de le faire en incluant une fonction dans un lien à la place de l'url. Par exemple:

"<a href=javascript:window.open('http://www.google.com');> Lien</a>"

Bonne prog!, FasteX_
Commentaire de ma11 le 28/11/2006 12:40:16

mon courrier du 27/11/2006
pas de problème j'ai trouvé.
donc mon message est sans objet.
Très satisfait de ce type de menu.
cordialement a vous michel Azéma
Commentaire de FasteX_ le 28/11/2006 16:00:07

Je suis content qu'il te plaise,j'ai publié ce menu ici dans le but qu'il serve à d'autre. Ce but est atteint. Si vous avez des suggestions dans le but d'améliorer le menu tant au niveau du code ou que de l'apparence, alors n'hésitez pas!

Sincèrement, FasteX_
Commentaire de ma11 le 28/11/2006 16:22:08

J'ai essayé de remplacer "Menu 1> " par une petite image gif dans le genre petit drapeau pour signaler la langue par exemple, ou toute autre petite chose explicite (sans succès) mais je ne suis pas très fort dans ce domaine. Si tu as la solution fais le savoir cela pourait interesser d'autres personnes en tout cas, moi j'aimerais essayer.
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
Commentaire de FasteX_ le 28/11/2006 19:44:57

Un "span" cliquable permettrait de le faire. En résumé, créer un emplacement vide qui dirigera vers la page de ton choix, et y insérer une image. Par exemple:

"
<img src=image.jpg>
"
Commentaire de ma11 le 28/11/2006 20:02:39

"<img src=bt_suivant.gif>",
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.
Commentaire de toufmaster le 10/12/2006 22:59:47

Salut tout le monde,
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.
Commentaire de ma11 le 09/03/2007 12:10:39

Ocasionnellement, saurait-tu ou je peux trouver de quoi créer un panier virtuel c'est pour un ami qui veut que je lui incorpore un panier dans un site de vente de produits équitables. Comme il n'a pas beaucoup de bénéf la-dessus, il ne peut payer une pesonne pour le lui faire.
Merci par avancepour lui et à très bientôt.
Très cordialement MA11

Ajouter un commentaire

Discussions en rapport avec ce code source

Menu horizontal avec intercalaires par FuxY

menu de navigation par bg62

largeur de chaque element d'un menu horizontal en css par stopworries

Menu vertical et horizontal avec ouverture/fermeture d'un clic par neo_tsubasa

créer un menu horizontal sur 2 lignes par zephou92

Menu deroulant horizontal par flow92220

menu navigation entre les balise div par speedylol

Menu horizontal par glumuck

menu dynamique horizontal par jousay

menu tout simple par wireless12