Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:27

Form Selects Over DHTML Menu issue


Poster: Suinfall
Dated: Wednesday November 2 2005 - 14:38:35 GMT

Can anyone give me a simple code to reveal the trick how to get around the issue that Form Selects over the DHTM Menu. I have not used the ‘Milonic' products yet but just want to know how it works. By downloading the sample code from ‘Milonic’, I still can’t quite understand the JS code. Thank you for help!

Suin


Poster: Ruth
Dated: Wednesday November 2 2005 - 20:03:46 GMT

The menu should just drop over the form selects without having to do anything. Try the following body using the newest version 5.734. .

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>Test Menu Drop Over Form Select</title>
</head>

<body>
<script type="text/javascript" src="milonic_src.js"></script>   
<a class=milonic href="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>   
<br><br><br><br><br><br>
<form>
<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>

<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>

<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>
</form>

</body>
</html>


This works in Opera 7.54+, Netscape 6+, IE5+, FireFox 1.0.2+ . It even works in the old Firebird. If you want it to work in Netscape 4.79/8 you'll need to use the divhider.js module, place the form in a div and call the divhider with the menu. You can see this at Sample14

Ruth


Poster: Diakonos
Dated: Wednesday October 18 2006 - 17:04:17 BST

What is the specific CSS/JS/code that automatically prevents the menu from showing the SELECTs underneath? I have a different project that uses a floating DIV/IFRAME combination and notice that your menu does not seem to have a problem with covering SELECTs when displayed.

Any help or suggestions you have would be appreciated. Thanks!


Poster: Ruth
Dated: Wednesday October 18 2006 - 18:19:33 BST

Hi,

Are you asking why it drops over the divs and shows the select over the divs instead of going behind?

I have no idea, you'd have to contact Milonic about why it does it. I just know it does.

Ruth


Poster: Diakonos
Dated: Wednesday October 18 2006 - 19:11:07 BST

LOL. Must be the "secret sauce."


Poster: Andy
Dated: Friday October 20 2006 - 15:14:13 BST

It's IFRAME masking - something that Milonic developed alongside Microsoft and Honeywell a few years ago. This technique (like many other tricks and techniques) appears in most competing menu products now.

The trick, as it's not such a secret anymore due to it being copied, is to add an IFRAME in the background that has its zIndex lower than the menu and has its properties set to see-through. As the IFRAME sits on top of the select box it covers it, the menu also has a higher zIndex than the IFRAME and "hey presto" it's there in all its glory.

Hope this helps,
Andy


Poster: Diakonos
Dated: Friday October 20 2006 - 15:18:10 BST

Thanks, Andy! Got the "secret sauce" answer from the man himself!

I found a very good explanation on MSDN's site of "windowed" and "windowless" elements and how they operate/relate in IE and IFRAME/SELECTS. This is great though. I'm looking forward to getting it working in my project. Thanks, again!


Poster: esr_alec
Dated: Wednesday November 1 2006 - 17:22:10 GMT

I've encountered this problem lately as well. I already use the milonic menu in my site, however I have a little non-menu related popup window that isn't covering form selects. Is there an easy way to hook into the milonic script to solve this?

Meanwhile, here is a sample what I tried to do after reading up on the iframe masking:

Code:
<div id="call_popup" class="popup" style="visibility: hidden; display: none; z-index: +10">
    <iframe src="" frameborder="0" style="filter:alpha(opacity=0);z-index:-1;position:absolute;width:300px;height:150px;top:0;left:0"></iframe>
    <div id="call_drag" class="notes_header">
         <img id="call_exit" class="notes_exit" src="images/icons/close.gif" alt="Close" />
         Call Attempt
     </div>
     <div id="call_text">
        ...more stuff
     </div>
</div>


I'm using another script library that shows this div element underneath a link on the main page. The user can drag the layer around on the screen. Without the iframe it works swell, but of course on IE6 any form selects show through it. By adding the iframe I can hide the selects underneath, but anything the iframe covers doesn't work, e.g., the close icon isn't clickable nor are any of the buttons I have. So apparently the iframe is opaque, but still on top of my div?

EDIT: Sorry, should have experiemented a bit more before posting. The above configuration actually does mostly work, however once you start to drag the div around the window certain elements on the main window behind start to disappear. So I guess my question is simply is there a better way than what I've done above so it works cleanly in IE6?