Welcome to WebmasterWorld Guest from 18.206.168.65

Forum Moderators: open

Message Too Old, No Replies

Drop down menu 'overlap' issue

     
3:22 am on Jan 27, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 1, 2004
posts:158
votes: 0


All:

I have a quick question...

I use a javascript drop down menu, that drops down when clicked on. there are about 10 links coming down from it.
Unfortunately, I have another drop down menu (in a simple form) that 'overwrites' my other menu.

For example, when the first menu is opened, the links open below it. the other menu is in the path of this menu, and the second menu obscures about two links.

It reminds me of a powerpoint situation, where one can "send to front" or "send to back" to control

Thoughts?

3:34 am on Jan 27, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 1, 2004
posts:158
votes: 0


in looking at a method to describe this further...I found an example that shows exactly what i mean...

i found this:

[dynamicdrive.com...]

at the top of the page, there is a 'miscellaneous' tab where there is also a search box. when you click on miscellaneous you see one of the links is obscured by the search box.

4:16 am on Jan 27, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Mar 8, 2003
posts:234
votes: 0


[w3schools.com...]

z index

5:42 am on Jan 27, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 1, 2004
posts:158
votes: 0


Thanks I tried that, but to no avail...here is my code...
I tried it out using this link:
[w3schools.com...]

My code:
<html>
<head>

<style type="text/css">

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

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

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

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit [dynamicdrive.com...] for full source code
***********************************************/

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="1.php">1</a>'
menu2[1]='<a href="2.php">2</a>'
menu2[2]='<a href="3.php">3</a>'
menu2[3]='<a href="4.php">4</a>'
menu2[4]='<a href="5.php">5</a>'
menu2[5]='<a href="6.php">6</a>'
menu2[6]='<a href="7.php">7</a>'

var menuwidth='165px' //default menu width
var menubgcolor='aqua' //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 ns6=document.getElementById&&!document.all

if (ie4¦¦ns6)
document.write('<div id="dropmenudiv" style="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"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden ¦¦ e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
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"
}

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"
}
}

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

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

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
</head>
<body>

<p align="center">

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Categories</a>

&nbsp;&nbsp;&nbsp;&nbsp;

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Deal Center</a>

&nbsp;&nbsp;&nbsp;&nbsp;
</body>
</html>

<font size="2">
<u><b>SELECT A CAUSE:</b></u></font><br>
</font><span class="sidelinks">Help us out!</span>

<br>
&nbsp;</p>
<p align="left">

</p>
<p align="center">
<form action="Login2006.php?do=login" method="POST" style="position: relative; z-index: -100">
<select name="fusername" id="fusername">
<option value="na">Organizations</option>
<option value="supportbigred20">------------------------------------------------------------------------------</option>
<option value="supportbigred101-20">ALS Association (Lou Gehrig's Disease)</option>



</select>

<input type="submit" name="log"
value="Go">
</form>

6:12 am on Jan 27, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


woah what the hell is all that!

</body>
</html>
should be last for a start.

I'd personally dump the js menu and do a search for css drop down menu.Many examples about. Lot less code.
Who cares about IE4.

5:40 pm on Jan 27, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 1, 2004
posts:158
votes: 0


Thanks...makes sense.