..


Link-uri sponsorizate

jQuery: un meniu vertical cu efect de diapozitive

Articol scris de Max Bossi
Pagina 1 din 2

În acest scurt articol voi prezenta mea plugin jQuery pentru a crea un simplu, dar drop-down frumos, meniu (meniul drop-down), cu efect de diapozitiv. De fapt, eu trebuie să fiu sincer, nu este toată munca mea proprie ... munca mea, de fapt, este de fapt o refacere a acestui plugin pe care eu am voie pentru a optimiza şi de a extinde prin adăugarea, de fapt, diapozitivele efectul (relaxare).

Să vedem cum să pună în aplicare meniul vertical

În primul rând, desigur, avem nevoie de a include în jQuery pagina noastra web: 

 



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

Fără aceasta noi trebuie să creeze, în corpul documentului (...</ organism <body>>), meniul nostru, care este compus dintr-o listă cu marcatori în care există alte liste (reprezentând tendonul care este "derulat" Hover pe mama articol). Aici este o mostră de cod: 






 <ul id="mrwddm">



  



 <li> <a href="/"> ecuries-du-fourneau.com </ a> </ li>



  



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



    



 <ul>



      



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



      



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



      



 <li> <a href="/javascript/faq/"> întrebări frecvente </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Appleturi Java </ 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.ecuries-du-fourneau.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.ecuries-du-fourneau.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.ecuries-du-fourneau.com/"> Instrumente </ a> </ li>







 </ Ul>

Meniul nostru trebuie să fie, desigur, în mod corespunzător stilizate. Pentru a face acest lucru pur şi simplu adăugaţi aceste linii in stilul codul de foaie de CSS: 






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







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







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







 # Mrwddm le-a: hover {background: # CCCCCC; color: # FFFFFF;}







 # Mrwddm le-ul {min-width: 120px; margin: 0px 0px 0px 3px; padding: 0px; position: absolute; z-index: 999; vizibilitate: ascunse; display: none;}







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







 # Mrwddm le-ul li un {padding: 3px 5pixeli; fundal: # EEEEEE; color: # 666666;}







 # Mrwddm le-ul li a: hover {background: # CCCCCC; color: # FF6600}

În aceeaşi categorie ...
E-Learning
CSS (Curs) CSS (Curs)
Web Design şi accesibilitatea în conformitate cu W3C CSS si XHTML. Incepand de la 29 €.
HTML (Curs) HTML (Curs)
Limbajul de marcare pentru Web de la 29 €.
Javascript (Curs) Javascript (Curs)
Ghid complet pentru client-side scripting. De la 39 €.
Link-uri sponsorizate