..


Sponzorované odkazy

jQuery: rozbalovací menu s slide efekt

Článek napsal Max Bossi
Strana 1 z 2

V tomto krátkém článku vám představit svou jQuery plugin pro vytvoření jednoduché, ale pěkné, drop-down menu (drop-down menu) s posuvným účinkem. Ve skutečnosti, musím být upřímný, není jen moje vlastní práce ... mé práce, ve skutečnosti je vlastně přepracování tohoto pluginu , které jsem možnost optimalizovat a rozšířit přidáním, ve skutečnosti efekt sklíčka (odvíjení).

Pojďme se podívat, jak provádět drop down menu

Za prvé, samozřejmě, jsme zařadili jQuery na našich webových stránkách: 

 



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

Bez tohoto musíme vytvořit, v textu dokumentu (<body> ...</ body>), naše menu, které se skládá ze seznamu s odrážkami, ve kterém existují i jiné seznamy (reprezentovat šlachy, která je "rozbalil" Hover na položku matka). Zde je ukázka kódu: 






 <ul id="mrwddm">



  



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



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> průvodce </ a> </ li>



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="#"> bibli </ 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.bradleyshamburgers.com/"> Forum </ a> </ li>



  



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



  



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







 </ Ul>

Naše nabídka musí být, samozřejmě, odpovídajícím způsobem stylizované. K tomu stačí přidat tyto řádky v souboru stylů CSS: 






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







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







 # Mrwddm je {display: block; padding: 3px 10px; rozpětí: 0px; text-decoration: none; white-space: nowrap, pozadí: # EEEEEE;}







 # Mrwddm je: hover {background: # CCCCCC, barva: # 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 li {float: none; display: inline;}







 # Mrwddm je ul li {padding: 5px 3px; pozadí: # EEEEEE, barva: # 666666;}







 # Mrwddm je ul li: hover {background: # CCCCCC, barva: # FF6600}

Ve stejné kategorii ...
E-Learning
CSS (kurz) CSS (kurz)
Web Design a přístupnosti podle W3C CSS a XHTML. Od 29 €.
HTML (kurz) HTML (kurz)
Značkovací jazyk pro web od 29 €.
JavaScript (kurz) JavaScript (kurz)
Kompletní průvodce pro skriptování na straně klienta. Od 39 €.
Sponzorované odkazy