jQuery: un menu déroulant avec effet slide

Dans ce court article, je présente mon plugin jQuery pour créer un simple, mais agréable, le menu déroulant (menu déroulant) avec effet slide. En fait, je dois être honnête, pas tout mon sort ... mon travail, en fait, est en fait une refonte de ce plugin que je suis autorisé à optimiser et étendre en ajoutant, en fait, les diapositives effet (déroulement).

Voyons comment mettre en œuvre dans le menu déroulant

D'abord, bien sûr, nous devons inclure jQuery dans notre page web:

 



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

 

Sans cela, nous devons créer, dans le corps du document (corps ...</ body>), notre menu qui se compose d'une liste à puces dans lequel il ya d'autres listes (représentant le tendon qui est "déroulé" Hover sur la mère élément). Voici un exemple de code:

 <ul id="mrwddm">



  



 <li> <a href="/"> brasserie-lechantilly.com </ a> </ li>



  



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



    



 <ul>



      



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



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



 <li> href="#"> Écriture </ a>



    



 <ul>



      



 <li> <a href="/script/applet-java/"> applets 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.brasserie-lechantilly.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.brasserie-lechantilly.com/"> blog </ a> </ li>



  



 <li> <a href="http://tools.brasserie-lechantilly.com/"> Outils </ a> </ li>







 </ Ul>

Notre menu doit être, bien sûr, de façon appropriée stylisée. Pour ce faire il suffit d'ajouter ces lignes dans le code de feuille de style CSS:

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







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







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







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







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







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







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







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

• <<
• 1
• 2
• >>