J'ai trouvé cette méthode qui est relativement simple et qui permet
de modifier le style facilement dans la personnalisation du modèle.Vous pouvez ainsi personnaliser le menu au lieu de vous retrouver avec ces menus dans des couleurs horribles qu'on trouve sur internet et qui ne s'accordent jamais avec votre modèle.
C'est un peu long à lire mais il faut retenir que:
1. on ajoute le code dans le CSS en mode avancé de personnalisation de modèle, donc sans devoir éditer le code HTML du modèle (ce qui diminue le risque de bousiller votre modèle)
2. on ajoute le menu dans un gadget dans Mise en page
Source: Xomisse
Procédure:
1. Ajouter le code dans le CSS:
Allez dans Modèle > Personnaliser > Avancé > Ajouter le fichier CSS et collez le code suivant:#cssnav {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Personnaliser le modèle - permet de changer la police, taille, etc... */
color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la taille */
}
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
height: 40px; /* Change la hauteur du menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: left;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Personnaliser le modèle - permet de changer la police, taille, etc... */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police quand on survole */
background-color: $(tabs.selected.background.color); /* Personnaliser le modèle - permet de changer la police quand on survole */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* change la largeur du menu déroulé */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Personnaliser le modèle - changer l'arrière-plan */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* change la largeur du menu déroulé */
}
#cssnav li:hover li a {
background: #FFFFFF; /* Personnaliser le modèle - changer l'arrière-plan d'un lien quand on survole */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Personnaliser le modèle - changer la couleur du texte quand on survole */
background-color: $(tabs.selected.background.color); /* Personnaliser le modèle - changer l'arrière-plan d'un lien quand on survole */
border: 0px;
text-decoration: none;
}
2. Modifier le style:
Le style peut être modifié dans Modèle > Personnaliser > Avancé- Liens
- Texte des onglets
- Arrière-plan des onglets
#cssnav li:hover li a {
background: #FFFFFF; /* Personnaliser le modèle - changer l'arrière-plan
d'un lien quand on survole */
}
La largeur des cases du menu doit être changée dans le code:
width: 200px; /* change la largeur du menu déroulé */
3. Créer le menu:
Voici le code de base du menu:<!-- start navmenu -->
<ul id="cssnav">
<li class="active"><a href="LIEN">Accueil</a></li>
<li class="sub"><a href="LIEN">RUBRIQUE 1</a> <ul>
<li><a href="LIEN">Sous-rubrique 1A</a></li>
<li><a href="LIEN">Sous-rubrique 1B</a></li>
</ul>
</li>
<li class="sub"><a href="LIEN">RUBRIQUE 2</a> <ul>
<li><a href="LIEN">Sous-rubrique 2A</a></li>
<li><a href="LIEN">Sous-rubrique 2B</a></li>
</ul>
</li>
<!-- AJOUTER DES RUBRIQUES ICI -->
<li class="last"><a href="LIEN">RUBRIQUE</a></li>
</ul>
<!-- end navmenu -->
Ajoutez ce code dans un gadget:
Mise en page > Ajouter un gadget > HTML/Javascript (ou dans un éditeur de texte simple pour plus de facilité pour l'ajouter ensuite comme gadget).<li class="active"> le premier menu, en principe la page d'accueil
<li class="sub"> les menus entre le premier et le dernier
<li class="last"> le dernier menu
LIEN: le lien vers:
- une page de votre blog
- une page de libellés
- un lien externe
- rien: il n'est pas nécessaire de donner un lien ici, ça peut être tout simplement une rubrique qui amène vers les sous-rubriques mais ne dirige pas vers une page. Dans ce cas enlever le mot "LIEN" > "".
Ajouter une rubrique:
<li class="sub"><a href='LIEN'>RUBRIQUE</a>
<ul>
<li><a href='LIEN'>Sous-rubrique</a></li>
<li><a href='LIEN'>Sous-rubrique</a></li>
</ul>
</li>Ajouter une sous-rubrique:
<li><a href='LIEN'>Sous-rubrique</a></li>3. Finaliser:
- glisser le gadget en haut de page
- si vous aviez déjà un menu, il faut l'enlever
- si vous voulez qu'il apparaisse dans la version mobile, il faut l'activer (voir Activer ou désactiver des widgets dans Blogger mobile).