New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download slidedown menu

Demo | Demo 2

Bookmark and Share

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

maninder singh
gud job
maninder singh at 07:23AM, 2011/02/25.
Nigel
The script works with an href but doesn't work with onclick.

I have a div (consult_body) that I want to change the text in when the user clicks, my code is:

< li >< a href="#" onclick="document.getElementById('consult_body').src='newtext.html'";>Menu item here< /a>< /li>


This reads text from newtext.html to populate the div but the onclick doesn't fire.

Any ideas on a solution?

Nigel
Nigel at 08:02AM, 2011/03/02.
Admin comment
DHTMLGoodies
Nigel,The Codedocument.getElementById('consult_body').src='newtext.html'will not work. What you need is the magic word Ajax. Ajax can be used to load content from the server and insert it into elements.Here's an example with the mootools library(freely available at mootools.net)< li >< a href="#" onclick="var el = $('consult_body');el.set('load', {evalScripts: true}); el.load('newtext.html');">Menu item here< /a>< /li>Mootools documentation for this:http://mootools.net/docs/core/Request/Request.HTML#Element-Properties:loadMootools download page:http://mootools.net/download
DHTMLGoodies at 10:44AM, 2011/03/02.
Nigel
Hi,
thanks for the reply. The problem appears to be that the onclick event isn't being fired. I don't have a problem with the code

document.getElementById('consult_body').src='newtext.html'

In the following code fragment it works perfectly:
< div>
< ul>
< li>< a href="#" onclick=javascript:alert("click1");>Text 1

    < li>< a href="#" onclick=javascript:alert("click2");>Text 2

< /ul>
< /div>


It only stops working when I use the same list code wrapped in the < div id="dhtmlgoodies_slidedown_menu">
div.

< div id="dhtmlgoodies_slidedown_menu">
< ul>
< li>< a href="#" onclick=javascript:alert("click1");>Text 1

    < li>< a href="#" onclick=javascript:alert("click2");>Text 2

< /ul>
< /div>

doesn't work.

Nigel
Nigel at 12:21PM, 2011/03/02.
Admin comment
DHTMLGoodies
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.
Nigel
Hi,

yes using the onmouseup event works ok.

Thanks,

Nigel
Nigel at 01:00PM, 2011/03/02.
Loretta
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.
Crissie
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.
Admin comment
DHTMLGoodies
Loretta,Try setting all these three options to false:var expandFirstItemAutomatically = false;var initMenuIdToExpand = false;var expandMenuItemByUrl = false;at the top of the js codeCrissie ,I will probably have to see your code in order to give you an exact answer, but my guess is that you may have a problem with your HTML. Make sure that* all tags are properly closed:<li><a href="http://www.dhtmlgoodies.com">Norway</a></li>and not<li><a href="http://www.dhtmlgoodies.com">Norway</a>* all tags are properly nested:<li><a href="#">Locations</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Norway</a></li> <li><a href="http://www.dhtmlgoodies.com">United States</a></li> </ul></li>and not<li><a href="#">Locations</a></li> <ul> <li><a href="http://www.dhtmlgoodies.com">Norway</a></li> <li><a href="http://www.dhtmlgoodies.com">United States</a></li> </ul>
DHTMLGoodies at 12:24PM, 2011/03/24.
milan
Hi,Is it possible to collapse menu items by clicking any links out of slide menu?Thanks
milan at 09:30PM, 2011/04/03.
KB
I'm having issues with this menu. I've tried lots of different combinations of using "id="initialExpandedMenuItem" and can not get it to work consistently. It seems to get stuck with the #. The urls will have .html# in the browser window and this is when the functionality seems to act up. The lists will not open when the hashmark is in the browser url bar. I'm especially curious whats wrong with my code, because yours has the # sign and still works.For example one try at using this menu can be reviewed here Thank you for your assistance.
KB at 06:07PM, 2011/04/04.
Andreas
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.
Dany
is there a way to make the manu close back when you click it again!?
Dany at 10:55AM, 2011/05/01.
Edensource
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 !
Edensource at 08:19AM, 2011/06/22.
Scolex
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.
Michael
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.
WebGuy
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.
Tim
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.
William
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.
La Boite Digitale
Hi,I proced a similar jquery menu but dosn't working :(<a href="http://www.laboitedigitale.com/creation-site-internet.php">.</a>
La Boite Digitale at 02:22PM, 2011/08/15.
La Boite Digitale
I proced a similar jquery menu but dosn't working :(http://www.laboitedigitale.com"
La Boite Digitale at 02:24PM, 2011/08/15.
Theodor
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.
joe
how to highlite menu item when going over it with the mouse cursor, ie. hover?
joe at 11:49AM, 2011/08/23.
dicentiu
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.
freddymcdary
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.
Dany
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.
quark
very useful. question: Is it posible to have more then one menu per page?
quark at 05:29PM, 2011/12/09.
Francis
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.
Pieter
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.
FEsmitty77
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.
Craig
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.
Tom
hello, is there a way this slide down menu be made without javascript?
Tom at 12:01PM, 2012/08/18.
Sara
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
DHTMLGoodies
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.
Joe Priser
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.
lee bennett
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.
MArio
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.
Laith
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

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com