Menu déroulant horizontal avec sous menu

6 décembre 2010

Menu déroulant horizontal avec sous menu

Voici une capture du menu installé sur un de mes anciens blog :

Sans_titre_2

A vous de le personnaliser en passant par la feuille de style.

Vous pouvez mettre des images ou des liens à la place des titres ---- Catégorie ------>
Ajouter ou pas des -------> pour agrandir les colonnes
Changer la couleur des liens actifs et au passage de la souris (hover)
Changer la couleur du fond
Ajouter des séparateurs entre chaque Catégorie...

Commencez par coller le code ci-dessous dans le bas de votre feuille de style :

/*--------- Menu horizontal -----------*/
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/skeleton/skeleton.css */

#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px georgia; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:30px; width: 900px; padding:0;}

#nav li {float:left;}
#nav li li {float:left;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#FFF; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */
/* ================================================================
The original version http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls.
=================================================================== */

stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
      for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
         {
         cssRule = document.styleSheets[i].rules[x];
         if (cssRule.selectorText.indexOf("LI:hover") != -1)
         {
               newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
         }
      }
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
      getElm[i].onmouseover=function() {
         this.className+=" iehover";
      }
      getElm[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" iehover\\b"), "");
      }
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

Ensuite collez le script suivant dans votre page d'accueil.

Pour que le menu s'affiche au dessus de votre bannière placez le script après la balise </head> en faisant un retour à la ligne.

Pour qu'il s'affiche sous votre bannière, placez le script juste avant la balise <div id="leftbar"> qui se trouve sur la même ligne que <body> (dans ce cas, retirez les balises <center></center> et <br> qui se trouvent en début et fin de script).

<br>
<center>
<script type="text/javascript">

stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
      for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
         {
         cssRule = document.styleSheets[i].rules[x];
         if (cssRule.selectorText.indexOf("LI:hover") != -1)
         {
               newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
         }
      }
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
      getElm[i].onmouseover=function() {
         this.className+=" iehover";
      }
      getElm[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" iehover\\b"), "");
      }
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

<ul id="nav">
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 ------------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
</ul>
</center>
<br>

Ne touchez pas à la première partie du script !

Ensuite, vous devez remplir le reste du script avec vos informations :

L'adresse de vos liens, le titre de vos liens et le titre de la catégorie principale.

Vous pouvez mettre une image pour la catégorie principale en collant l'adresse de votre image à la place du titre, comme ceci :

Si vous voulez ajouter une catégorie ou en supprimer une, voici la zone d'un bloc:

<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>

Pour supprimer une sous catégorie ou en ajouter une, voici la zone d'un bloc :

<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>

Pour ajouter ou supprimer un lien, c'est cette ligne :

Revenons à la feuille de style...

Ne modifiez pas la seconde partie !

Pour changer les couleurs et tout le reste faites des tests en modifiant les valeurs et les codes couleur, je suis
sur que vous trouverez tout seul !

Allez amusez-vous bien...

Posté par Demolite à 11:52 - Commentaires […] - Permalien [#]

Tags: Menu déroulant, Canalblog, Mode Avancé, Menu horizontal, Sous menu

Partager cet article

Vous aimez ?

0 vote

Mettre un image devant le Posté par

Moteur de recherche interne

Commentaires

flexi2202

16/02/2011 14:10

enfin +-

flexi2202

16/02/2011 14:09

as tu un autre menu du meme genre

flexi2202

16/02/2011 14:09

merci de ton aide

Demolite

16/02/2011 14:06

Sorry, mais comme j'ai fermé mon ancien blog où se trouvait le menu, je ne peux plus faire de tests, alors tu vas devoir te débrouiller toute seule ;o)<br /> Avec un peu de patience et de persévérance tu y arriveras :o)

flexi2202

16/02/2011 13:45

a tout hasard je suppose qu a présent tu utilises un autre menu pour tes blogs