hide drop down menu

lian_a · December 10th, 2004, 01:55 AM

hi! i'm using layers with my left navigation menu. when the user moves the pointer on navigation bar, another layer (menu2) pops up with more menus. however, i've added a drop down menu in the middle of my page. when i mouse over the navigation bar, the drop down menu appears on top of the other layer that pops up (menu 2). the drop down menu should be hidden. how can this be done? i already checked the z-index of the div layers..but i still can't hide the drop down menu. please help...

joefawcett · December 10th, 2004, 05:35 AM

Windowed elements such as SELECT and, in earlier browsers, IFRAME are always a higher z-index than other elements, such as DIV.
The standard way to cope with this is to render the select box invisible when the other part is operational, assuming your SELECT has an id of "lstMenu":

Code:

function toggleDisplay(ElementId)
{
 var oElement = document.getElementById(ElementId);
  if (oElement.style.visibility == "visible")
  {
    oElement.style.visibility = "hidden";
  }
  else
  {
    oElement.style.visibility = "visible";
  }
}

toggleDisplay("lstMenu");

--

Joe (Microsoft MVP - XML)

lian_a · December 10th, 2004, 08:45 AM

hi! i created a new file for this. however, i get a javascript syntax error. what should i do? please see my code...

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>

<script language="JavaScript">

</script>

</head>

<body bgcolor="#FFFFFF">

<div id=layer1 style="position:absolute; top:30; left:20; width:300; height:300;
padding:5px; border: #000000 2px solid; background-color:#FFFFFF; z-index:2">
<form>
THIS IS LAYER 1
</form>
</div>

<div id=layer2 style="position:absolute; top:40; left:30; width:300; height:300;
padding:5px; border: #000000 2px solid; background-color:#000000; z-index:1">
  THIS IS LAYER 2
  <form name="form1">
    <select id="id1" name="menu1" onChange="MM_jumpMenu('parent',this,0)" >
      <option value="1">unnamed1</option>
      <option value="2">unnamed2</option>
    </select>
  </form>
</div>

<a href="#" onclick="toggleDisplay("id1");">click</a>
</body>
</html>

joefawcett · December 10th, 2004, 09:01 AM

Code:

<a href="#" onclick="toggleDisplay("id1");">click</a>

Wrongly nested quotes, change to:

Code:

<a href="#" onclick="toggleDisplay('id1');">click</a>

By the way, never use "eval" it's highly resource intensive and not necessary. For example here:

Code:

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

What does the targ argument represent?

--

Joe (Microsoft MVP - XML)