Créer un Menu Déroulant

Vous avez été nombreux à me demander comment faire un menu déroulant. Ca y est ! Aujourd'hui je vous propose enfin le tutoriel tant attendu ! ;)

Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article créé spécialement pour ce tutoriel ;)

Sommaire

1. Introduction
2. Création du menu déroulant
3. Personnalisation de l'apparence du menu déroulant
1. Couleur des liens
2. Couleurs des liens quand survolés par la souris
3. Couleur du fond des liens
4. Couleur du fond des liens quand survolés par la souris
5. Largeur de la barre des sous-catégories
6. Distance au dessus, en dessous, et à gauche des liens
7. Distance entre la barre des sous-catégories et la barre de navigation
8. Alignement horizontal de la barre des sous-catégories
4. Tutoriel exclusif : Créer un menu déroulant dans un menu déroulant !

Introduction

Tout d'abord, comme toujours, sauvegardez l'apparence de votre blog avant d'y apporter des modifications. Vous pourrez ainsi revenir en arrière si besoin ;)

Ce tutoriel est une suite aux tutoriels sur la création et la personnalisation de sa barre de navigation. Je vous conseil donc de les lire.

Une fois la sauvegarde effectuée, on peut passer aux choses sérieuses.

Création du menu déroulant

Pour insérer des sous-catégories dans votre menu, il faut modifier le code HTML de celui-ci. Pour cela, allez dans la partie Mise en page sur le tableau de bord :

Puis cliquez sur Modifier sur le widget correspondant à votre menu :

Pour ajouter des sous-catégories à un lien, il faut ajouter une nouvelle liste de liens comme ceci :

<ul>
<li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
<li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
</ul>

Où :

• http://adressedublog.fr/souscatégorie1 correspond à l'adresse url de la sous-catégorie 1
• Sous Catégorie 1 correpsond au texte du lien visible dans le menu déroulant

Cette liste de sous-catégories va être intégrée au menu entre les balises </a> et </li> du lien sous lequel on veut qu'ils apparaissent.

Par exemple, si je veux que la liste de sous-catégories apparaisse en survolant le lien "Catégories" de mon menu alors j'écris :

<li><a title="Catégories" href="#">Catégories</a>

<ul>
<li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
<li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
</ul>

</li>

Notez que pour l'adresse url de "Catégories" j'ai écrit "#". Ceci permet de ne pas inclure d'adresse url. De cette manière, quand on cliquera sur Catégories dans le menu, on ne sera pas renvoyé vers un lien. Seule la liste de sous-catégories apparaîtra.
Mais vous pouvez tout à fait y inclure une adresse url si vous le souhaitez. Ceci n'affecte pas le menu déroulant.

Une fois satisfait du contenu de votre menu déroulant, sauvegardez en cliquant sur Enregistrer :

N'oubliez pas !
Un tutoriel exclusif pour créer un menu déroulant dans un menu déroulant vous attend à la fin du tutoriel !

Personnalisation de l'apparence du menu déroulant

Nous avons donc créé les liens de notre menu déroulant. Maintenant il faut ajuster son apparence pour qu'il ressemble à un menu déroulant, et le personnaliser :)

A noter que ce tutoriel est une suite du tutoriel de personnalisation de sa barre de navigation. Et que je considère que vous l'avez déjà personnalisé en suivant ce tutoriel. Ici on se concentre sur la partie "déroulante" du menu. Je vous conseil donc de lire le tutoriel précédent pour savoir comment changer la police, la taille de liens, leur couleur, et centrer la barre de navigation ;)

Cliquez sur Modèle dans le menu à gauche du tableau de bord :

Puis sur Modifier le code HTML :

Cliquez ensuite sur la flèche noir à gauche de <b:skin>...</b:skin> :

Cliquez ensuite n'importe où dans la fenêtre de code et appuyez sur Ctrl et F en même temps. Une boîte de dialogue s'ouvrira en haut à droite de la boîte de code.
Tapez :

.tabs .widget li, .tabs .widget li {

et appuyez sur Entrer :

Vérifiez que dans cette partie vous avez bien les 2 lignes suivantes :

display: inline-block;
float: none;

Comme ceci :

.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}

Si ce n'est pas le cas, rectifiez le code !

*EDIT*

Vérifiez également de la même manière que dans la partie :

.tabs-outer {
}

Vous avez le code suivant :

overflow: visible;

Comme ceci :

.tabs-outer {
overflow: visible;
}

Si vous ne le trouvez pas rajoutez le sous le code suivant :

.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}

Ce qui donne :

.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}

.tabs-outer {
overflow: visible;
}

Ceci est important pour que le menu déroulant apparaisse correctement sous la barre de navigation !

On peut maintenant passer à la personnalisation du menu déroulant :)

Cliquez à nouveau dans la fenêtre de code et appuyez sur Ctrl et F en même temps. Tapez :

]]></b:skin>

Dans la boîte de dialogue et appuyez sur Entrer :

C'est juste au dessus de cette ligne que nous allons inclure notre code pour personnaliser le menu déroulant.

Le code est un peu compliqué et long à expliquer. Donc pour faire simple, je vous propose de coller le code ci-dessous en entier au dessus de la ligne ]]></b:skin>. Et je vous expliquerai comment personnaliser l'apparence du menu déroulant par la suite.

/* Apparence du menu déroulant */
.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;               /* Largeur de la barre des sous-catégories */
padding-top: 10px;    /* Distance entre barre des sous-catégories et barre de navigation */
z-index:9999;
}

.tabs .widget li:hover ul {
display: block;
margin-top: 0px;
margin-left:  -15px;        /* Alignement avec le lien de la barre de navigation */
}

.tabs .widget li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;                  /* Largeur de la barre des sous-catégories */
}

.tabs .widget li:hover li a {
background-color: #C49DB8;    /* Couleur du fond du lien */
}

.tabs .widget li ul a {
display: block;
height: auto;
margin: 0px;
padding-top: 5px;              /* Distance au dessus des liens */
padding-bottom: 5px;       /* Distance en dessous des liens */
padding-left: 10px;             /* Distance à gauche des liens */
text-align: left;
}

.tabs .widget ul ul a {
color: #ffffff;             /* Couleur des liens */
}

.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}

Comme ceci :

On va maintenant voir comment personnaliser les sous-catégories du menu déroulant :

• Couleur des liens
• Couleurs des liens quand survolés par la souris
• Couleur du fond des liens
• Couleur du fond des liens quand survolés par la souris
• Largeur de la barre des sous-catégories
• Distance au dessus, en dessous, et à gauche des liens
• Distance entre la barre des sous-catégories et la barre de navigation
• Alignement horizontal de la barre des sous-catégories

Changer la couleur des liens

Pour changer la couleur du lien de la sous-catégorie, il faut modifier la valeur de "color" du code suivant :

.tabs .widget ul ul a {
color: #ffffff;            /* Couleur des liens */
}

Changer la couleur des liens quand survolés par la souris

Pour changer la couleur du lien de la sous-catégorie quand survolé par la souris, il faut modifier la valeur de "color" du code suivant :

.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}

Changer la couleur du fond des liens

Pour changer la couleur du fond des liens des sous-catégories, il faut modifier la valeur de "background-color" du code suivant :

.tabs .widget li:hover li a {
background-color: #C49DB8;    /* Couleur du fond du lien */
}

Changer la couleur du fond des liens quand survolés par la souris

Pour changer la couleur du fond des liens des sous-catégories quand survolés par la souris, il faut modifier la valeur de "background-color" du code suivant :

.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}

Changer la largeur de la barre des sous-catégories

Pour changer la largeur de la barre des sous-catégories, si le texte d'un lien est renvoyé à la ligne par exemple, on peut changer la valeur de "width" des codes suivants, en augmentant ou diminuant le nombre de pixels px :

.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;           /* Largeur de la barre des sous-catégories */
z-index: 9999;
}

et

.tabs .widget li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;             /* Largeur de la barre des sous-catégories */
}

Modifier la distance au dessus, en dessous, et à gauche des liens

Pour modifier la distance au dessus des liens, il faut modifier la valeur de "padding-top" du code suivant.
Pour modifier la distance en dessous des liens, modifier la valeur de "padding-bottom" :

.tabs .widget li ul a {
display: block;
height: auto;
margin: 0px;
padding-top: 5px;              /* Distance au dessus des liens */
padding-bottom: 5px;           /* Distance en dessous des liens */
padding-left: 10px;            /* Distance à gauche des liens */
text-align: left;
}

De plus, modifier la valeur de "padding-left" permet de modifier la distance à gauche des liens.

Sur le code suivant, on peut changer l'alignement horizontal de la barre des sous-catégories avec la barre de navigation, en jouant sur la valeur de "margin-left".
Une valeur négative déplacera la barre des sous-catégories vers la gauche (comme dans l'exemple), et une valeur positive la déplacera vers la droite.

.tabs .widget li:hover ul {
display: block;
margin-top: 0px;
margin-left:  -15px;        /* Alignement avec le lien de la barre de navigation */
}

Modifier la distance entre la barre des sous-catégories et la barre de navigation

Pour modifier la distance entre la barre des sous-catégories et la barre de navigation, il faut changer la valeur de "padding-top" du code suivant :

.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;               /* Largeur de la barre des sous-catégories */
padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
z-index: 9999;
}

Et voilà pour les bases !

Vous avez créé votre menu déroulant ! :D

Pour information voici le code CSS de la barre de navigation utilisée en plus ici :

/* Espacement et Bordure du Dernier Lien de la Barre de Navigation */
.tabs-inner .section:last-child ul {
padding-right: 0px;
}

/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
padding-left: 0px;
}

/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
text-align: center;
background-color: #C49DB8;
}

/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Calibri;
text-transform: uppercase;
font-size: 14px;
color: #ffffff;
}

/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
}

/* Couleur du Fond des Liens quand Survolés par la Souris */
.tabs-inner .widget li:hover {
background-color: #B061A2;
}

/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
overflow: visible;
}

/* Centrer la Barre de Navigation + Largeur des Liens et de la Barre de Navigation*/
.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 15px;
margin: 0px;
}

Tutoriel exclusif !

Créer un menu déroulant dans un menu déroulant !

• Télécharger !

Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article créé spécialement pour ce tutoriel ;)