Javascript: Rollover Dropdown Menus

Up until recently I’d never implemented a rollover dropdown menu. Then I just decided to build one from scratch for my fulltime employer to improve upper-level navigation. Basically, with some simple javascript to hide/show the menu and some CSS to style and position it, you’ve got yourself a simple javascript rollover dropdown menu! The code follows the example implementation below.

The Javascript:

function rolloverMenu(showHide, menu)
{
    var linkObj = document.getElementById('mainLink');
    var menuObj = document.getElementById(menu);
    if (showHide == 0)
    {
        menuObj.style.display = 'none';
        linkObj.setAttribute('class', 'mainNav');
        linkObj.setAttribute('className', 'mainNav');
    }
    else
    {
        menuObj.style.display = 'block';
        linkObj.setAttribute('class', 'selectedRollover');
        linkObj.setAttribute('className', 'selectedRollover');
    }
}

This javascript will either hide or show the menu depending on the location of the cursor. The HTML that calls the javascript has a delay on it as well, but you’ll see that later. This javascript also changes the class name of the link so that even though your mouse isn’t technically hovering over that link it will look like it is being hovered over.

The CSS:

#container{
    position: absolute;
    z-index: 1001;
}
a.mainNav{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #1D3E66;
}
a.mainNav:hover{
    background-color: #3D6199;
    color: #AAAAAA;
}
a.selectedRollover{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #3D6199;
}
.rolloverMenu{
    float:left;
    padding: 10px 10px 6px 10px;
    position: absolute;
    z-index: 1000;
    background-color: #3D6199;
    width: 100px;
}
.rolloverMenu#mainMenu{
    top: 40px;
}
.rolloverMenu a{
    color: White;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}

Change the CSS to fit your own design. I’ve been very specific in this CSS so that it should be easier for you to identify everything. Note that the #container definition is actually very important for an IE6 bug fix. IE6 has issues with z-index when not combined with absolute positioning. Basically, the parent element of the rollover menu needs to have that specific definition.

Lastly, the HTML:

<div id="container">
  <a class="mainNav" href="#" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">Rollover Me</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a><br />
    <a href="#">Link 3</a><br />
    <a href="#">Link 4</a>
  </div>
</div>

And that’s that! The HTML link calls the javascript which implements a series of CSS rules that will hide or show the menu of your choice! Have fun!

8 Responses to “Javascript: Rollover Dropdown Menus”

  1. Josiah Zimmerman says:

    Awesome!! Extremely simple and useful. Thanks A lot

  2. Sunny says:

    thnxxxxxxxxxx bro, really helpful post…

  3. free bird says:

    Great post! It is very useful for me to help create a drop down menu.

  4. phoenixandthor says:

    Awesome! This is exactly what I was looking for! Though I used lists and DIV containers (got to support text-mode browsers and screen readers), the same basic methods apply.

  5. Miriam Brace says:

    I love this code, the only thing I was wondering is how do I get the sub menu to slide out from the right side of the text. As I have replaced the text with an Image and I want the text to slide out from the right of the image. As you can see I am not a javascript editor but somebody who is learning by trial and error. Thanks.

    • David says:

      That is actually a CSS issue and not a JS issue. You’ll notice the CSS for the rollover div that contains the hidden menu has an absolute position, and a specified top location. Instead of the top location, you’ll want to define a left position that mirrors the width of the preceding link. Hope that helped!

  6. Nindjako says:

    Help!
    I’m very green in this area.How to make a second (or more) butons like that. I tried to copy-paste and change the names , but I can’t make it wokr properly ( I don’t see the links of the second buton, they a covered by the first or something like that).
    Note – I copied only the code inside the “container” div and pasted it
    in the same container.