Menu déroulant horizontal

Comment créer un menu déroulant dynamique pour son site, en utilisant le CSS. Voici un petit article pour voir les principales caractéristiques. De l’alignement, la taille et les effets, voici un exemple simple pour pouvoir réaliser le votre facilement.

Il n’est pas très simple de faire son menu surtout si vous devez avoir des sous-menus. La mise en page en CSS bien que simple peut rapidement devenir compliqué pour un débutant.

Dans cet article, nous allons juste faire ce menu.

Code HTML

Tout d’abord, nous allons saisir dans un fichier html :

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv=Content-Type charset="utf-8" />
     <title>menu déroulant</title>
     <meta name="description" content="Menu déroulant" />
<style type="text/css">
</style>
</head>
<body>
<ul class="niveau1">
	<li>Menu 1</li>
	<li>Menu 2
	<ul class="niveau2">
		<li class="plus">Menu 2.1
        	<ul class="niveau3">
			<li>Menu 2.1.1</li>
			<li>Menu 2.1.2</li>
		</ul>
		</li>
		<li>Menu 2.2</li>
		<li>Menu 2.3</li>
		<li>Menu 2.4</li>
		<li>Menu 2.5</li>
	</ul>
	</li>
	<li>Menu 3</li>
</ul>
</body>
</html>

A ce niveau vous allez obtenir cela :

  • Menu 1
  • Menu 2
    • Menu 2.1
      • Menu 2.1.1
      • Menu 2.1.2
    • Menu 2.2
    • Menu 2.3
    • Menu 2.4
    • Menu 2.5
  • Menu 3

Mise en forme CSS

Nous allons commencer la mise en forme CSS, pour faire simple, dans le code HTML précédemment donner, il y a deux balises vides <style></style>, nous allons y inclure notre mise en page. On aurait pu inclure un fichier css.

Pour la suite de l’article, je ne marquerai que le code CSS .

Annulation de la mise en page par défaut

Je vous conseillerai de partir d’une page blanche (je veux dire sans mise en forme).

.niveau1, .niveau2, .niveau3{
        margin:0;
        padding:0;
        list-style-type: none;
}

On enlève les puces et les espacements, on obtient ce menu.

Alignement horizontaux et verticaux des éléments

Nous allons commencer à disposer nos éléments de listes :

  • le premier niveau du menu sera horizontal
  • le second et troisième niveaux seront verticaux
  • le texte sera centré
  • La largeur sera de 140 pixels et la hauteur de 20 pixels

Le résultat est ici.

Gérer l’apparition et la disparition des sous-menus

Nous allons maintenant gérer les menus déroulant et le positionnement du menu.

/*Réglage commun des éléments de toutes les listes*/
.niveau1, .niveau2, .niveau3{
        margin:0;
        padding:0;
}
.niveau1 li {
        list-style-type: none;
        position: relative;
        width: 140px;
        height:20px;
        text-align:center;
        float:left;
}
/*Fin du réglage commun des éléments de toutes les listes*/

/*Réglage du niveau 1*/
.niveau1 li{
        display:inline-block;
}
/*Fin du réglage niveau 1*/

/*Disparition des sous-menus*/
.niveau1 .niveau2, .niveau2 .niveau3{
        display:none;
        position:absolute;
}
/*Fin de la disparition des sous-menus*/

/*Alignement des sous-menus*/
.niveau1 .niveau2{
        left:0;
        top:20px;
}
.niveau2 .niveau3{
        left:140px;
        top:0;
}
/*Fin des alignements des sous-menus*/

/*Apparaition au survol commun*/
li:hover ul.niveau2, li li:hover ul.niveau3 {
        display: block;
}
/*Fin des apparaition au survol commun*/

Dans ce code, rien de bien compliqué:

  • Pour éviter le décalage de tous les sous-menus, le positionnement est des différentes listes se fait avec position:absolute; .
  • Au survol des différents on vient modifier le display  des listes.
  • Le float:left; sur les éléments du premier niveau permet d’éviter les espaces entres les différents éléments de cette liste.
  • Les éléments du second niveau se fait en fonction de votre taille des éléments du premiers niveaux soit 0 pixel sur la gauche en fonction du parent et 20 pixel vers le bas.
  • Les éléments du dernier niveau sur le même principe que précédemment mais avec un décalage de 140 pixels sur la droite.

Mise en place des détails de la mise en page

Enfin nous allons mettre une mise en page simple :

  • une couleur d’arrière plan
  • surbrillance de l’élément
  • bordure sur les sous-menu
  • bordure passe si un sous-menu possède un autre sous-menu (utilisation de la class plus.
/*Réglage commun des éléments de toutes les listes*/
.niveau1, .niveau2, .niveau3{
        margin:0;
        padding:0;
}
.niveau1 li {
        list-style-type: none;
        position: relative;
        width: 140px;
        background-color: #E0E0E0;
        height:20px;
        text-align:center;
        float:left;
}
/*Fin du réglage commun des éléments de toutes les listes*/

/*Réglage du niveau 1*/
.niveau1 li{
        display:inline-block;
}
/*Fin du réglage niveau 1*/

/*Disparition des sous-menus*/
.niveau1 .niveau2, .niveau2 .niveau3{
        display:none;
        position:absolute;
}
/*Fin de la disparition des sous-menus*/

/*Alignement des sous-menus*/
.niveau1 .niveau2{
        left:0;
        top:20px;
}
.niveau2 .niveau3{
        left:140px;
        top:0;
}
/*Fin des alignements des sous-menus*/

/*Apparaition au survol commun*/
li:hover ul.niveau2, li li:hover ul.niveau3 {
        border: 1px solid grey;
        display: block;
}
li:hover{
        background-color:red;
}
li.plus{
        border-bottom: 1px solid grey;
}
/*Fin des apparaition au survol commun*/

Le résultat est visible ici.

Avec ceci, il vous sera facilE de récupérer cette mise en page et de l’adapter pour votre site. Avec quelques modification, c’est simple de faire un menu déroulant vertical.

Laisser un commentaire