Menu accordeon avec Jquery

Par Laurent | 05.01.10 14:38 | 0 commentaire(s) | programmation

Voici un script proposé par le site tutorialzine qui va vous permettre de réaliser un très élégant menu qui aura un effet intéressant visuellement de mouvement : léger rebondi.
Ce script utilise la librairie JQUERY et du code css et html pour afficher le menu.
Un menu très frais et avec en plus un mouvement qui va sans doute attirer l'oeil du visiteur.

Comment fonctionne ce menu en accordeon ?

Une demo est visible sur le site, pour télécharger le contenu il suffit d'aller sur le bouton Download.Les sources comprennent 4 fichiers et un répertoire image(4 images colorées des menus).
Pour voir le résultat sur son ordinateur(une fois le fichier demo.zip dézippé) il suffira de lancer le fichier demo.html.

Voilà donc par exemple si je souhaite faire un menu avec les thèmes jeu,outil...je télécharge le script sur tutorialzine et j'édite le fichier demo.html et donc voici un exemple d'intégration avec les thèmes :
Il y a 2 façons d'intégrer la libraire Jquery
1)En local -> il suffit de télécharger la librairie Jquery et ensuite on l'intégre en l'ajoutant au niveau(arborescence) du fichier demo.html
2) ou par le biais de l'url (comme dans l'exemple téléchargé)
Dans les 2 cas on fait appel à celle-ci dans la partie head du fichier html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu accordeon</title> <link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="main"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a href="#" class="green">Jeu <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> <li><a href="#">Exemple 3</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">Outil <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> <li>Texte 1</li> <li>Texte 2</li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="blue">Design <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> <li><a href="#">Exemple 3</a></li> <li><a href="#">Exemple 4</a></li> <li><a href="#">Exemple 5</a></li> <li><a href="#">Exemple 6</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="red">Science <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="green">Photo <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">Musique <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="blue">Etonnant <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="red">Logiciel <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="green">Sport <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">Programmation <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Exemple 1</a></li> <li><a href="#">Exemple 2</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html>

Et voici donc l'exemple ici

Menu accordeon avec Jquery

Commentaires

Thèmes

Tags récents

Populaires