1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Menu & Co
  5. Menu dynamique horizontal simple

Menu dynamique horizontal simple

0/5 (19 avis)

Vue 43 811 fois - Téléchargée 4 661 fois

Télécharger le projet
Commenter

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

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
ma11
Messages postés
12
Date d'inscription
dimanche 26 novembre 2006
Statut
Membre
Dernière intervention
13 novembre 2009
9 mars 2007 à 12:10
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
toufmaster
Messages postés
1
Date d'inscription
dimanche 3 décembre 2006
Statut
Membre
Dernière intervention
10 décembre 2006
10 déc. 2006 à 22:59
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.
ma11
Messages postés
12
Date d'inscription
dimanche 26 novembre 2006
Statut
Membre
Dernière intervention
13 novembre 2009
28 nov. 2006 à 20:02
"",
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.
FasteX_
Messages postés
44
Date d'inscription
lundi 5 juillet 2004
Statut
Membre
Dernière intervention
29 février 2008
28 nov. 2006 à 19:44
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:

"
"
ma11
Messages postés
12
Date d'inscription
dimanche 26 novembre 2006
Statut
Membre
Dernière intervention
13 novembre 2009
28 nov. 2006 à 16:22
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
Afficher les 19 commentaires
S'inscrire maintenant

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.

Du même auteur (FasteX_)