JavaScript

Didactics

Download

jQuery: a drop down menu with slide effect

Home > JavaScript > Articles > jQuery: a drop down menu with slide effect

Article written by Max Bossi
Page 1 of 2

In this short article I present my jQuery plugin to create a simple, but nice, drop-down menu (drop-down menu) with slide effect. In fact, I must be honest, is not all my own work ... my work, in fact, is actually a reworking of this plugin that I'm allowed to optimize and expand by adding, in fact, the effect slides (unwinding).

Let's see how to implement the drop down menu

First, of course, we need to include jQuery in our web page:

 



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

Without this we must create, in the document body (<body> ...</ body>), our menu which is composed of a bulleted list in which there are other lists (representing the tendon that is "unrolled" Hover on the item mother). Here is a sample code:






 <ul id="mrwddm">



  



 <li> <a href="/"> centre-equestre-lepuy.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> <a href="#"> scripture </ 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.centre-equestre-lepuy.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.centre-equestre-lepuy.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.centre-equestre-lepuy.com/"> Tools </ a> </ li>







 </ Ul>

Our menu has to be, of course, appropriately stylized. To do this simply add these lines in the style sheet CSS code:






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







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







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







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







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







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







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







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

In the same category ...

E-Learning

	CSS (Course) Web Design and Accessibility according to W3C CSS and XHTML. Starting from 29 €.
	HTML (Course) The markup language for the Web from 29 €.
	Javascript (Course) Complete guide to client-side scripting. From 39 €.