CSS3 Mega Dropdown Menu | Snoupix

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. 

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

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 href="#" class="home">Home</a></span>
    <ul id="topnav">	    	
        <li class="liSub">
        	<a href="#">
        		<span class="dd_wrapper">
        			Tutorials
					<span class="dd_action"><img src="arrow.png" /></span>
				</span>
			</a>
            <div style="opacity: 0; display: none; width: 300px;" class="sub">
            	<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" /></span>
				</span>
			</a>
            <div style="opacity: 0; display: none; width: 450px;" class="sub">
            	<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 style="margin: 0pt;" class="row">
                    <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" 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.

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

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

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

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

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 :

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 :

• Interactive image vamp up with jquery, css3 and php
• CSS3 click chart
• Générateur de dégradés CSS3
• CSS3 dropdown menu
• CSS3-only horizontal drop line tab menu
• Simulate realism with CSS3
• Sweet AJAX Tabs With jQuery 1.4 & CSS3
• CSS3 styled jquery dropdown