Łatwe tworzenie animowanych menu nav

05 maja 2009

Wysłany przez: Mahbub W: misc

Jest to bardzo krótki post, jak możemy w prosty sposób tworzyć animowane menu nawigacyjne z jQuery bez wtyczki. Musisz widziałem poziome lub veritical menu nawigacji, który rozszerza się i kurczy jego rozmiar na wywrócenia się pojazdu. Zanim te ramy javascript przyszli, musieliśmy zrobić sporo kodu dostać rzeczy zrobić. Dlaczego? To głupi krzyż obsługa przeglądarki. Nie chcę zaczynać od nowa na IE.

Ok, oto sprawa. Jesteśmy po prostu za pomocą listę nieuporządkowaną zrobić poziome menu, które rozszerza się i kurczy. Kod jest martwe proste. Spójrzmy na znaczniki pierwszy.

  <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>

Mamy więc pewne elementy listy znajduje. Tak uczynić je wyglądać poziomym menu musielibyśmy trochę css, który wygląda tak

  * {
 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 ; Kolor: Biały;
 left ; float: left;
 100% ; szerokość: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: uppercase;
 bold ; font-weight: bold;
 }

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

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

I ostatnia część .. Dzięki czemu taniec po najechaniu myszą. Całkiem proste z ożywionej funkcji. Tylko kilka z tych wierszy poniżej załatwi. Wystarczy popatrzeć.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist"). Aktywowanych (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) css ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) animować ({width: '200px '}, {czas trwania: 200, kolejka: false}).;
		 }
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) css ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) animować ({width: '100px '}, {czas trwania: 200, kolejka: false}).;
		 });		
	 });