Tuto menu déroulant animé avec jQuery, tutoriel & guide de travaux pratiques en pdf.

Le HTML

(1) Avant de pouvoir faire quoi que ce soit, ne devons lier les fichiers CSS et jQuery dans l’en-tête (entre balises head) de notre document HTML (ici, depuis le répertoire /fichiers) :
<link href= »fichiers/style.css » rel= »stylesheet » type= »text/css » /> <script type= »text/javascript » src= »fichiers/jquery.js »></script>
Ces deux fichiers vont contenir les styles et la librairie d’effets JavaScript, mais avant d’appliquer des styles ou des animations, nous devons créer la liste elle-même. Nous utiliserons une liste non ordonnée toute simple :
<ul class= »menu_body »> <li><a href= »# »>Qui sommes-nous ?</a></li> <li><a href= »# »>Portfolio</a></li> <li><a href= »# »>Clients</a></li> <li><a href= »# »>Blog</a></li> <li><a href= »# »>Forums</a></li> <li><a href= »# »>Gallerie</a></li> <li><a href= »# »>Contact</a></li> </ul>
Ce que nous avons ici est aussi simple qu’il n’y parait. Une liste non ordonnée avec la classe « menu_body ». A l’intérieur, nous avons plusieurs éléments de liste avec un lien de navigation. Ensuite, nous avons besoin d’une image au-dessus de la liste. Cette image servira d’en-tête visible lorsque le menu sera replié. Il n’est pas obligatoire que ce soit une image, cela fonctionnera aussi bien avec du texte, mais je voulais quelque chose de visuel. Si vous voulez utiliser la même que moi, vous pouvez la trouver ici. Voici le HTML complet avec l’image :
<img src= »images/navigate.png » width= »184″ height= »32″ class= »menu_head » /> <ul class= »menu_body »> <li><a href= »# »>Qui sommes-nous ?</a></li> <li><a href= »# »>Portfolio</a></li> <li><a href= »# »>Clients</a></li> <li><a href= »# »>Blog</a></li> <li><a href= »# »>Forums</a></li> <li><a href= »# »>Gallerie</a></li> <li><a href= »# »>Contact</a></li> </ul>