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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ken Yim

Web Developer

Canada

Member

I am working as a web developer in Loblaw. This is my favourite job that I would like to do in the rest of my life.

Nothing is perfect, but I will do my best!

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

divya

divya.hyd@gmail.com

1:03 18 Feb '08

hi,
i am a b.tech fresher, i have been assigned a work in my new office.

it is about navigation of vertical dropdowns, the dropdowns shoud be visible only when mouse is over that particular item, and when mouse is moved away and is over another iten this dropdowns should be closed and the dropdowns of the another item should be displayed,...
i have been shown the site as example "http://www.apple.com/itunes"

any sugesstions..how to implement, using java script rather than ajax.

thank you