..


Sponsoroidut linkit

jQuery: pudotusvalikosta liukumäellä vaikutus

Artikkelin kirjoittanut Max Bossi
Sivu 1 2

Tässä lyhyessä artikkelissa esittelen jQuery plugin luoda yksinkertainen, mutta mukava, pudotusvalikosta (pudotusvalikosta) liukumäellä vaikutus. Itse asiassa minun täytyy olla rehellinen, ei kaikki omaa työtäni ... työtäni, itse asiassa on oikeastaan ​​uudelleen muotoilua tämä plugin että olen saa optimoida ja laajentaa lisäämällä itse asiassa vaikutus diat (purkautuisi).

Katsotaanpa, miten toteuttaa pudotusvalikosta

Ensin tietysti meidän kuuluu jQuery in nettisivumme: 

 



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

Ilman tätä meidän on luotava, varsinaisessa dokumentissa (<body> ...</ body>), meidän menu, joka koostuu luettelomerkeillä jossa on muitakin listoja (eli jänne joka on "rullaamattomia" hover on kohteen äiti). Tässä on esimerkki koodi: 






 <ul id="mrwddm">



  



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



  



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



    



 <ul>



      



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



      



 <li> href="/javascript/articoli/"> Artikkelit </ a> </ li>



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



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



      



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



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



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



  



 <li> href="http://blog.deliveriesfirst.com/"> blogi </ a> </ li>



  



 <li> href="http://tools.deliveriesfirst.com/"> Tools </ a> </ li>







 </ Ul>

Meidän menu on tietenkin asianmukaisesti tyylitelty. Voit tehdä tämän yksinkertaisesti lisätä nämä rivit tyylisivun CSS-koodi: 






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







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







 # Mrwddm heille {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; white-space: nowrap background: # EEEEEE;}







 # Mrwddm heille: hover {background: # CCCCCC; color: # FFFFFF;}







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







 # Mrwddm ne ul li {float: none; display: inline;}







 # Mrwddm ne ul li {padding: 5px 3px background: # EEEEEE; color: # 666666;}







 # Mrwddm ne ul li: hover {background: # CCCCCC; väri: # FF6600}

Samassa luokassa ...
E-Learning
CSS (kurssi) CSS (kurssi)
Web Design and Accessibility mukaan W3C CSS ja XHTML. Alkaen 29 €.
HTML (kurssi) HTML (kurssi)
Merkkauskieli Web alkaen 29 €.
Javascript (kurssi) Javascript (kurssi)
Täydellinen opas client-side scripting. Alkaen 39 €.
Sponsoroidut linkit