Link to home
Start Free TrialLog in
Avatar of aman0711
aman0711

asked on

Need help with mouseover function

Hi Experts,

                 I am using a javascript for 2 level horizontal menu. Like the one in snapshot.. When you mouse over Admin, you see the horizontal menu below that.

                This is working fine. but the problem is I want the menu to disappear whenever I move my mouse away from ADMIN.

                Right now its not going away once i mouseover ADMIN. i have attached the javascript. and BELOW is my HTML code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/analytics/static/styles/2leveltab.css" />

<script type="text/javascript" src="/analytics/static/js/2leveltab.js">


</script>

</head>

<body>

<div id="page-wrapper">

<div id="header"><!-- begin header -->

<h1 class="hidden">Intranet Site</h1>
<!-- hidden titles for accessibility and SEO -->
<h2 class="hidden">Intranet Site Homepage</h2>

<h1 id="title"><a href="index.html" title=""><img
      alt="" src="/analytics/static/images/header-title.jpg" /></a></h1>

<ul id="maintab" class=" nav-bar">
      <li class="current"><a href="index.html" title="Home">SUMMARY</a></li>
      <li>KPI</li>
      <li>TRANSACTION</li>
      <li>ERRORS</li>
      <li>REVENUE</li>
      <li>CALL OFFLOAD</li>
      <li rel="admin"><a href="admin.html" title="Admin Console">ADMIN</a></li>
      <li><a href="mailto:someuser@somedomain.com?subject=xxxxAnalytics Portal">CONTACT US</a></li>
</ul>


<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab");
</script>

<!-- end header --></div>
</div>
<div id="admin" class="submenustyle">
<a href="admin.html?page=admDefault" title="" style='text-decoration: none;'>Default Views</a>
<a href="adminEdit.html?page=editAdmSummary" title="" style='text-decoration: none;'>Add/Edit Defaults</a>
<a href="goal.html?page=goal" title="" style='text-decoration: none;'>Goals Summary</a>
<a href="goalEdit.html?page=editGoal" title="" style='text-decoration: none;'>Add/Edit Goal</a>
</div>
</body>
</html>
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
 
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
 
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
 
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
 
 
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
 
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

Open in new window

2level.PNG
Avatar of HonorGod
HonorGod
Flag of United States of America image

You need to show/provide more of your code.

I would think that you don't have the right mouseout event handler...
Avatar of aman0711
aman0711

ASKER

complete code is above sir.. dont have anything else now :(
So the code in the scrollable area is the contents of"/analytics/static/js/2leveltab.js" ?
yes :)
Please provide 2leveltab.css
Here :)




.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
 
.basictab li{
display: inline;
margin: 0;
}
 
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}
 
 
.basictab li a:visited{
color: black;
}
 
.basictab li a:hover{
background-color: #dbffff;
color: black;
}
 
.basictab li a:active{
color: black;
}
 
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}
 
 
.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
 
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
 
.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}
 
.submenustyle a:hover{
background-color: #ebffff;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sir,  this didnt work :(

Now I am seeing those sub menu items all the item
I'm glad that this helped.

I'm sorry that I missed your update on 7/13/.

Thanks for the grade & points.

Good luck & have a great day.
original text AND last comment edited by SouthMod to obfuscate the email address. Image not replaced.
Please replace the text with this: as it still has some info shown up there.

2level.PNG