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.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh) FirstPrevNext

divya divya.hyd@gmail.com 2: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 Sign In·View Thread·PermaLink javascript and MVC paradigm volkan.ozcelik 3:11 5 Oct '05   I'd humbly suggest you to google for unobtrusive javascript: http://www.google.com.tr/search?hl=tr&q=unobstrusive+javascript&meta=[^] Hope that helps, Volkan. ~~ better to reign in hell than to serve in heaven ~~ Sign In·View Thread·PermaLink

Last Visit: 3:32 8 Nov '09     Last Update: 3:32 8 Nov '09 1