PDA

View Full Version : Help With Menu Creation.(Really ingenious idea)



majorvybz
09-04-2007, 05:56 AM
1) Script Title:
Drop down/ Overlapping Content script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm
3) Describe problem:
The scripts works perfectly as is, but I loved the convience it gave to create an aewsome menu, so i went to work on it---

So basically I have a regular order list menu (controlled by css) and then when the user hovers over the link they see the div, which has a customized navigation...

The problem is, that in order for the menu to function properly, I have to give the link a onmouseover="overlapshow" and the div a onmouseout="overlaphide" (U kno the javascripts code already)...

and doing this causes the problem if the users doesn't mouseover the div, then it continues to show (and surely nobody wants to click a button to close a menu)

so i'm asking if somone could create a time delay, or function that hides the div if the user doesnt mouseover it... thanx in advance:::

Here is the code I'm working on::: Pls help (I'm trying to create this menu for personal use, and to share as a Joomla module)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" >
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+3+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}


</script>
<style type="text/css">
#tabsH {
float:left;
width:100%;
background:#000;
font-size:80%;
line-height:normal;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
}
#tabsH ul {
margin:0;
padding:0px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0; margin-top:0px;
padding:0;
}
#tabsH a {
float:left;
background:url("tabrightH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

</style>
</head>

<body style="width:920px;">
<div id="tabsH">
<ul style="margin-bottom:30px;">
<li><a href="#" onmouseover="return overlay(this, 'subcontent2', 'leftbottom')" title="Link 1"><span>HOME</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent3', 'leftbottom')" title="Link 2"><span>NEWS</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent4', 'leftbottom')" title="Link 3"><span>MUSIC</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent5', 'leftbottom')" title="Longer Link Text"><span>VIDEO</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent6', 'leftbottom')" title="Link 5"><span>STYLE</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent7', 'leftbottom')" title="Link 7"><span>BEAUTY</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent8', 'leftbottom')" title="Link 7"><span>ARCADE</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent9', 'leftbottom')" title="Link 6"><span>VOICEOUT</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent10', 'leftbottom')" title="Link 7"><span>BLOGS</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent11', 'leftbottom')" title="Link 7"><span>FORUM</span></a></li>
<li><a href="#" onmouseover="return overlay(this, 'subcontent12', 'leftbottom')" title="Link 7"><span>STORE</span></a></li>
</ul>
</div>
<DIV id="subcontent2" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent2'); return false ">
Some content. Some content.
</DIV>
<!-- continer 2 -->
<DIV id="subcontent3" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent3'); return false ">
Some content. Some content.
</DIV>
<!-- continer 3 -->
<DIV id="subcontent4" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent4'); return false">
Some content. Some content.
</DIV>
<!-- continer 4 -->
<DIV id="subcontent5" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent5'); return false ">
Some content. Some content.
</DIV>
<!-- continer 5 -->
<DIV id="subcontent6" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent6'); return false ">
Some content. Some content.
</DIV>
<!-- continer 6 -->
<DIV id="subcontent7" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent7'); return false ">
Some content. Some content.
</DIV>
<!-- continer 7 -->
<DIV id="subcontent8" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent8'); return false ">
Some content. Some content.
</DIV>
<!-- continer 8 -->
<DIV id="subcontent9" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent9'); return false ">
Some content. Some content.
</DIV>
<!-- continer 9 -->
<DIV id="subcontent10" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent10'); return false ">
Some content. Some content.
</DIV>
<!-- continer 10 -->
<DIV id="subcontent11" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent11'); return false ">
Some content. Some content.
</DIV>
<!-- continer 11 -->
<DIV id="subcontent12" style="position:absolute; display:none; border: 2px solid black; background-color: lightyellow; width: 140px; height: 110px; padding: 8px" onmouseout="overlayclose('subcontent12'); return false ">
Some content. Some content.
</DIV>








</body>
</html>
:)