Könnyen teremt egy animált menü nav

Május 5, 2009

Írta: Mahbub In: Egyéb

Ez egy nagyon rövid bejegyzést arról, hogyan tudunk egyszerűen létrehozhat egy animált navigációs menü nélkül jQuery plugin. Biztos láttad vízszintes vagy veritical navigációs menük, hogy bővíti a mérete és a szerződések a rollover. Mielőtt ezeket a javascript keretrendszer jött, meg kellett tennünk elég sok kódot kap a dolgokat. Miért? Ez a hülye kereszt böngésző kezelését. Nem akarok kezdeni az IE.

Ok, itt van a dolog. Mi egyszerűen használ egy rendezetlen listát egy vízszintes menü, amely kitágul és szerződések. Kód halott egyszerű. Nézzük meg a jelölés első.

  <div id="navcontainer">
 <ul id="navlist">
	 <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>

Tehát van néhány listaelemek ott. Tehát, hogy azok megjelennek, mint a vízszintes menü mi lenne szükségünk néhány css amely így néz ki

  * {
 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 ; Színe: fehér;
 left ; float: left;
 100% ; szélesség: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: nagybetűs;
 bold ; font-weight: bold;
 }

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

 # 1 navcontainer ul li
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Színe: fehér;
 none ; text-decoration: none;
 left ; float: left;
 100px ; szélesség: 100px;
 1px solid #fff ; border-jobbra: 1px solid # fff;
 }

És az utolsó rész .. Így ha az egér fölötte tánc. Elég egyszerű a animate funkciót. Csak néhány a következő sorokat az akarat csinál a fogás. Vessen egy pillantást.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist 1"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This). Css ("background-color", "# 369");
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This). Animálni ({width: '200px "}, {duration: 200, sorban: false});
		 }
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This). Css ("background-color", "# 222");
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This). Animálni ({width: '100px "}, {duration: 200, sorban: false});
		 });		
	 });