..


Sponzorirani linkovi

jQuery: padajući izbornik s kliznim učinkom

Članak je napisao Max Bossi
Stranica 1 od 2

U ovom kratkom članku ću predstaviti svoje jQuery plugin za stvaranje jednostavnih, ali lijepo, na padajućem izborniku (padajući izbornik) s kliznim učinak. U stvari, moram biti iskren, nije sve moj vlastiti rad ... moje djelo, u stvari, je zapravo prerada ovog dodatka da sam dopustio da poboljšate i proširiti dodavanjem, u stvari, utjecaj tobogani (odmotavanje).

Pogledajmo kako provesti padajući izbornik

Prvo, naravno, moramo uključiti jQuery u našu web stranicu: 

 



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

Bez toga moramo stvoriti, u dokumentu tijelu (<body> ...</ body>), naš izbornik, koji se sastoji od popis s grafičkim oznakama u kojem postoje i druge liste (koje predstavljaju tetive koja je "odmotaju role" Zadržite pokazivač na stavku majke). Ovdje je primjer koda: 






 <ul id="mrwddm">



  



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



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Vodič </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> članaka </ a> </ li>



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java appleti </ 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.carlindesbruyerescorrezienne.com/"> forum </ a> </ li>



  



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



  



 <li> <a href="http://tools.carlindesbruyerescorrezienne.com/"> Alati </ a> </ li>







 </ Ul>

Naš jelovnik mora biti, naravno, na odgovarajući način stilizirana. Da biste to učinili jednostavno dodajte ove retke u stilu list CSS kod: 






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







 # Mrwddm Li {float: left; prikaz: inline; popis stilu: none;}







 # Mrwddm ih {display: block; padding: 10px 3px, margin: 0px; text-decoration: none; bijeli prostor: nowrap, pozadina: # EEEEEE;}







 # Mrwddm ih: hover {background: # CCCCCC, boja: # FFFFFF;}







 # Mrwddm ih ul {min-width: 120px; margin: 0px 0px 0px 3px, padding: 0px; položaj: apsolutni, Z-indeks: 999; vidljivost: skriveni; display: none;}







 # Mrwddm ih ul li {float: none; prikaz: inline;}







 # Mrwddm ih ul li {padding: 5px 3px, pozadina: # EEEEEE, boja: # 666666;}







 # Mrwddm ih ul li a: hover {background: # CCCCCC, boja: # FF6600}

U istoj kategoriji ...
E-učenje
CSS (tečaj) CSS (tečaj)
Web dizajn i dostupnost u skladu s W3C CSS i XHTML. Počevši od 29 €.
HTML (tečaj) HTML (tečaj)
Označni jezik za web od 29 €.
Javascript (tečaj) Javascript (tečaj)
Kompletan vodič za client-side skriptiranje. Od 39 €.
Sponzorirani linkovi