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.
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é.
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.
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
}Voilà cette première partie est finie. La suite sera disponible dans les prochains jours
Voir la partie 2
La création de site Internet sur mesure est le coeur de métier de l'agence web Infini'click.
D'autres prestations sont également proposées, découvrez-les !
- Tutoriel : installer un serveur Debian (wheezy)
- Tutoriel : Installer un certificat SSL
- Piwik : monitorez tous vos sites discrètement
- Tutoriel Paypal : Intégration et configuration du paiement en ligne
- Tutoriel PayPlug : intégration au panier d'achat
- Référencement des images : l'état de l'art
- Des onglets en CSS avec JQuery
- Gildas le 04/03/2022 à 18:00
Nop j'ai que le require('fpdf.php) ; Mais pas... - Hervé le 04/03/2022 à 17:58
Gildas Tu n'appelles pas de fichier externe via un... - Gildas le 04/03/2022 à 17:50
merci de ton retour rapide, effectivement dans ma... - Hervé le 04/03/2022 à 17:45
Bonjour Gildas Effectivement, 8 ans ça fait un bail.... - Gildas le 04/03/2022 à 17:37
Bonjour Hervé, Bon j'arrive 8 ans après la... - Olivier le 16/01/2022 à 23:09
C'est clair que les actions réalisées ne correspondent...