..


Sponsorētās saites

jQuery: nolaižamajā izvēlnē ar slaidu efektu

Raksts raksta Max Bossi
Lapa 1 no 2

Šajā īsajā rakstā es klāt mana jQuery spraudnis, lai radītu vienkāršu, bet jauka, drop-down menu (drop-down izvēlnes) ar slaidu efektu. Patiesībā, man ir godīgi, nav visu manu darbu ... mans darbs, faktiski, ir faktiski pārstrādājot šis spraudnis, ka es esmu ļāva optimizēt un paplašināt, pievienojot, patiesībā, efekts slaidiem (neapzināts).

Let 's redzēt, kā īstenot nolaižamo izvēlni

Pirmkārt, protams, mums ir nepieciešams iekļaut jQuery mūsu mājas lapu: 

 



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

Bez šīs mums ir jārada, dokumentā organismā (<body> ...</ body>), mūsu izvēlni, kas sastāv no aizzīmju sarakstu, kurā ir arī citi saraksti (pārstāv cīpsla, kas ir "attinot" Hover uz posteni māte). Šeit ir parauga kods: 






 <ul id="mrwddm">



  



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



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> rokasgrāmatu </ a> </ li>



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java sīklietotnes </ 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.celebrity2nds.com/"> forums </ a> </ li>



  



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



  



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







 </ Ul>

Mūsu ēdienkarte ir, protams, attiecīgi stilizēti. Lai to izdarītu vienkārši pievienot šajās līnijās, stila lapas CSS kodu: 






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







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







 # Mrwddm viņiem {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; baltu telpas: nowrap; background: # EEEEEE;}







 # Mrwddm viņiem: hover {background: # CCCCCC; color: # FFFFFF;}







 # Mrwddm viņiem ul {min-platums: 120px; margin: 3px 0px 0px 0px; padding: 0px; position: absolūtas; z-index: 999; redzamība: slēptās; display: none;}







 # Mrwddm viņiem ul li {float: none; displejs: inline;}







 # Mrwddm viņiem ul li {padding: 5px 3px; background: # EEEEEE; color: # 666.666;}







 # Mrwddm viņiem ul li a: hover {background: # CCCCCC; color: # FF6600}

Šajā pašā kategorijā ...
E-Learning
CSS (Kurss) CSS (Kurss)
Web Dizains un pieejamība saskaņā ar W3C CSS un XHTML. Sākot ar 29 €.
HTML (Kurss) HTML (Kurss)
Iezīmēšanas valodu Web no € 29.
Javascript (Kurss) Javascript (Kurss)
Pilnīga rokasgrāmata, lai klienta puses skriptu. Sākot no € 39.
Sponsorētās saites