Menu horizontal supérieur déroulant (méthode simplifiée)

Menu horizontal supérieur déroulant (méthode simplifiée)
Rappel: Le code fourni ci-après fait appel au javascript. Il est donc nécessaire que celui-ci soit activé sur votre blog pour que le code fonctionne. Pour cela, faire la demande au support Eklablog.

L'inconvénient de faire des tutos très rapidement, c'est de faire des choses trop complexes. J'ai donc modifié un peu le tuto pour un menu horizontal supérieur déroulant de ce type:
accueil

Contact

Nous écrire

Plan d'acès

Tutos

HTML

Tuto 1 html

Tuto 2 html

CSS

Forums

Commentaires

Aide

Goodies

Telechargements

Formulaires

Bannières
Voici le code à placer dans un module simple HTML

/* Code HTML */ <ul id="menux"> <li><a href="/ #">accueil</a></li> <li><a href="/ #">Contact</a> <ul> <li><a href="/ #">Nous écrire</a></li> <li><a href="/ #">Plan d'acès</a></li> </ul> </li> <li><a href="/ #">Tutos</a> <ul> <li><a href="/ #">HTML</a> <ul> <li><a href="/ #">Tuto 1 html</a></li> <li><a href="/ #">Tuto 2 html</a></li> </ul> </li> <li><a href="/ #">CSS</a></li> </ul> </li> <li><a href="/ #">Forums</a> <ul> <li><a href="/ #">Commentaires</a></li> <li><a href="/ #">Aide</a></li> </ul> </li> <li><a href="/ #">Goodies</a> <ul> <li><a href="/ #">Telechargements</a></li> <li><a href="/ #">Formulaires</a></li> <li><a href="/ #">Bannières</a></li> </ul> </li> </ul> /* Code Javascript */ <script type="text/javascript">// <![CDATA[ window.onload=function() { var MonDiv=document.createElement('DIV'); MonDiv.setAttribute('id', 'menu'); MonDiv.innerHTML=document.getElementById('menux').innerHTML; MonDiv.style.position='relative'; var Myctn=document.getElementById("header"); var test=Myctn.getElementById("titre_header"); Myctn.insertBefore(MonDiv,test); var noeud=document.getElementById('menux'); noeud.parentNode.removeChild(noeud);} // ]]></script>

Ce code comprend deux parties:
- accueil
- Contact
  
  Nous écrire
  
  Plan d'acès
- Tutos
  
  HTML
  
  Tuto 1 html
  
  Tuto 2 html
  
  CSS
- Forums
  
  Commentaires
  
  Aide
- Goodies
  
  Telechargements
  
  Formulaires
  
  Bannières
- La structure de la partie HTML qui correspond au résultat ci-contre
- Le code javascript pour copier ce menu dans le header
Les parties à modifier sont:
- Les url des liens (href=/ #)
- Les libellés
- La structure du menu
Ne pas toucher à la partie javascript en rose dans le code.

Le CSS correspondant au menu de cette page est le suivant:

#menu, #menu ul /* Liste */ { z-index:100; padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 21px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } #menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 12px; /* hauteur du texte : 12 pixels */ } #menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : lightgrey; /* couleur de fond */ color : black; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 144px; /* largeur */ } #menu li /* Elements des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid black; /* on met une bordure blanche à droite de chaque élément */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ } #menu li ul /* Sous-listes */ { position: absolute; /* Position absolue */ width: 144px; /* Largeur des sous-listes */ left: -999em; /* Hop, on envoie loin du champ de vision */ } #menu li ul li /* Éléments de sous-listes */ { /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid black; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul li { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ } #menu li ul ul { margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid black ; /* Petite bordure à gauche pour ne pas coller ... */ } html>body #menu li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ } #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { left: auto; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ }

En conclusion il suffit de:
1. Copier le code en haut de page et le coller dans un module simple HTML
2. Modifer la partie en bleu pour que le menu soit comme vous le souhaitez
3. Copier le code CSS et le placer sur votre blog à l'aide du menu apparence/Modifier le thème/Ajouter du CSS
4. Régler la position du menu dans Apparence/Modifier le thème/En-tête/Menu
5. Modifier le CSS selon vos envies

Edito

Menu horizontal supérieur déroulant (méthode simplifiée)