All Levels Navigation Menu-More than one menu option selected on mouseover at a time
1) Script Title: All Levels Navigational Menu (v2.1)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm
3) Describe problem: When i mouseover the options in the menu bar quickly and repeatedly, sometimes two or more options have the dropdowns visible when there should be only one dropdown visible at a time depending on where the mouse pointer is. This does not happen all the time. But it has happened several times on both IE and Firefox.
I don't have a link to my website to show you, but I am pasting what the source of a typical page looks like.
These were the changes i made to the script:
----------------------------------------------------------------
var ddlevelsmenu={
contextpath:"/", /* I added this property*/
enableshim: false,
arrowpointers:{
downarrow: ["/images/menu/menu-arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
rightarrow: ["/images/menu/menu-arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?
},
hideinterval: 1, //delay in milliseconds before entire menu disappears onmouseout.
effects: {enableswipe: true, enablefade: false, duration: 500},
//httpsiframesrc: "/view/shared/blank.htm",
--------------------------------------------------------------------------
I also modified the setup ,init and addpointer functions to set the contextpath
--------------------------------------------------------------------------
setup:function(mainmenuid, dir,ctxpath){
this.addEvent(window, function(){ddlevelsmenu.init(mainmenuid, dir,ctxpath)}, "load")
}
init:function(mainmenuid, dir,ctxpath){
this.contextpath=ctxpath;
//......the rest of the code is unchanged.
}
addpointer:function(target, imgclass, imginfo, BeforeorAfter){
var pointer=document.createElement("img")
pointer.src=this.contextpath+imginfo[0]
//......the rest of the code is unchanged.
}
--------------------------------------------------------------------------
I also modified the stylesheet to change the background color.
--------------------------------------------------------------------------
<html>
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/style/menu-base.css" />
<link rel="stylesheet" type="text/css" href="/style/menu-topbar.css" />
<link rel="stylesheet" type="text/css" href="/style/menu-sidebar.css" />
<script type="text/javascript" src="/js/menu.js"></script>
</head>
<body>
<div id="layoutContent">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="bottom" width="18%">
Logo goes here
</td>
<td valign="bottom" align=left width="32%">
<span class="Greeting">Hello, User!</span>
</td>
<td align="right" valign="bottom" width="50%">
<table cellpadding="0" align="right">
<tr>
<td>
<a href="#" class="Utility-Links">Logout</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="Menu-Bar">
<table cellspacing="0" cellpadding="0" align="center" width="810">
<tr>
<td>
<div id="ddtopmenubar" class="mattblackmenu"><ul><li><a href="#" rel="1">Option 1</a></li><li><a href="#" rel="2">Option 2</a></li><li><a href="#" rel="3">Option 3</a></li></ul></div><script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar", "")</script>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
Large Content goes here
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Footer goes here
</td>
</tr>
</table>
</div>
<div id="wait" style="display: none;">
Please wait. Processing in progress.
</div>
<ul id="1" class="ddsubmenustyle">
<li>
<a
href="#">Sub option 1</a>
</li>
<li>
<a href="#">Sub option 2</a>
<ul>
<li>
<a href="#">item 1</a>
</li>
<li>
<a href="#">itme 2</a>
</li>
</ul>
</li>
</ul>
<ul id="2" class="ddsubmenustyle">
<li>
<a
href="#">Sub option 1</a>
</li>
<li>
<a href="#">Sub option 2</a>
<ul>
<li>
<a href="#">item 1</a>
</li>
<li>
<a href="#">itme 2</a>
</li>
</ul>
</li>
</ul>
<ul id="3" class="ddsubmenustyle">
<li>
<a
href="#">Sub option 1</a>
</li>
<li>
<a href="#">Sub option 2</a>
<ul>
<li>
<a href="#">item 1</a>
</li>
<li>
<a href="#">itme 2</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------
Appreciate any help.
Thanks
CSS Codes
Reply With Quote
Bookmarks