Download list based DHTML menu

Demo | Demo by Moderator Chris

Bookmark and Share

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.

Use a strict or loose doctype

This menu requires a valid doctype in order to look good in Opera. You can either choose the strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or a loose doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Choose the one that makes your page look best across different browsers. The doctype tag should be placed on the first line of your HTML file.

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

This menu is completely list based. It means that you build the menu by creating a <UL><LI> list. This is how the menu code could look like:
<div id="dhtmlgoodies_menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a>
      
      <ul>
        <li><a href="#">Sub item 1</a></li>
        <li><a href="#">This is a sub</a></li>
        <li><a href="#">Sub item 3</a>
          <ul>
            <li><a href="#">Sub item 3.1</a></li>
            <li><a href="#">Sub item 3.2</a>
              <ul>
                <li><a href="#">Sub item 3.2.1</a></li>
                <li><a href="#">Sub item 3.2.2</a></li>
                <li><a href="#">Sub item 3.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub item 3.3</a></li>
          </ul>
        </li>
        <li><a href="#">Sub item 4</a></li>
        <li><a href="#">Sub item 5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 3</a>
      <ul>
        <li><a href="#">Sub item 3.1</a></li>
        <li><a href="#">Sub item 3.2</a></li>
        <li><a href="#">Sub item 3.3</a></li>
        <li><a href="#">Sub item 3.4</a></li>
      </ul>  
    </li>
    <li><a href="#">Menu item 4</a>
    <li><a href="#">Menu item 5</a>
  </ul>
  </div>

Note that:

  • You need the <div id="dhtmlgoodies_menu"> as parent element of the unordered list
  • Each menu item should have this structure: <LI><A>...</A></LI>. I.e: A list item followed by an anchor tag. Use an empty href if you don't want a link on the menu item.

Adding styles to the menu

You use CSS(Cascading Style Sheet) to configure how the menu should look like. Example:
#dhtmlgoodies_menu ul.menuBlock1{  /* Menu bar - main menu items */
  border:0px;
  padding:3px;
  border:1px solid #317082;
  background-color:#E2EBED;
}
#dhtmlgoodies_menu ul.menuBlock2{  /* Menu bar - sub menu depth 1 */
  border:0px;
  padding:3px;
  border:1px solid #555;
}

The classes menuBlock1,menuBlock2 ... are used to apply styles to a group of menu items. Example: menuBlock1 specifies general styles for the group of main menu items(the <UL> tag), while menuBlock2 applies to all sub elements that are direct children of a main menu item.

There are some different classes for the specific menu items. Here's an example of this:
#dhtmlgoodies_menu .currentDepth1{
  padding-right:10px;
}
#dhtmlgoodies_menu .currentDepth1over{
  padding-right:10px;
  background-color:#317082;
  
}
#dhtmlgoodies_menu .currentDepth1over a{  /* Text rules */
  color:#FFF;
}

.currentDepth1 specifies a style for all main menu items(the <LI> tags). .currentDepth1over specifies rollover effects for all main menu items. .currentDepth1over a specifies rollover effects for main menu items(Text effects).

Download arrow

There's one image used in this script. That's the arrow indicating sub menu items. To download it, right click on the image below and select "Save target As". Put the image in a sub folder called images.

Javascript variables

There are two javascript variables which you could modify as you need. The first one specifies path to the arrow image:
var dhtmlgoodies_menu_arrow = 'images/arrow.gif';

The second one:
var timeBeforeAutoHide = 2000;
specifies how long the script should wait before it hides active menu items after the mouse cursor has moved away from the menu. The time is specified in microseconds(2000 = 2 seconds).

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Comments

Alexandre
ola pessoal... sou novo aqui.., gostariia de de um menu retratl colocando uma categoria dentro da subcategoria...pretendo mudar assim...:--2010---janeito------18jan------20jan---fevereiro--2011só que qundo clico em "2010" abre-se a sub categoria "janeiro" e ja fica aberta os dias tb...gostaria de quando eu clicasse em 2010 apenas abrisse as sub-categorias de 2010 e os dias so abrissem qundo eu clicasse no mes..e outra coisa que eu gstaria de colocar.., é que quando se clicasse em 2011 se fechasse as subcategorias de 2010,ja fiz varias alterações e nao ta dando certo.Obrigado.
Alexandre at 10:45PM, 2011/02/20.
Adam Arias
hellohow can i make this menu opens to side up?
Adam Arias at 09:03AM, 2011/03/13.
Rigwald
I'm having problems placing two copies of this menu on the same page. I am using the menu to select assignments that my students can download. I have a teacher's resource page that has that same menu (which has been working) and under it I have attempted to use the same script, but with links to my powerpoints and notes (for special ed teachers to access on a password protected page). I can get the first menu to show, but the second doesn't appear at all. In Dreamweaver it is positioned right and appears good to go, but in application, the 2nd menu isn't there.

I have a post about it on the webdevforums (with password to access the problem page):

http://www.webdevforums.com/showthread.php?43543-Duplicating-a-dropdown-menu-on-the-same-page

In desperation, I just duplicated the code and changed all the tags to "2" (dhtmlgoodies_menu2, mainContainer2, etc...). In that attempt, I have lost both menus. :-(

Any thoughts? I don't know scripting and this script is a great asset for my class website. I am thankful to be able to use it, but the current problem is beyond me. :-(
Rigwald at 12:12AM, 2011/03/18.
Anthony Sariti
Any idea how to center the buttons on the navigation bar? I have customized the menu perfectly for my page with 7 main picks but the last button has a much wider space to its right than the first button. The first button looks indented about 5px or so while the last pick is about 50px or so indented from the right=hand edge.Seems like a simple fix, but I cannot find the part of the style that seems to do this.Thanks for any ideas.Tony
Anthony Sariti at 10:30AM, 2011/05/09.
Admin comment
DHTMLGoodies
Anthony,Have you tried modifying this css:#dhtmlgoodies_menu .currentDepth1 a { font-weight: bold;}example, by adding text-align:center;You can also change #dhtmlgoodies_menu .currentDepth2 for sub menu items.
DHTMLGoodies at 02:02PM, 2011/05/09.
Rubèn
I put everything explained in a PHP file and run successfully, but want to use it as a header in the rest of my files to come out in all my files, if you change the style and image, yet I see the menu.

I do not write very good English. apology
Rubèn at 05:05AM, 2011/07/20.
soliman
i would like to do menu like dropdownlist by HTML
soliman at 10:30AM, 2011/08/18.
Jacques
Excellent !Just an observation : it seems that the very last lowercase </p> at the end of the body section in your example... has no starting <p>. If I'm right so I think it is to be removed from the example because it could parasite a code when including this menu to a previously existing page.Nevertheless, this is an excellent menu ! It's the only one that I have found which has variable width of the blocks according to their litteral content without beeing constraint to set a fixed width unique for all the blocks. (sorry, I'm french and my english is perhaps not very correct...)
Jacques at 12:40PM, 2011/09/14.
Jacques
Hello ! Me again...The example (pure, not modified) works very well on Firefox but doesn't open on IE 9.0, and it's not a parameter badly set in my IE 9.0 because other javascripts work well on it. Could you help me to find where is the problem with IE 9.0 in this script presented as example above ?Thank you !
Jacques at 06:27PM, 2011/09/14.
deviant.evil
awesome, thanks, integrated as top menu on our intranet homepage, works well.
deviant.evil at 04:38AM, 2011/10/03.
baran
Thank you very much.
baran at 07:44AM, 2011/10/08.
Jacques
HelloMore than one month later, I haven't got any answer to my question above. So I think this tools is no more maintained by his conceptor. Or he doesn't estimate that it is important to help his users... No matter how hard I try to find the solution, I can't. And more than one month now left without the help expected and gently asked, it's too much. The solution is surely easy for someone more expert than I am... I'm just a beginner who try to understand what's wrong with IE9 in this script to implement it in my website. Ok, I'm going to find another kind of script. I am so sorry if I have caused you any inconvenience.
Jacques at 10:22PM, 2011/10/20.
Admin comment
DHTMLGoodies
Jacques,I apologize for my late reply. The problem for me is not the willingness to help, but to find enough time to help. Also, please note that some of the commercial licenses include personal e-mail support. I'm not experiencing any problems in IE 9. Do you experience problems in IE9 with the demo's on this page too?
DHTMLGoodies at 07:03AM, 2011/10/21.
Roy
Hey Chris-- Error on Page NULL error in IE
--------------------------------------------------
WHY is this happening?
Different in IE, works in all other browsers without NULL ERROR
Please advise, thank you

Message: 'dhtmlgoodies_menuObj'
is null or not an object
Line: 295
Char: 8
Code: 0

this is the line of code menu.js
295var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A');
296 for(var no=0; no<aTags.length; no++){
Roy at 06:20PM, 2011/12/12.
mohammad
i'm using an RTL language and have sub-menu direction problem.anyone can help me?
mohammad at 08:05PM, 2011/12/31.
mohammad
i'm using an RTL language and have sub-menu direction problem.anyone can help me?
mohammad at 08:06PM, 2011/12/31.
nt
good
nt at 01:36PM, 2012/09/01.
Dave
I'd like to know how to slide the drop down menu slightly down so it doesn't cover up the tab labels. Right now when I point to a menu item that has a drop down the drop down covers up the top tabs above it for as wide as the drop down is and makes it hard to change tabs if right next to it.
Dave at 06:47AM, 2013/01/31.

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 - 2024 dhtmlgoodies.com