CSS 3 mega dropdown menu

CSS3 Mega Dropdown Menu

Le but de ce tutoriel est de réaliser un menu en utilisant au maximum les nouvelles possibilités de CSS3 afin de réduire au mieux l’utilisation d’images. Démo Ce tutoriel a été réalisé à partir de deux sources : La première, c’est le design du menu. Il provient de Tuttoaster qui le propose en téléchargement gratuitement sur son site avec 10 associations de couleurs différentes. La deuxième source, c’est le script …

 

Le but de ce tutoriel est de réaliser un menu en utilisant au maximum les nouvelles possibilités de CSS3 afin de réduire au mieux l’utilisation d’images.

Démo
Ce tutoriel a été réalisé à partir de deux sources :

  • La première, c’est le design du menu. Il provient de Tuttoaster qui le propose en téléchargement gratuitement sur son site avec 10 associations de couleurs différentes.

Tuttoaster free navigation download

  • La deuxième source, c’est le script du menu. Il a été réalisé par Soh Tanaka qui a fait un tutoriel sur la réalisation d’un méga menu avec jQuery.

Soh Tanaka Mega Dropdown Menu

Etape 1 : la structure HTML

Du fait de la particularité du bouton d’accueil, j’ai choisi de le placer en dehors du <ul> afin de pouvoir le styler plus facilement. Pour le reste, c’est classique. Les <li> qui ont un sous-menu possèdent une classe « liSub » afin de les différencier.

Le sous-menu est placé dans une <div> que l’on cache par défaut. La catégorisation du sous-menu a été faite de façon à pouvoir afficher beaucoup de rubriques. Il est bien sûr possible de le simplifier en supprimant des <ul>.

<div id="nav_wrapper">
   <span id="menu_start"><a class="home" href="#">Home</a></span>
<ul id="topnav">
	<li class="liSub">
         <a href="#">
            <span class="dd_wrapper">
               Tutorials
               <span class="dd_action"><img src="arrow.png" alt="" /></span>
           </span>
         </a>
<div class="sub" style="opacity: 0; display: none; width: 300px;">
<ul>
	<li><a href="#">Painting</a></li>
	<li><a href="#">Photo Effects</a></li>
	<li><a href="#">Text Effects</a></li>
	<li><a href="#">Drawing</a></li>
	<li><a href="#">Illustration</a></li>
</ul>
<ul>
	<li><a href="#">Interface</a></li>
	<li><a href="#">Designing</a></li>
	<li><a href="#">HTML & CSS</a></li>
	<li><a href="#">JavaScript & AJAX</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</div></li>
	<li class="liSub">
          <a href="#">
             <span class="dd_wrapper">
                Resources
	        <span class="dd_action"><img src="arrow.png" alt="" /></span>
	     </span>
	  </a>
<div class="sub" style="opacity: 0; display: none; width: 450px;">
<div class="row">
<ul style="width: 225px;">
	<li>
<h2><a href="#">Deal of the Week</a></h2>
</li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
</ul>
<ul style="width: 225px;">
	<li>
<h2><a href="#">Clearance Items</a></h2>
</li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
	<li><a href="#">Navigation Link - 2 Column</a></li>
</ul>
</div>
<div class="row" style="margin: 0pt;">
<ul>
	<li>
<h2><a href="#">Deal of the Week</a></h2>
</li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
	<li>
<h2><a href="#">Clearance Items</a></h2>
</li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
	<li>
<h2><a href="#">Open Box Items</a></h2>
</li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
	<li><a href="#">Navigation Link</a></li>
</ul>
</div>
</div></li>
	<li>
       <a href="#">
          <span class="single_wrapper">Wordpress</span>
       </a></li>
	<li>
          <a href="#">
             <span class="single_wrapper">Community news</span>
          </a></li>
	<li>
          <a href="#">
             <span class="single_wrapper">About</span>
          </a></li>
	<li>
          <a href="#">
             <span class="single_wrapper">Archives</span>
          </a></li>
	<li id="last-li">
          <a href="#">
              <span class="single_wrapper">Contact</span>
          </a></li>
</ul>
    <span id="menu_end"><img src="last_li.png" alt="" width="5" height="46" /></span></div>

Etape 2 : Styler le menu en CSS

La partie la plus intéressante du tutoriel réside dans la création de la plupart des éléments graphiques du menu avec l’utilisation des propriétés CSS3 qui permettent d’éviter l’accumulation d’images.

Pour ce menu, très peu d’images sont utilisées; cela permet d’optimiser le chargement de la page. En plus de cela, j’ai opté pour l’utilisation de sprite CSS. Pour ceux qui ne savent pas ce qu’est un sprite et à quoi ça sert, voici un petit schéma explicatif qui démontre l’intérêt de grouper ses images en une seule, surtout dans le cas ou elles sont quasiment identiques.

Sprite CSS

Les 5 autres images à droite sont les seules utilisées pour réaliser ce menu.

Je vais maintenant m’attarder sur l’utilisation des propriétés CSS3 qui ont permis d’obtenir un menu identique à sa version Photoshop.

L’ombre sur le texte : propriété text-shadow

text shadow CSS3

La propriété text-shadow comporte 4 paramètres : décalage horizontal, décalage vertical, flou, couleur.

Ici, j’applique une ombre sur « TUTORIALS » qui est au même niveau horizontal et vertical, de couleur noir et de flou 2px.

   ul#topnav li.liSub a, ul#topnav li a {
     text-shadow: 0 0 2px black;
   }

Les bords arrondis : propriété border-radius

border radius css3

Le sous-menu ainsi que le passage de la souris sur les éléments du menu ont des bords arrondis fait grâce à la propriété border-radius.

   border-radius:         7px; /* Propriété CSS3 */
   -moz-border-radius:    7px; /* Propriété CSS3 pour Firefox */
   -khtml-border-radius:  7px; /* Propriété CSS3 pour navigateurs KHTML */
   -webkit-border-radius: 7px; /* Propriété CSS3 pour navigateurs Webkit */

L’ombre : propriété box-shadow

box shadow css3

La div qui contient le sous-menu possède une ombre tout autour d’elle. La propriété CSS3 box-shadow permet d’obtenir cet effet qui utilise la même syntaxe que text-shadow.

Malheureusement, Internet Explorer ne supporte pas encore cette propriété dans ses versions actuelles du navigateur… Il faudra patienter jusqu’à la version 9 qui est actuellement en développement pour pouvoir utiliser toutes les propriétés CSS3.

Donc pour IE 8 et inférieur, j’ai juste utilisé un hack pour appliquer un background-color à la div.

   box-shadow:         0px 0px 2px #343333; /* Propriété CSS3 */
   -webkit-box-shadow: 0px 0px 2px #343333; /* Propriété CSS3 pour Firefox */
   -moz-box-shadow:    0px 0px 2px #343333; /* Propriété CSS3 pour navigateurs Webkit */
   background-color:   #f8f8f8\9; /* Hack pour cibler IE8, IE7, IE6 */

Le dégradé : propriété background-image

background image css3

Pour cet effet, le CSS a appliqué nécessite ici une syntaxe particulière en fonction des navigateurs :

  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#dfdfdf, endColorstr=#f8f8f8); /* Pour IE */
  background-image: -moz-linear-gradient(	top, #e5e5e5, #FFFFFF); /* Pour Firefox */
  background-image: -webkit-gradient( linear,	left top, left bottom, from(#e5e5e5), to(#FFFFFF)); /* Pour Webkit */

Pour que le dégradé fonctionne sur Internet Explorer, il faut utiliser la propriété « filter« . Là encore la syntaxe est un peu différente pour Firefox et pour les navigateurs sous Webkit.

Pour vous faciliter la tâche, voici un site bien conçu qui vous permet de générer des dégradés CSS3 de façon très intuitive et rapide. Voir le site

Etape finale : Le résultat

Au final, le CSS3 aura permis une nouvelle approche dans la création d’effets visuels sur des éléments qui auraient auparavant été automatiquement et par défaut des images.

Il est désormais possible de substituer les techniques habituelles d’intégration par les nouveautés apportées par le CSS3.

Malheureusement, ce menu ne va pas être visualisé de la même façon sur tous les navigateurs…

Il a le mérite de s’y afficher correctement, mais pour ce qui concerne Internet Explorer, voici les différences que l’on obtient :

Comparaison CSS3 navigateurs

Internet Explorer 8 et 7 ne s’en tirent pas très bien, ces deux versions du navigateurs ne possèdent pas le support complet du CSS3, mais ce n’est pas pour autant que le menu s’affiche mal, il est juste beaucoup plus carré et moins esthétique. Internet Explorer 9 va pouvoir devenir un vrai rival lorsqu’il remplacera la version 8 d’ici peu de temps on l’espère.

En ce qui concerne Opera, il est entre les deux car il ne supporte pas encore les dégradés.

Conclusion

Je pense que même si les propriétés CSS3 peuvent paraîtres encore expérimentales du fait de l’utilisation de différentes syntaxes pour chaque navigateur, il est néanmoins important de commencer à s’y intéresser.

J’espère que ce tutoriel vous aura fait découvrir les possibilités très étendues du CSS3. D’autres tutoriels suivront pour vous apprendre à maîtriser toutes ses facettes.

Pour aller plus loin :

37 commentaires

S'abonner au RSS des commentaires
  1. Tibo
    Posté le 16/03/2012 à 14h16

    Bonjour à tous,

    Quelqu’un peut m’indiquer où puis-je télécharger les codes sources (css et js) de ce super tuto?

    Merci

  2. Le mog
    Posté le 25/01/2012 à 17h42

    Super le menu, seulement j’ai une question.
    Est’il possible de l’intégrer à un cms comme prestashop?
    J’ai creer un hook dans j’ai placé un module avec le code du menu.. mais après ça se gate..ça ne marche pas.
    J’essai mais je n’y arrive pas.Et je suis assez débutant dans le php et la logique CMS.
    merci à vous de m’aider :)

  3. scscjcnc
    Posté le 19/01/2012 à 18h16

    J’adore ce menu.
    Malheureusement, il n’est pas tout à fait centré sur la page mais légèrement décalé sur la gauche.
    Est-ce que quelqu’un aurait une idée pour le centrer ?
    Merci.

  4. Lutfie Tutorial Blog
    Posté le 16/11/2011 à 23h21

    nice style menu i like this, thanks for share

  5. Xt@z
    Posté le 08/11/2011 à 11h01

    Malheureusement incompatible avec le plugin Featured Content Gallery de WordPress… :’(

    PS: Comment créer les fichiers images à partir du psd ?

  6. coque personnalisée
    Posté le 21/10/2011 à 22h15

    c’est désormais bon, le js avait été mal enregistré :( par contre je n’arrive pas à mettre mon bloc de texte en dessous du menu, on dirait qu’il est transparent :(

  7. coque personnalisée
    Posté le 21/10/2011 à 20h42

    j’ai beau cherché, je ne comprends pas pourquoi le menu déroulant ne fonctionne pas chez moi, est ce que quelqu’un pourrait jeter un coup d’oeil, http://www.coque-unique.com/V6%20(new%20menu)/moteur.php

    j’ai pourtant fait un copié collé tout bête :(

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>