Dropdown menu utility - Using Javascript, CSS and DOM

• Download demo project - 12 Kb

Introduction

Recently our team needs to have drop down menu on our intranet site. Most of the people in the team are web designers and I am the only developer in the team, so I need to find a way to let them implement the drop down menu easily. Well, I can do that using dreamweaver, but the code that it generates is not that easily to modify (and the code is lengthy!). Hence, I decided to create an drop down menu utility to the team.

Details

This utility is written in Javascript. And it is suitable for 3 different type of mouse event - onMouseOver, onMouseClick, and page dependent. Here are the examples to implement the menu. You can see how easy it is.

Sample 1 - display sub menu when onMouseOver

<a href="link_0" class="rightArrowGreen marginLeft10 block" 
    id="Layer_a_button"
    onMouseOver="javascript:MM_showHideLayers('Layer_a','show','rightArrowGreen',
    'rightArrowDownGreen',true)"
>Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>

In sample #1, just use onMouseOver to call MM_showHideLayers function.

Sample 2 - display sub menu when onMouseClick

<a href="#" class="rightArrowGreen marginLeft10 block"
    id="Layer_a_button"
    onClick="javascript:(isLayerDisplay('Layer_a'))?MM_showHideLayers('Layer_a','hide',
    'rightArrowDownGreen','rightArrowGreen',true):MM_showHideLayers('Layer_a','show',
    'rightArrowGreen','rightArrowDownGreen',true);"
>Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>

The utility have a function called isLayerDisplay(layername) used to return boolean value whether the layer is displaying or not.

Sample 3 subpage 1 - display sub menu based on specific page

<a href="sample3_subpage1.asp" class="rightArrowGreen marginLeft10 block"
    id="Layer_a_button">Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>
<script type="text/javascript">
 MM_showHideLayers('Layer_a','','rightArrowGreen','rightArrowDownGreen','',
 'sample3_subpage1.asp','<%=request.ServerVariables("SCRIPT_NAME")%>');
</script>

Sample #3 is page dependent, so you just need to specify the page that you want to display in the javascript ( MM_showHideLayers('Layer_a','','rightArrowGreen','rightArrowDownGreen','','sample3_subpage1.asp','<%=request.ServerVariables("SCRIPT_NAME")%>'); </script>)
As you can see, the drop down menu is not that difficult to implement. I welcome to all of you to improve my script to be more flexible. Thanks for reading my article.