{ Menu css3 / jquery }
Introduction
Vous rêvez de mettre en pratique les nouveaux styles du CSS3 ? Voici l'occasion rêvée avec ce tutoriel qui va vous montrer comment créer un menu entièrement en CSS3 et jQuery.
Le but de ce tutoriel est de réaliser un menu utilisant au maximum les nouvelles possibilités de CSS3 afin de réduire au mieux l'utilisation d'images.
Placement des fichiers
Décompressez l'archive à la racine du site :
Comme toujours, on prend l'habitude de replacer les fichiers correspondants dans les différents dossiers à la racine de votre site : à savoir :
Les fichiers se terminant avec l'extension .png doivent être placés dans le
dossier images.
Le script à placer dans le dossier
'js'
jquery.hoverIntent.minified.js
La partie html
Du fait de la particularité du bouton d'accueil, l'auteur de ce menu a décidé 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 des autres.
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>
Le 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.
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, l'auteur a 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
Appels des fichiers javascript
Copiez-collez le code ci-dessous entres les balises <head> et </head> de votre page
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js">
</script>
<script type="text/javascript">
/*
* jQuery Mega Drop Down Menu script by Soh Tanaka
* http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
*
*/
$(document).ready(function(){
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else {
//If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 0, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
}; $("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
// Add class to the current element
$("ul#topnav li").click(function(){
$("ul#topnav").find("li.current").removeClass().removeAttr("class");
$(this).addClass("current");
});
// Change arrow on hover
$("li.liSub").hover(function(){
$(this).find("span img").attr("src", "arrow_hover.png");
},function(){
$(this).find("span img").attr("src", "arrow.png");
});
// Delete the border for the last li of the submenu
$("ul#topnav .sub ul li:last-child a").css("border", "none");
});
</script>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.