Drop Down Menu Using JavaScript

Drop down menus in a website are an important element when it comes to affective navigation of WebPages. It is an encapsulation of many links, which allow the users to browse the many pages and contents of a website. Web designers have always looked for user-friendly Drop down menus and submenus.

Drop down Menus

In this article I am going to show you how to design a very simple and yet attractive Drop down menu, using JavaScript. You might also like to have a look at a Pure CSS Menu without JavaScript.

The Markup, CSS and the Script

<html>
<head>
    <title>Drop Down Menu Using JavaScript</title>

    <style>
        body { 
            background-color:#FFF; 
            display:block; 
            font:14px Verdana; 
            font-weight:normal;
        }
        .menu { 
            float:left; 
            padding:10px; 
            font-weight:normal; 
            cursor:pointer;
        }
        a.moremenu:link { 
            font:inherit;
            text-align:center; 
            text-decoration:none; 
            padding:3px 7px; 
            color:#1C3E8C; 
            border:solid 1px #555; 
            border-radius:2px; 
            -moz-border-radius:2px; 
            -webkit-border-radius:2px; 
        }
        a.moremenu:visited {
            font:inherit; 
            text-align:center; 
            text-decoration:none; 
            padding:3px 7px; 
            color:#1C3E8C; 
            border:solid 1px #CCC; 
            border-radius:2px; 
            -moz-border-radius:2px; 
            -webkit-border-radius:2px; 
        }
        a.moremenu:hover {
            text-decoration:none; 
            color:#5A7A9B; 
            border:solid 1px #666; 
            border-radius:2px; 
            -moz-border-radius:2px; 
            -webkit-border-radius:2px; 
        }
        #ul_Rep { 
            position:relative; 
            left:0; 
            top:5px; 
            margin:0; 
            padding:0;
        }
        #ul_Rep li { 
            margin:0; 
            padding:0; 
            list-style:none; 
            float:left; 
            font:inherit;
        }
        #ul_Rep div { 
            position:absolute; 
            margin:0; 
            padding:0; 
            border:solid 1px #DE9292;
        }
        #ul_Rep div a {	
            position:relative; 
            display:block; 
            margin:0; 
            padding:5px 10px; 
            white-space:nowrap;
            text-align:left; 
            text-decoration:none; 
            background:#C43434; 
            color:#FFF; 
            font:inherit;
        }
        #ul_Rep div a:hover { 
            background:#DE9292; 
            color: #FFF;
        }
    </style>
</head>
<body>
    <p>Roll the mouse over the Menu</p>

    <!--THE DROP DOWN MENUS.-->
    <div class="menu">
                
        <!--THE EVENTS TO SHOW AND HIDE THE MENUS.-->
        <a class="moremenu" onmouseover="showmenu('divLiCat');" 
                onmouseout="setTimeToHide()" href="#">CATEGORIES</a>

        <ul id="ul_Rep">
            <li>
                <div id="divLiCat" onmouseover="ReSetTimer()" 
                    onmouseout="setTimeToHide()" 
                    style="display:none;">

                    <a href="#" title="Cascading Style Sheets">Cascading Style Sheets</a>
                    <a href="#" title="Active Server Pages">Active Server Pages</a>
                    <a href="#" title="Oracle">Oracle</a>
                    <a href="#" title="Sql Server">Sql Server</a>
                    <a href="#" title="Desktop Applications">Desktop Applications</a>
                    <a href="#" title="Subscribe">Subscribe</a>

                </div>
            </li>
        </ul>
    </div>
</body>

<script>
    var timeOutValue = 100;      // SET TIMEOUT (IN MILISECONDS).
    var setTimeToHide_ID, mItem;

    function showmenu(obj) {
        if (mItem) mItem.style.display = 'none';

        mItem = document.getElementById(obj);
        mItem.style.display = 'block';
    }
    // SET TIME TO HIDE MENU LIST.
    function setTimeToHide() { 
        setTimeToHide_ID = window.setTimeout(HideMenu, timeOutValue); 
    }

    function HideMenu() { 
        if (mItem) mItem.style.display = 'none'; 
    }       // HIDE THE MENU LIST AFTER A SPECIFIED TIME.

    function ReSetTimer() {
        if (setTimeToHide_ID) {
            window.clearTimeout(setTimeToHide_ID);
            setTimeToHide_ID = 0;
        }
    };
</script>
</html>

Try it

window.setTimeout()

window.setTimeout() will execute a function at a specified time. In this article we are using setTimeout in the HideMenu () function. The idea is to hide the drop down menu after waiting for 500 milliseconds, so that is does not disappear immediately on “mouseout”.

Variable timeOutValue has been set to ‘500’ milliseconds as the default time out period.

ResetTimer()

ResetTimer() function will be called when the user rolls the mouse over the sub menus. window.clearTimeout will clear timeout schedule which was previously set by window.setTimeout() and re set the time out again. It will make sure that even after passing the 500 milliseconds time frame, the menu list will not hide, though the user is rolling the mouse from the main menu to the sub menus.

You should try this too

To understand the function ReSetTimer(), put a comment around the function and check the result on the browser. The mouseover event of the main menu will show a drop down list of submenus and when you drag the mouse down to the submenus, the list will hide. It will stop after 500 milliseconds.

← PreviousNext →

A Simple Drop Down Menu Using JavaScript

Tools you can use

window.setTimeout()

ResetTimer()

You should try this too