Május 5, 2009

Könnyen teremt egy animált menü nav

Í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});
		 });		
	 }); 

Ennyi! Nézze meg működés közben

2 Válasz-hoz "könnyen létre egy animált menü nav"

1 | Ed

Június 22, 2009 at 02:08 am

Avatar

Szia
Nagyon szép hatást, csak gondoltam, ez lehet, hogy adjunk egy elhalványulnak hatással van a menüben?

2 | Saqib

Szeptember 27, 2010 at 17:11

Avatar

szép!

Hozzászólás űrlap


Fordító

English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroatian flagDanish flagFinnish flagHindi flagPolish flagRomanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flag

Címkék