Créez facilement un menu de navigation animée

5 mai 2009

Posté par: Mahbub Dans: misc

Ceci est un message très court de la façon dont nous pouvons facilement créer un menu de navigation animée avec jQuery, sans aucun plugin. Vous devez avoir vu les menus de navigation horizontale ou veritical que dilate et se contracte sa taille lors du survol. Avant ces framework javascript est venu, nous avons dû faire beaucoup de code pour obtenir les choses. Pourquoi? Cette manipulation stupide navigateur croix. Je ne veux pas de repartir sur IE.

Ok, voici la chose. Nous sommes tout simplement en utilisant une liste non ordonnée de faire un menu horizontal qui dilate et se contracte. Code est simple morts. Regardons le balisage en premier.

  <div id="navcontainer">
 id="navlist"> <ul
	 <li> <a href="http://www.google.com"> Google </ a> </ li>
	 <li> <a href="http://www.yahoo.com"> Yahoo </ a> </ li>
	 <li> <a href="http://www.msn.com"> MSN </ a> </ li>
	 <li> <a href="http://www.lycos.com"> Lycos </ a> </ li>
	 <li> <a href="http://www.baidu.com"> Baidu </ a> </ li>
 </ Ul>
 </ Div>

Donc, nous avons quelques éléments de la liste il. Donc, les faire apparaître comme menu horizontal que nous avions besoin d'une certaine css qui ressemble à ceci

  * {
 arial , helvetica , sans-serif ; font-family: arial, helvetica, sans-serif;
 }
 # Navcontainer ul
 {
 0 ; padding-left: 0;
 0 ; margin-left: 0;
 #222 ; background-color: # 222;
 White ; Couleur: Blanc;
 left ; float: left;
 100% ; largeur: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: uppercase;
 bold ; font-weight: bold;
 }

 display : inline ; } # Navcontainer ul li {display: inline;}

 # Navcontainer ul li a
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Couleur: Blanc;
 none ; text-decoration: none;
 left ; float: left;
 100px ; width: 100px;
 1px solid #fff ; border-right: 1px solid # fff;
 }

Et la dernière partie .. Faire danser le passage de la souris. C'est très simple avec la fonction animate. Juste quelques lignes ci-dessous ces fera l'affaire. Jetez un oeil.

  ( ) { Fonction $ (() {
		 ) . hover ( function ( ) { $ ("# Navlist un"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) css ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) d'animer ({width: '200px '}, {duration: 200, file d'attente: false}).;
		 },
		 la fonction () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) css ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) d'animer ({width: '100px '}, {duration: 200, file d'attente: false}).;
		 });		
	 });