Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

06 décembre 2010

Menu déroulant horizontal avec sous menu

Posté par Demolite - Dans la catégorie Canalblog
Tags : , , , ,

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 :

<li><a href="#nogo"><img src="http://adresse image.gif"></a>

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 :

<li><a href="http://Adresse du lien.html">Nom du lien</a></li>

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...


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41