Sub menu hiding behind dropdown menu

**marchmirchi** · 08-24-2006, 07:23 AM

Hi!

I have vertical menu in my page and it has sub menu also. the menu work perfectly on all pages but whenever a page contain a dropdown menu in the middle of the page the sub hide behind the dropdown. here with am attaching the screen shot of this problem.

**jscheuer1** · 08-24-2006, 07:35 AM

I would think you must be using Internet Explorer. Virtually all other browsers will not do that in like 99% of cases. The most elegant solution is to create an iframe 'shim' that is z-indexed between the sub menu and the rest of the page surface (but it can only be active in IE). You can also script the select elements (drop down boxes) to become invisible while the sub menu displays. Or - simply move the offending boxes to a different part of the page.

I have modified a number of DD's scripts here in the forum for folks to use with the iframe 'shim' idea. If you got your menu from DD and it is a DD script (not third party like HV or Top Menu, etc.), I may already have a mod for it. Even if I do not, if it is a fairly straightforward type script, it should be easy enough to mod it up for the iframe 'shim'.

**marchmirchi** · 08-24-2006, 08:33 AM

Thanx for the reply. in this am using normal dropdown. can u give me DD script as u mentioned

**jscheuer1** · 08-24-2006, 08:48 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Anylink Drop Down Menu over Selects - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>


<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="dropmenuiframe" src="" style="z-index:99;display:none;position:absolute;"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here to drop over selects by
* jscheuer1 & JeffSinNHUSA in http://www.dynamicdrive.com/forums
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top='-500px'
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
setTimeout("hideIframe();",0);
obj.visibility=hidden
}
}


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
<br>&nbsp;<br>
<select>
<option value="b">mjkujdhgdffghbz;jfhvgzfg
<option value="r">fhagh
<option value="f">wgjsuk
</select>
</form>
</body>
</html>

**marchmirchi** · 08-25-2006, 07:18 AM

Thanks john...its work well.

. i made the vertical menu but am not able to move the position of the sub menu in the end of main menu. now the sub menu coming from the beging of the line. pls help me in this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Anylink Drop Down Menu over Selects - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid #337bb6;
border-bottom-width: 0;
background: #edf7ff;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height:20px;
z-index:100;
}

#dropmenudiv a{
width: 255px;
display: block;
text-indent: 3px;
border-bottom: 1px solid #337bb6;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

.mymenu
{
font-weight: bold;
font-size:11px;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0260AA;
text-decoration:none;

border-width:0px 0px 0 0;
border-style:solid;
border-bottom-width: 0px;

}
/*
#dropmenudiv a:hover{ /*hover background color
background-color: yellow;
}*/

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #003366;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>


<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="dropmenuiframe" src="" style="z-index:99;display:none;position:absolute;"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here to drop over selects by
* jscheuer1 & JeffSinNHUSA in http://www.dynamicdrive.com/forums
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="/ME/display_pp_other/i/e8f90348add39d4f9e7f3aa40d665edf/">Senior Disease Area Specialist</a>'
menu4[1]='<a href="/ME/display_pp_other/i/f6f1e30b3b1451cb26fbce511e24e16c/">Country/Multicountry Medical Director</a>'
menu4[2]='<a href="/ME/display_pp_other/i/fd320f7724d922b2fd1fa2de706a3782/">Regional Disease Medical Director</a>'
menu4[3]='<a href="/ME/display_pp_other/i/d61c95d103f188d4b45e47c916b7ccee/">Disease Area Head</a>'
menu4[4]='<a href="/ME/display_pp_other/i/5b5d34ed56a60517920ee6ef2f668af6/">Disease Area Specialist</a>'
menu4[5]='<a href="/ME/display_pp_other/i/42d02d1028e2f5e8d683dd2e2db1a78b/">Medical Science Manager</a>'

//Contents for menu 5
var menu5=new Array()
menu5[0]='<a href="/ME/L_D_intro/">Introduction</a>'
menu5[1]='<a href="/ME/handbook/type/em">Learning & Handbook - EMEA/Canada</a>'
menu5[2]='<a href="/ME/handbook/type/em">Learning & Handbook - Latin America</a>'
menu5[3]='<a href="/mod_learn_develop/display_new_course/etool_courses/1">eTools</a>'

//Contents for menu 7
var menu7=new Array()
menu7[0]='<a href="/ME/for_internal_use_only/">For Internal Use Only</a>'
menu7[1]='<a href="/ME/for_external_use/">For External Use</a>'

//Contents for menu 8
var menu8=new Array()
menu8[0]='<a href="/ME/for_internal_use_only_la/">For Internal Use Only</a>'  
menu8[1]='<a href="/ME/for_external_use_la/">For External Use</a>'


var menuwidth='165px' //default menu width
var menubgcolor='#edf7ff' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top='-500px'
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
setTimeout("hideIframe();",0);
obj.visibility=hidden
}
}


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<table border="1" cellpadding="1" cellspacing="0"  class="mymenu" bordercolor="#337bb6">
  <tr >
    <td height="20"><a href="/ME/home">Home</a></td>
  </tr>
    <tr>
    <td height="20"><a href="/ME/background">Background</a></td>
  </tr>

  <tr>
    <td height="20"><a href="" onMouseover="return dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()">4545454545</a></td>
  </tr>
    <tr>
    <td height="20"><a href="" onMouseover="return dropdownmenu(this, event, menu5, '200px')" onMouseout="delayhidemenu()">454545454545</a></td>
  </tr>
  <tr>
    <td height="20"><a href="" >Career Path</a></td>
  </tr>
  <tr>
    <td height="20"><a href="" onMouseover="return dropdownmenu(this, event, menu7, '200px')" onMouseout="delayhidemenu()">22222222222222222222</a></td>
  </tr>
  <tr>
    <td height="20"><a href="" onMouseover="return dropdownmenu(this, event, menu8, '200px')" onMouseout="delayhidemenu()">22224545454522</a></td>
  </tr>



</table>
</form>
<br>&nbsp;<br>
<select>
<option value="b">mjkujdhgdffghbz;jfhvgzfg
<option value="r">fhagh
<option value="f">wgjsuk
</select>
</form>
</body>
</html>

**jscheuer1** · 08-25-2006, 07:49 AM

Find this function and add the number of your choice where I have inserted 100 (red parts):

Code:

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft+100 : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

100 pushes it 100 pixels to the right.

**marchmirchi** · 08-25-2006, 07:58 AM

it's worked. thanks for ur time john

**terkini** · 08-25-2006, 09:19 PM

Originally Posted by jscheuer1

Find this function and add the number of your choice where I have inserted 100 (red parts):

Code:

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft+100 : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

100 pushes it 100 pixels to the right.

Hi John, i tried the script and it worked perfectly on IE but the sub-menus doesn't display correctly in Opera. Is there any additional codes that is required for opera browser?

**jscheuer1** · 08-26-2006, 04:43 AM

Originally Posted by terkini

Hi John, i tried the script and it worked perfectly on IE but the sub-menus doesn't display correctly in Opera. Is there any additional codes that is required for opera browser?

The demo in post #4:

http://www.dynamicdrive.com/forums/s...74&postcount=4

of this thread works equally well in IE, FF and Opera. So does the positioning modification. However, if you position your sub menu too far away from the trigger, it will disappear before you can get your mouse over it. This will happen in any browser. In extreme cases, css style can be employed to remedy this by making the menu appear farther to - say, the right, than it actually is. However, that may mess up the (IE only) iframe shim.

**jscheuer1** · 08-26-2006, 05:18 AM

Here is a method that uses the IE only iframe shim and that uses style in IE, Opera and FF to offset the position of the anylink drop menu without actually moving it away from the triggers, it only appears to be moved 100px to the right and 10px down, this takes care of the problem mentioned in my previous post and no longer requires that the function getposOffset() be altered:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Anylink Drop Down Menu over Selects w/style offsets - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
color:white;
background-color:#123456;
}

#dropmenudiv{
position:absolute;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
padding-top:10px;
padding-left:100px;
}

* html #dropmenudiv {  /*Overcomes IE bug regarding transparent backgrounds*/
background-color:red!important;
filter:chroma(color=red);
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid black;
border-bottom-width:0;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
background-color:lightyellow;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

#dropmenudiv a.bot {
border-bottom:1px solid black;
}

</style>


<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="dropmenuiframe" src="" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here to drop over selects by
* jscheuer1 & JeffSinNHUSA in http://www.dynamicdrive.com/forums
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width
var menubgcolor='transparent' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top='-500px'
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
setTimeout("hideIframe();",0);
obj.visibility=hidden
}
}


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth-100+'px';
theIframe.style.height = theDiv.offsetHeight-10+'px';
theIframe.style.top = theDiv.offsetTop+10+'px';
theIframe.style.left = theDiv.offsetLeft+100+'px';
theIframe.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
<br>&nbsp;<br>
<select>
<option value="b">mjkujdhgdffghbz;jfhvgzfg
<option value="r">fhagh
<option value="f">wgjsuk
</select>
</form>
</body>
</html>

Notes: In addition to the style changes, the menu configuration item - menubgcolor - must be set to transparent:

Code:

var menuwidth='165px' //default menu width
var menubgcolor='transparent' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

Also the style is radically different than the default for this menu and the offset padding used for this effect in the styling of the:

#dropmenudiv

selector must be compensated for in the function unhideIframe():

Code:

#dropmenudiv{
position:absolute;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
padding-top:10px;
padding-left:100px;
}

Code:

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth-100+'px';
theIframe.style.height = theDiv.offsetHeight-10+'px';
theIframe.style.top = theDiv.offsetTop+10+'px';
theIframe.style.left = theDiv.offsetLeft+100+'px';
theIframe.style.display = "block";
}
}

Thread: Sub menu hiding behind dropdown menu

Thread Tools

Search Thread

Sub menu hiding behind dropdown menu

Bookmarks

Bookmarks

Posting Permissions