..


Sponzorované odkazy

jQuery: rozbaľovacie menu s slide efekt

Článok napísal Max Bossi
Strana 1 z 2

V tomto krátkom článku vám predstaviť svoju jQuery plugin pre vytvorenie jednoduché, ale pekné, drop-down menu (drop-down menu) s posuvným účinkom. V skutočnosti, musím byť úprimný, nie je len moja vlastná práca ... mojej práce, v skutočnosti je vlastne prepracovanie tohto pluginu , ktoré som možnosť optimalizovať a rozšíriť pridaním, v skutočnosti efekt sklíčka (odvíjanie).

Pozrime sa, ako implementovať drop down menu

Po prvé, samozrejme, musíme zahrnúť jQuery na našich webových stránkach: 

 



 <script type="text/javascript" src="jquery.js"> </ script>

Bez tohto musíme vytvoriť, v texte dokumentu (<body> ...</ body>), naše menu, ktoré sa skladá zo zoznamu s odrážkami, v ktorom existujú aj iné zoznamy (reprezentovať šľachy, ktorá je "rozbalil" hover na položku matka). Tu je ukážka kódu: 






 <ul id="mrwddm">



  



 <li> <a href="/"> easthamptonfireco1.com </ a> </ li>



  



 <li> <a href="#"> JavaScript </ a>



    



 <ul>



      



 <li> <a href="/javascript/guide/"> sprievodca </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> články </ a> </ li>



      



 <li> <a href="/javascript/faq/"> FAQ </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="#"> bibliu </ a>



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java applety </ a> </ li>



      



 <li> <a href="/script/javascript/"> JavaScript </ a> </ li>



      



 <li> <a href="/script/script-php/"> PHP </ a> </ li>



      



 <li> <a href="/script/script-aspnet/"> ASP.Net </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="http://forum.easthamptonfireco1.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.easthamptonfireco1.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.easthamptonfireco1.com/"> nástroje </ a> </ li>







 </ Ul>

Naša ponuka musí byť, samozrejme, zodpovedajúcim spôsobom štylizované. K tomu stačí pridať tieto riadky v súbore štýlov CSS: 






 ul # mrwddm {margin: 40px 20px 0px 0px; padding: 0px;}







 # Mrwddm ak {float: left; display: inline; list-style: none;}







 # Mrwddm je {display: block; padding: 3px 10px; rozpätie: 0px; text-decoration: none; white-space: nowrap, pozadia: # EEEEEE;}







 # Mrwddm je: hover {background: # CCCCCC, farba: # FFFFFF;}







 # Mrwddm je ul {min-width: 120px; okraj: 0px 0px 0px 3px; padding: 0px; position: absolute; z-index: 999; visibility: hidden; display: none;}







 # Mrwddm je ul ak {float: none; display: inline;}







 # Mrwddm je ul ak {padding: 5px 3px; pozadia: # EEEEEE, farba: # 666666;}







 # Mrwddm je ul ak: hover {background: # CCCCCC, farba: # FF6600}

V rovnakej kategórii ...
E-Learning
CSS (kurz) CSS (kurz)
Web Design a prístupnosti podľa W3C CSS a XHTML. Od 29 €.
HTML (kurz) HTML (kurz)
Značkovací jazyk pre web od 29 €.
JavaScript (kurz) JavaScript (kurz)
Kompletný sprievodca pre skriptovanie na strane klienta. Od 39 €.
Sponzorované odkazy