Un menu vertical en CSS - Partie 1

Un menu vertical en CSS - Partie 1

Un nouveau tutoriel au programme du jour : un menu vertical en CSS intégral sans javascript.

Le plus compliqué consiste à le rendre compatible sous tous les navigateurs, y compris Internet Explorer 6.

Allez c’est parti pour une explication, certes longue, mais qui vous donnera un résultat assez plaisant.

Dans un premier temps, il nous faut un fichier index.html qui contiendra le menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un menu vertical en CSS compatible tous navigateurs</title>
</head>
<body>
<div id="content">
    <div id="menu">
        <ul class="col1">
            <li><a href="#">Menu 1</a></li>
            <li class="smenu"><a>Menu 2</a>
                <ul class="col2">
                   <li><a href="#">Sous-menu 2.1</a></li>
                   <li><a href="#">Sous-menu 2.2</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a></li>
            <li class="smenu"><a>Menu 4</a>
                <ul class="col2">
                    <li class="smenu"><a>Sous-menu 4.1</a>
                        <ul class="col3">
                            <li><a href="#">Sous-menu 4.1.1</a></li>
                            <li><a href="#">Sous-menu 4.1.2</a></li>
                            <li><a href="#">Sous-menu 4.1.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sous-menu 4.2</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Rien de bien compliqué à ce stade, mais le menu se ballade comme il veut sur la page.

Voir le résultat

C’est là que ça va se compliquer avec la mise en place du CSS. Nous allons créer un fichier que l’on nommera menu.css.

Ajouter le lien de la feuille de style

<link rel="stylesheet" type="text/css" href="css/menu.css" />

Avant

</head>

On commence par la mise en forme générale de la page

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: normal;
   white-space: normal
}
#content {
   width: 1000px;
   margin: 0 auto
}

Le contenu de la page est centré mais le menu n’est toujours pas stylisé.

Voir le résultat

Un petit pause clop et un café, ça vous tente ? Allez 5 minutes de pause :-)

Quoi déjà une pause ? Oui ça fait seulement 5 minutes que vous lisez ce billet, mais moi j’en suis déjà à une bonne heure de rédaction.

Allez, nous poursuivons avec la partie menu du CSS.

On fixe la largeur du menu en ajoutant à la suite

div#menu { width: 120px }

Ensuite nous formatons les blocs des menus et nous cachons les sous-menus avec display: none.

div#menu ul {
   padding: 0;
   margin: 0;
   width: 140px;
   border: 1px solid #666;
   border-bottom: none;
   background: #ddd
}
div#menu ul ul, div#menu ul ul ul {
   padding: 0;
   margin: 0;
   width: 140px;
   border: 1px solid #666;
   border-bottom: none;
   background: #ddd;
   position: absolute;
   top: -1px;
   left: 140px; display: none
}
div#menu ul li, div#menu ul li ul li, div#menu ul li ul li ul li {
   position: relative;
   list-style: none;
   border-bottom: 1px solid #666;
   height: auto;
   line-height: 20px
}

Voilà le menu qui commence à avoir une allure bien plus sympa avec une couleur de fond et des bordures.

Voir le résultat

On termine cette première partie en finalisant l’apparence du menu de premier niveau.

Ajouter en dessous

div#menu li:hover {
   background: #666
}
div#menu li a {
   color: #666
}
div#menu li a:hover, div#menu ul.rang1 li.smenu:hover a {
   color: #fff
}
div#menu li a {
   text-decoration: none;
   padding: 4px 8px;
   display: block;
   width: auto;
   height: 100%;
   line-height: 20px
}

Voir le résultat

Voilà cette première partie est finie. La suite sera disponible dans les prochains jours

Voir la partie 2

Catégorie Tutoriels - Écrit par le 12/04/2010 - Article lu 5 170 fois - 0 commentaire

Les commentaires de ce billet sont fermés

Haut de page