..


Gesponsorde links

jQuery: een drop down menu met glijbaan effect

Artikel geschreven door Max Bossi
Pagina 1 van 2

In dit korte artikel presenteer ik mijn jQuery plugin om een eenvoudige, maar mooie, drop-down menu (drop down menu) te creëren met glijbaan effect. Sterker nog, ik moet eerlijk zijn, is niet al mijn eigen werk ... mijn werk, in feite, is eigenlijk een bewerking van deze plugin , dat mag ik voor het optimaliseren en uit te breiden met, in feite het effect slides (afwikkeling).

Laten we eens zien hoe het drop down menu te voeren

De eerste, natuurlijk, moeten we jQuery in onze webpagina onder andere: 

 



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

Zonder deze moeten we maken in het document lichaam (<body> ...</ body>), onze menu dat bestaat uit een lijst met opsommingstekens waarin er andere lijsten (die de pees die "ontrold" Ga met je muis het item moeder). Hier is een voorbeeld van de code: 






 <ul id="mrwddm">



  



 <li> <a href="/"> decoup-og-31.com </ a> </ li>



  



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



    



 <ul>



      



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



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java Applets </ 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.decoup-og-31.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.decoup-og-31.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.decoup-og-31.com/"> Hulpprogramma's </ a> </ li>







 </ Ul>

Ons menu moet, uiteraard, de juiste gestileerd. Om dit te doen voegt u deze regels in de style sheet CSS-code: 






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







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







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







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







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







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







 # Mrwddm hen ul li a {padding: 5px 3px; background: # eeeeee; color: # 666666;}







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

In dezelfde categorie ...
E-Learning
CSS (Cursus) CSS (Cursus)
Web Design en toegankelijkheid volgens de W3C CSS en XHTML. Vanaf 29 €.
HTML (Cursus) HTML (Cursus)
De opmaaktaal voor het web vanaf 29 €.
JavaScript (Cursus) JavaScript (Cursus)
Complete gids voor client-side scripting. Vanaf 39 €.
Gesponsorde links