The mandate
Créer un menu en CSS

Créer un menu en CSS

Catégorie: Javascript.
Posté par le 28/05/2011.
Dernière mise à jour le 25/08/2014.

Description

Ce tutoriel vous expliquera comment créer un menu dynamique en CSS.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte.

Code HTML

Tout d’abord, nous allons créer un menu à  trois niveaux en HTML en utilisant les balise « ul » et « li ». Voici le code du menu :

<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link
rel="stylesheet" media="screen" type="text/css" title="menu" href="menu.css" />
<title>
menu en CSS</title>
</head>
<body>
<ul
class="niveau1">
    <li>
element niveau 1
        <ul class="niveau2">
            <li>
element niveau 2
                <ul class="niveau3">
                    <li>
element niveau 3</li>
                    <li>
element niveau 3</li>
                </ul>
            </li>
            <li>
element niveau 2</li>
            <li>
element niveau 2</li>
        </ul>

    </li><li>element niveau 1
    </li>
</ul>
</body>
</html>

 

Comme vous pouvez le constater, la création du menu est assez simple. Les différents niveaux du menu comporte chacun une classe (niveau1, niveau2 et niveau3). Ce sont sur ces classes que vont s’appliquer les différents styles permettant d’avoir un menu présentable à plusieurs niveaux.

Le fichier CSS que nous allons créer est inclut en haut de la page à l’aide de la balise « link ».

Feuille de style CSS

Nous pouvons maintenant nous occuper de l’aspect visuel de notre menu. Voici le code du fichier menu.css :

.niveau1 li{
    position: relative;
    float: left; /*Met les éléments du niveau 1 en ligne.*/
    list-style-type: none;
    color:red;
    min-width: 10%;
}
.niveau2, .niveau3{
    position: absolute; /*Met les blocs les uns en dessous des autres.*/
    display: none; /*Rend les blocs invisibles.*/
    min-width:100%; /*Les niveaux 2 et 3 prennent la largeur qu'ils ont besoins.*/
}
.niveau2{
     padding:0%; /*Retire le décalage vers la droite.*/
}
.niveau3{
    position: relative; /*Permet le décalage des blocs de niveaux 2.*/
}
.niveau1:hover .niveau2, .niveau2:hover .niveau3{
     display: block;
}
.niveau2 li{color:blue; }
.niveau3 li{color:green; }

Nous avons rendu invisible les différents niveaux à l’aide de la propriété display: none;.

Grace à la pseudo-classe :hover, une fois que l’utilisateur passe son curseur sur le niveau1, le niveau2 apparait (de même pour le niveau3 lorsqu’on passe son curseur sur le niveau2). Je ne vais pas expliquer les autres styles car je pense que les commentaires suffisent. De plus, ils permettent juste de rendre le menu plus beau.

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: CSS html JavaScript menu dynamique web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don