Dynamic Drive CSS Library- jQuery Drop Line Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

jQuery Drop Line Menu

Author: Dynamic Drive

This menu turns a nested UL list into a horizontal drop line menu, with each sub menu appearing as a single row of links beneath its parent menu. To polish it up, the menu uses a touch of jQuery magic to apply a nice slide down effect to each sub menu as it is revealed.

Demo:

Important: Make sure your page contains a valid doctype for this menu to render properly.

The external files: The menu requires the following support files, which you should upload by default all to the same directory as your page itself:

droplinebar.css (inside this file, confirm the paths to the two blue gradient images below)
droplinemenu.js (inside this file, confirm the path to the arrow image below)

The CSS/ JavaScript: The below code should be added to the HEAD section of your page:

<link rel="stylesheet" type="text/css" href="droplinebar.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")

</script>

The HTML:

<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
  <ul>
  <li><a href="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a>
	  <ul>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  </ul>
	</li>
  <li><a href="#">Activities 4</a></li>
  </ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
  <ul>
  <li><a href="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a>
	  <ul>
	  <li><a href="#">Africa 1</a></li>
	  <li><a href="#">Africa 2</a></li>
	  <li><a href="#">Africa 3</a></li>
	  <li><a href="#">Africa 4</a>
		  <ul>
		  <li><a href="#">Kenya 1</a></li>
		  <li><a href="#">Kenya 2</a></li>
		  <li><a href="#">Kenya 3</a></li>
		  <li><a href="#">Kenya 4</a></li>
		  <li><a href="#">Kenya 5</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 06/13/2009

Revision History: None

Usage Terms: Click here

Your Comments (11)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 2 pages 1 2 >

I copied/pasted the code on my page. However, I don't get the arrow image ( for e.g the one besides the 'CSS Examples'. How do I fix that?
Newbie, so please help.

Thank you very much

Posted by tesg on 06/15, 08:58 AM

Very nice use of nested lists! This is one of the most simple drop down scripts I've seen in a while!

Posted by Ted Goas on 06/15, 11:03 AM

tesg, inside the .js file, make sure "down.gif" correctly points to where your arrow image is on your server. Change it to an absolute URL if needed.

Posted by ddadmin on 06/15, 12:25 PM

I download the code and the submenus are way to the right, how do i fix that?

Posted by mc on 06/16, 11:35 AM

Hi DD, Additional to my last message, I have installed the code and it works fine, nice and very simple.

My question is, how can I make all the menus and sub-menus to appear centered in the web page?

Here in your demo they appear positioned to the left, please help me modify the CSS to do this, I tried to do it but no success.
Regards.

Posted by Limes on 06/16, 01:01 PM

Please help me center the menu, I'm really stuck in this. Thanks in advance

Posted by Limes on 06/20, 09:57 AM

Works Great without Problem in all Browsers as tested. Limes could maybe make a workaround with a div-container wrapped around everything positioned absolute to get the desired centering effect.

Posted by Alex on 06/21, 08:53 AM

Works great, nice styling element for sites where there ist not to much space for big graphics to be displayed, for example on mobile browsers.

Posted by SEO on 06/22, 09:54 AM

I like this type of menu very much, but do have a very serious problem in the handling.
Everytime I leave a menu button faster than the time defined in droplinemenu.animateduration.out and leave the device pointer within the space for the submenu it comes to a poor echo effect that opens and closes the submenu in a loop.

Does someone has an idea to avoid this?

Posted by Jari on 06/30, 06:56 AM

Hello, I put the Menu in a div tag, but when I pass over a link the submenu appears far away from the principal menu.

Does anyone know how to solve this?
thanks

Posted by Lenin on 07/02, 07:19 AM

Comment Pages 1 of 2 pages 1 2 >

Commenting is not available in this weblog entry.