menu css

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

Publié par | Catégories : Création de sites

Dernière mise à jour : 30 septembre 2016

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).

creer menu deroulant

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

Soufiane - Easytutoriel.com


L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 16 commentaires ! { Ajouter le vôtre ? }

  • wagneur dit :

    Bonjour,
    Génial et tres clair.
    Mais je ne comprends pas comment rendre tout le menu vertical ?
    A+
    Patrick

  • Achernar dit :

    C'est sympa c'est tuto. je peux vous assurer que je me demandait comment je pourrai y arriver sans javascript car c'est pour moi une bte noir. merci infiniment pour cette promotion de la science

  • baba dit :

    très bien fait sauf qu'on ne peut pas faire du copier coller
    merci

  • Gestion des risques dit :

    Explications très claires. Merci

  • Oniesta dit :

    Salut Soufiane,

    C'est très bien explique ce menu déreoulant avec du CSS, car avant je croyais qu'on peut faire un menu déroulant qu'avec du javascript. Mais là, je comprend très bien l'explication dans ce tuto.

    Merci pour ce tuto, tu serai un grand professeur.

    • Soufiane Sabiri dit :

      Bonjour Oniesta,
      Vous allez découvrir plusieurs autres choses dans les prochains jours, car aujourd'hui ce site web n'est qu'en version beta (version d'évaluation).
      Merci de vos commentaires que vous avez posté dans ce site web !
      Et soyez le bienvenue sur EasyTutoriel.com
      Amicalement,
      Soufiane

  • Jérôme dit :

    Salut soufiane,

    Est ce que tu as testé ton menu sur plusieurs navigateurs pour savoir sur lesquels il est compatible ?

    • Soufiane Sabiri dit :

      Bonjour Jérôme,
      Non, car je suis en période d'examens, dès que j'aurais fini l'examen nationale, je vais analyser le contenu que j'ai mit quand j'étais stressé :(.
      Bref, je vais le tester le mois prochain, je suis en période d'examens :) .
      Merci pour votre remarque !
      A toute.

  • Broeck dit :

    Bon travail.

    Je me permets juste une petite correction à des fins visuelles.
    Suis sous Firefox 4 et IE 7.
    Tel qu'indiqué dans le script, la largeur des lignes des sous-menu est de 149px. Dans mes navigateurs, j'ai un petit décalage à droite qui n'est pas très joli.
    En indiquant 148px, tout est nickel.
    Pour les débutants, il s'agit de la ligne 51 de la partie CSS.
    Bonne continuation

    • Soufiane dit :

      Bonjour Broeck,
      Merci pour votre remarque, juste en ce qui concerne le décalage à droite, je vous propose de modifier le "width" de la balise ou bien de la balise , ou bien comme vous avez fait, vous avez modifier le width des balises , et ça aussi peut marcher ^^.
      Amicalement.

  • Medlamine dit :

    Merci

  • Soufiane dit :

    Je vous remercie tous pour l'encouragement !

  • ayoub dit :

    un trés bon travail mr soufiane bon continuation

  • Dark Marouane dit :

    niiice ;)

  • J-AO dit :

    très bien ;)

  • Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)