Download slidedown menu

Demo | Demo 2

Download

Download Slide down menu

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Configuration

Define menu items

The menu is based on an unordered list, so the only thing you have to do is to build this. Look how it is done in the demo for help.

Configure layout

The layout for the main-, and submenu items is specified in the CSS. Look at the comments in the CSS for further information.

Initially show a group of sub menu items

You can automatically expand/show a group of sub menu items. This is done by setting the Javascript variable expandFirstItemAutomatically to the index of the main menu item you want to expand(example:
var expandFirstItemAutomatically=1; to initially expand the first group of sub items.

You may also specify which submenu to expand in your URL. Example: <a href="http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html?mainMenuItemToSlide=2"> will initially expand the second main menu item. Here, I have added ?mainMenuItemToSlide=2 to the URL.

You may also expand sub menu items automatically by specifying an id. This works as follow:

• Give one of your menu items an id. Example:
  <li id="initialExpandedMenuItem"><a href="#">Download</a></li>
• Specify the id of this menu item in a Javascript variable at the top of the <script> section. Example:
  var initMenuIdToExpand = 'initialExpandedMenuItem';

Differences in demo 2

There are just a few differences between demo 1 and demo 2.

First of all, I have made some changes to the CSS in demo 2. Some color attributes has been added to main menu items and sub menu items has been center aligned:

#dhtmlgoodies_slidedown_menu{    

  visibility:hidden;
  border:1px solid #000;
  padding:1px;

  width: 182px;  /* IE 5.x */
  width/* */:/**/182px;  /* Other browsers */
  width: /**/182px;  
  
}
...
...
...
...
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{  /* Main menu items */
  margin-top:1px;
  font-weight:bold;
  background-color:#317082;
  color:#FFF;
  background-image:url('images/bg.gif');
  height:30px;
  line-height:30px;
  vertical-align:middle;
  padding-left:10px;
  border-left:1px solid #000;
  border-right:1px solid #000;
}  
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{  /* Sub menu items */
  margin-top:1px;
  text-align:center;
  font-weight:bold;
}

I have also added images to sub menu items(in the HTML code). Example:

<a href="http://www.dhtmlgoodies.com">
<img src="images/mail.gif"><br>
Menu item 2</a>

Comments

1 2 3 4 5

gud job

maninder singh at 07:23AM, 2011/02/25.

Admin comment

1 2 3 4 5

Ok, I assume you have an iframe or using frames.For testing, try to use onmouseup instead of onclick. Does that work ?

DHTMLGoodies at 12:55PM, 2011/03/02.

1 2 3 4 5

Hi,

yes using the onmouseup event works ok.

Thanks,

Nigel

Nigel at 01:00PM, 2011/03/02.

1 2 3 4 5

Hi - Your code is very useful. Thank you. Can you tell me what I would change in css so that when page loads, none of the dropdown menus are displayed. When I view your "Demo" page, your Products dropdown menu is already displayed and I need that to default "closed". Thanks.

Loretta at 06:30PM, 2011/03/23.

1 2 3 4 5

I have a little problem in IE, here the menu doesn't slide down. I can only see the 'main' menu. Is there a fix for this or not?Thx

Crissie at 12:12PM, 2011/03/24.

1 2 3 4 5

Hi,Is it possible to collapse menu items by clicking any links out of slide menu?Thanks

milan at 09:30PM, 2011/04/03.

1 2 3 4 5

Searched a lot of time for this. Gone true the hell of jquery but never worked.Perfect!!Is there a way to make this work like an accordion? If you press one collapsing menueitem again - then the content should close.Best,Andreas

Andreas at 12:46AM, 2011/04/18.

1 2 3 4 5

is there a way to make the manu close back when you click it again!?

Dany at 10:55AM, 2011/05/01.

1 2 3 4 5

Need help.How to display ".slMenuItem_depth2" links, as active-items?Just working permanently for depth1-links by using class ".dhtmlgoodies_activeItem". Active status in depth2 just shows up temporary by clicking.Any ideas?

Scolex at 01:47PM, 2011/07/07.

1 2 3 4 5

Hi,very good script, I tried it to use in my HP. With #-links does it work very well in your Demo. But when I usereal links to other pages in my site, there is no slide-up effect, because when the new page is loaded, the wholemenu will be new initialised. What I am doing wrong?Is there any other solution except frames or iframes, because these I want to avoid for the future?Thank you in advance for an answerMichael

Michael at 11:25AM, 2011/07/12.

1 2 3 4 5

Hello!Question: --------------is it possible to implement a "dhtmlgoodies_activeItem" class for each "level" of the navigation-tree? At the Moment the "activeItem" design at the first level of the tree will disappear when the "activeItem" changes to an sub-level Item.I try to explain it a little bit better:I want it like:menupoint 1 (first-level selected css)|--sublevel-item 1 |--sublevel-item 2 (sub-level selected css)menupoint 2menupoint 3Menupoint 1 and sublevel-item 2 should be marked as "selected" (with differend css styles) at the same time... is this possible?And if it is - how can I do that? :) Thank you very much! :)And sorry or my bad english. :)

WebGuy at 11:03AM, 2011/07/22.

1 2 3 4 5

I am very thankful for this script, it was just what I needed to navigate my online catalogue page for a very large MySQL database of parts.There are only a couple things I wish I could do with this...- I would like to be able to toggle expand/contract of a parent menu item on click.- I would like to make 2 links up the top of the menu, "expand all" & "contract all".are these two options possible?

Tim at 06:56AM, 2011/07/26.

1 2 3 4 5

Hi. I would like the menu to slide open slower. Can't find anything in the .js that relates to speed.Kind regardsWilliam

William at 02:56PM, 2011/08/10.

1 2 3 4 5

I proced a similar jquery menu but dosn't working :(http://www.laboitedigitale.com"

La Boite Digitale at 02:24PM, 2011/08/15.

1 2 3 4 5

Hello,Great script. But I have one question. menu1|--submenu1|--submenu2menu2|--submenu1|--submenu2menu3 (no sub menus)I click on menu1, it opens its submenus. Then I click menu2, it closes submenus of menu1 and opens its submenus. But if I click on menu3, submenus of menu1 are not closed. Is it possible to do that with your script?Thanx.//Theodor

Theodor at 08:14PM, 2011/08/17.

1 2 3 4 5

how to highlite menu item when going over it with the mouse cursor, ie. hover?

joe at 11:49AM, 2011/08/23.

1 2 3 4 5

if you want, when loading page, to expand the menu to a menu item using URL: yourpage.html?initMenuIdToExpand=id

where id is the id of your list item, copy and paste this code at the end of the .js file(before "if(initMenuIdToExpand)"):

if(location.search.indexOf('initMenuIdToExpand')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('initMenuIdToExpand')>=0){
var values = items[no].split('=');
//alert(values[1]);
initMenuIdToExpand = values[1];
}}}

dicentiu at 04:15PM, 2011/09/22.

1 2 3 4 5

This code is really cool!The only problem is that is it possible to have a different image when the mouse is hovering over the folders and items? So it looks more fancier?

freddymcdary at 09:17AM, 2011/11/13.

1 2 3 4 5

Awesome script. First time posting here. I was trying to add a sub-menu to one of the sub-menus by adding a <ul></ul>underneath one of the <li></li> but the menu won't open another menu underneath. Is there any way to fix that? I'm not familiar with javascript so i'm kind of scared to mess with the code.

Dany at 05:53PM, 2011/11/15.

1 2 3 4 5

very useful. question: Is it posible to have more then one menu per page?

quark at 05:29PM, 2011/12/09.

1 2 3 4 5

It looks te be a great script.
However it works only to external links.
It does not do anything to internal links. I use frames.
Any idea?
Thanks

Francis at 11:15AM, 2011/12/31.

1 2 3 4 5

Hi. Thanks for the neat code. My menu works perfectly in Mozilla but does not expand in IE 9. My site is here: www.eyefly.co.za Your demo works in IE9, so I must be doing something wrong. Thanks for the help!

Pieter at 03:02PM, 2012/01/16.

1 2 3 4 5

Ok, stupid question, but I have can't seem to find where you have the code for defining the first part of the menu is automatically revealed... That is to say, I would like to have my menu start as completely closed, and force users to click on a link that is defined as ".slMenuItem_depth1{" - am I missing something?

FEsmitty77 at 09:06PM, 2012/05/10.

1 2 3 4 5

I have a nav list that has about 12 main menu items, and the script seems to stop working after the 9th item, through firebug it looks like it isn't posting the mainMenuItem10 through 12. Is this something that can be fixed somewhere that I am not seeing?

Craig at 02:17PM, 2012/06/07.

1 2 3 4 5

hello, is there a way this slide down menu be made without javascript?

Tom at 12:01PM, 2012/08/18.

1 2 3 4 5

Hello,Thanks for the script, it works perfect to me! I've got one question:I want the menu to be closed when I go to html://www.hofvaneede.be and the menu may only open when I click on 'PRODUCTIES'.Can someone help me out? I'm almost going to kill myself! :-)Thanks in advance,Sara

Sara at 02:52PM, 2012/11/04.

Admin comment

1 2 3 4 5

Sara,

Perhaps you can call the showSubMenu function manually from your PRODUCTIES page:

Example:

showSubMenu(false, document.getElementById('mainMenuItem1'));


where "mainMenuItem1" refers to

PRODUCTIES
...

Alf

DHTMLGoodies at 06:57PM, 2012/11/05.

1 2 3 4 5

See the below. You can only get the menu and submenus to close when you click refresh page..any way to close items back to original state? You haven't answered a question since 1 year ago.. good script by the way.Dany wrote:is there a way to make the manu close back when you click it again!?Hello,I'm interested too.Is there anywhere in this code to check if Slide is down or up in order to call the right function (scrollUpMenu/showSubMenu).Thanks a lot, and good job for what you've already done !

Joe Priser at 05:18PM, 2012/11/16.

1 2 3 4 5

Hi Alf,Your dropdown menu is pretty good and easily configured but as i see above,there is one problem, when you click the parent <li> the menu drops but when you click the same parent <li> again, nothing happens.there must be an easy fix to pull the menu back up.hope you can helpLee

lee bennett at 09:55AM, 2012/12/11.

1 2 3 4 5

Hi! Thank you for your script! It is very useful. But I saw one issue - when I set in function scrollDownSub() the setting to force scrolling down submenus quite slow - there is possibility to click an item in a submenu faster then whole submenu finishes to scroll down and it this situation submenu won't scroll down to the last item - it stops. Is it possible to fix that kind of problem? (I set parameter =Math.min to "1" to slow down scrolling). I was trying to change some settings in the script but with no succes.

MArio at 09:53PM, 2013/02/01.

1 2 3 4 5

Thanks for your script. But I have one question. menu1|--submenu1|--submenu2 |--subsubmenu21 |--subsubmenu22|--submenu3|--submenu4menu2|--submenu1|--submenu2How can expand sub sub menu items automatically for submenu2 not menu1 ?I use this statement showSubMenu(false,document.getElementById('mainMenuItem1'));therefore expand Level one but i need level 2 !

Laith at 12:14PM, 2015/02/25.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 17:17, 04-24-2024.