mardi 4 février 2014

Créer un menu déroulant dans Blogger

Blogger permet de créer un menu avec des liens vers des pages ou des libellés. Mais c'est assez rudimentaire et Blogger n'offre pas la possibilité d'avoir un menu déroulant.

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

Vous pouvez voir le résultat ici:
Les plus belles plantes tropicales
Regroupement familial Belgique


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
La couleur de l'arrière-plan des onglets qu'on survole doit être modifié dans le code:
#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" > "". 
Pour un lien externe, vous pouvez ajouter target="_blank" afin que la page s'ouvre dans une nouvelle fenêtre (optionnel).

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>
Une nouvelle rubrique doit être ajoutée avant la dernière rubrique (<li class="last">).

Ajouter une sous-rubrique:

<li><a href='LIEN'>Sous-rubrique</a></li>

3. Finaliser: