Accueil >> Articles

Un menu vertical en CSS - Partie 1

Catégorie : Tutoriels - Ecrit par Hervé le 12/04/2010 - Article lu 682 fois - 0 commentaire

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 href="#">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 href="#">Menu 4</a>
	        <ul class="col2">
		    <li class="smenu"><a href="#">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

rake le 02/02/2012 à 11h13
Pour 149 €, le travail doit être un...
Djolhan le 01/02/2012 à 16h39
Après avoir utilisé plusieurs fois ce système sur...
Cyril le 31/01/2012 à 17h19
Pas trop long Nicolas, non. ;) C’est suffisamment...
Nicolas le 30/01/2012 à 18h40
Tout d’abord joli boulot de synthèse, très clair....
Bertrand le 30/01/2012 à 16h16
J’adore les défis sous entendus que les blogueurs...
Comm2Presse le 29/01/2012 à 14h32
Ce qui est fou (bien que quelque part...

<< Février 2012