Menu accordeon avec Jquery

Par Laurent | 05.01.10 09: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