Comment créer un menu déroulant en CSS (Sans Javascript) !

Il existe plusieurs techniques pour créer un menu déroulant, dans cet article je vais vous montrer comment créer un menu déroulant sans JavaScript, sans Jquery, vous pouvez créer votre propre menu déroulant seulement en utilisant le CSS (Cascading Style Sheet).

Je vais commencer par vous présenter le code HTML du menu. (l’explication juste après)

[html]
<ul id= »menu-easy »>
<li>
<a href= »# »>Accueil</a>

</li>
<li>
<a href= »# »>Produits</a>
<ul class= »sous-menu »>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
</ul>
</li>
<li>
<a href= »# »>EasyTutoriel.com</a>
<ul class= »sous-menu »>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
</ul>
</li>
<li>
<a href= »# »>Contact</a>
<ul class= »sous-menu »>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
<li><a href= »# »>Sous menu</a></li>
</ul>
</li>
</ul>
[/html]

Dans le code HTML en haut, vous allez remarquer qu’on a utilisé ces balises : <ul> <li> <a>. Chaque menu commence avec une liste non-ordonnée qui commence par un élément <ul>. Pour chaque balise <ul> on trouve des balises <li> enchaînés, ce sont les éléments du menu. Et pour mettre un élément du menu, on a utilisé la balise <a>avec l’attribut href= »# » pour définir le lien.

Voici la structure d’un menu simple sans CSS (Sans class, sans id) :

[html]<ul>
<li><a href= » »></a></li>
<li><a href= » »></a></li>
<li><a href= » »></a></li>
<li><a href= » »></a></li>
</ul>[/html]

Maintenant, on va ajouter le style CSS, pour rendre le menu plus agréable. Pour le fournir l’effet de montrer/cacher des sous-menus sans JavaScript. En modifiant le code qui suit, vous pouvez changer les couleurs de votre menu.

[css]
#menu-easy
{
background: 004772;
width: 644px;
height: 30px;
font-size:16px;
font-family:sans-serif,arial;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menu-easy li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menu-easy li a:link, #menu-easy li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: black;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menu-easy li a:hover { background-color: #003453; }
#menu-easy li a:active { background-color: #003453; }

#menu-easy .sous-menu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menu-easy .sous-menu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid #003453;
border-right: 1px solid #003453;
}
#menu-easy .sous-menu li a:link, #menu-easy .sous-menu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: #005182;
}
#menu-easy .sous-menu li a:hover
{
background-image: none;
background-color: #002c47;
}

#menu-easy li:hover > .sous-menu { display: block; }
[/css]

Voilà, maintenant, vous êtes opérationnel et vous pouvez modifier le CSS pour adapter la présentation de votre site.

Amusez-vous avec votre nouveau menu !

N’oubliez pas de publier vos commentaires.

Soufiane – EasyTutoriel.com

---

Si vous avez aimé cet article, prière de choisir le suivant...

Apprenez les bases de l’XHTML ! (mon site, pas à pas)Dans le premier article de la série "Créons un site pas à pas", je vous ai dit que le langage…Trucs et astuces

Apprenez le CSS de A à Z ! (mon site, pas à pas)Dans l'article précédent de cette série, je vous ai parlé du CSS, vous avez découvert comment le placer dans un…Création de sites web

Comment créer votre première page XHTML/CSS ? (mon site, pas à pas)Dans ce tutoriel dédié aux débutants, vous allez découvrir comment créer une page statique en XHTML/CSS pour débuter votre site…Création de sites web

Le CSS, comment le mettre en place ? Comment ça marche ? (mon site, pas à pas)Comme je vous ai dit dans le dernier cours de l'HTML, le CSS est un élément indispensable pour organiser sa…Création de sites web

Comment personnaliser la page d’inscription WordPress !Voulez-vous améliorer la page d’inscription de votre site Wordpress et la rendre plus adaptée au thème par défaut de votre site…Création de sites web

Découvrez comment créer des boutons attractifs pour votre site web !Aujourd'hui, vous allez découvrir divers méthodes pour créer des boutons attractifs pour votre site web en utilisant tas de méthodes…Création de sites web