• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

Creating Drop Down Menus

Hello all I need a good commented example of how to create a drop down menu, similar to what is on microsoft's homepage when you move the mouse pointer over the menu and a list of option appears and then when you move the mouse away the list disappears.

  • 3
1 Solution
If you are going to use the same platform as the Microsoft Site (i.e., ASP/ActiveX), you can go to the Microsoft site and get a complete explanation of how their menus were built.


Be advised that this is an IE only solution.  I believe Michel (mplungjan) has proposed a cross browser solution somewhere on EE (JavaScript?).

You might also check out www.webreference.com (either /js or /dhtml) for their tutorials.  I am not sure they do a drop down menu tutorial, but, if they do, it will give you everything you need.

Try this; You can view the entire source at www.pe.net/~mgfranz/drop1.html.

 function MM_showHideLayers() {
    var i, visStr, args, theObj;
    args = MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) {
      visStr   = args[i+2];
      if (navigator.appName == 'Netscape' && document.layers != null) {
        theObj = eval(args[i]);
        if (theObj) theObj.visibility = visStr;
      } else if (document.all != null) { //IE
        if (visStr == 'show') visStr = 'visible';
        if (visStr == 'hide') visStr = 'hidden';
        theObj = eval(args[i+1]);
        if (theObj) theObj.style.visibility = visStr;
    } }


<a href="#" onMouseOver="MM_showHideLayers('document.layers[\'Layer2\']','document.all[\'Layer2\']','show')"
<img src="1.gif" width="164" height="14" border="0"></a>

<div id="Layer2" style="position:absolute; left:10px; top:30px; width:221px; height:163px; z-index:60; visibility: hidden">
<A href="#" onMouseOver="MM_showHideLayers('document.layers[\'Layer2\']','document.all[\'Layer2\']','show')"
<IMG src="1b.gif" border="0" usemap="#index" vspace="0" hspace="0" align="top"></A>
<MAP name="index">
    <AREA shape="rect" coords="4,78,150,95" href="link1.html" alt="Link1">
    <AREA shape="rect" coords="2,59,149,76" href="link2.html" alt="Link2">
    <AREA shape="rect" coords="7,42,148,57" href="link3.html" alt="Link3">
    <AREA shape="rect" coords="4,21,150,39" href="link4.html" alt="Link4">
    <AREA shape="rect" coords="5,1,151,18" href="link5.html" alt="Link5">

I must point out that this solution is for 4.0 > browsers only...  For older browsers you can use the 'onMouseOver, onMouseOut', but image maps would need to be utilized.

I have a script that works for older browsers also if your interested.

P.S. change the "top:30px;" to "top:25px;"  In Netscape the gap will unload the <div>
hey mgfranz... did u use Dreamweaver to create that by any chance? :-)
No, why?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now