JavaScript MENU Delay on a Simple Vertical Navigation
Question:
I have this vertical navigation im trying to use for a web site. But the client requested a delay when going from tab to tab or when mouse out from the navigation.
I tried different options with setTimeout but nothing worked.
I was testing mostly on this piece of code:
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName(“ul”)[0].style.display=”none”
}
Please take a look at the menu in action:
http://tufekciev.com/tmp/issue2.html
Thanks
Code Snippet:
<script type=”text/javascript”>
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu’s main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName(“ul”)
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName(“a”)[0].className+=” subfolderstyle”
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+”px” //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName(“a”)[0].offsetWidth+”px” //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName(“ul”)[0].style.display=”block”
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName(“ul”)[0].style.display=”none”
}
}
for (var t=ultags.length-1; t>-1; t–){ //loop through all sub menus again, and use “display:none” to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility=”visible”
ultags[t].style.display=”none”
}
}
}
if (window.addEventListener)
window.addEventListener(“load”, initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent(“onload”, initsidebarmenu)
</script>
Solution:
And if you want to hide the other open menus when you open a new top level menu, use this.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Basic Example</title>
<style type=”text/css”>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
z-index: 101;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
z-index: 102;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: black;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background: url(../right.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script language=”javascript” type=”text/javascript”>
// Nested Side Bar Menu (Mar 20th, 09)
// By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids = ["sidebarmenu2","sidebarmenu1"]; // Enter id(s) of each Side Bar Menu’s main UL, separated by commas
var hideTimer;
function initsidebarmenu() {
// alert(“loading..”);
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName(“ul”);
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName(“a”)[0].className+=” subfolderstyle”;
// alert(“assigning handlers..”);
ultags[t].parentNode.onmouseover = function() {
var self = this;
// Close other top level menus
for (var i = 0; i < menuids.length; i++) {
var topLevelMenu = document.getElementById(menuids[i]);
if(self.parentNode.id == menuids[i]) {
// Yes we are a top level menu.
for (var j = 0; j < menuids.length; j++) {
if(self.parentNode.id != menuids[j]) {
hideSubMenus(menuids[j]);
}
}
}
}
// self is an “li” element.
// self.parentNode is an “lu” element
// Hide open siblings
var siblings = self.parentNode.getElementsByTagName(“ul”);
for(var i = 0; i < siblings.length; i++) {
if(siblings[i].parentNode.parentNode != self.parentNode) {
// Hide only true siblings, not descendents.
continue;
}
// Hide possibly open sibling
if(siblings[i] != self.parentNode) {
siblings[i].style.display=”none”;
}
}
if(hideTimer) {
clearTimeout(hideTimer);
}
self.getElementsByTagName(“ul”)[0].style.display=”block”;
self.getElementsByTagName(“ul”)[0].style.left =
self.getElementsByTagName(“ul”)[0].parentNode.offsetWidth+”px”;
};
ultags[t].parentNode.onmouseout = function() {
// var self = this;
// self.getElementsByTagName(“ul”)[0].style.display=”none”;
};
// alert(“assigned handlers..”);
}
hideAllSubMenus();
}
// alert(“done loading..”);
}
function hideAllSubMenusDelayed() {
if(hideTimer) {
clearTimeout(hideTimer);
}
hideTimer = setTimeout( “hideAllSubMenus()”, 2000 );
}
function hideAllSubMenus() {
for (var i = 0; i < menuids.length; i++) {
hideSubMenus(menuids[i]);
}
}
function hideSubMenus(menuid) {
var ultags = document.getElementById(menuid).getElementsByTagName(“ul”);
for (var t = ultags.length-1; t > -1; t–) {
// loop through all sub menus again, and use
// “display:none” to hide menus (to prevent possible
// page scrollbars
ultags[t].style.visibility=”visible”;
ultags[t].style.display=”none”;
}
}
if (window.addEventListener) {
window.addEventListener(“load”, initsidebarmenu, false);
} else if (window.attachEvent) {
window.attachEvent(“onload”, initsidebarmenu);
}
</script>
</head>
<body>
<h1>Basic Example</h1>
<table>
<tr>
<td>
<div onmouseout=”hideAllSubMenusDelayed()” >
<ul id=”sidebarmenu1″>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Folder 1</a>
<ul>
<li><a href=”#”>Sub Item 1.1</a></li>
<li><a href=”#”>Sub Item 1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Folder 2</a>
<ul>
<li><a href=”#”>Sub Item 2.1</a></li>
<li><a href=”#”>Folder 2.1</a>
<ul>
<li><a href=”#”>Sub Item 2.1.1</a></li>
<li><a href=”#”>Sub Item 2.1.2</a></li>
<li><a href=”#”>Sub Item 2.1.3</a></li>
<li><a href=”#”>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>Item 4</a></li>
</ul>
<ul id=”sidebarmenu2″>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Folder 1</a>
<ul>
<li><a href=”#”>Sub Item 1.1</a></li>
<li><a href=”#”>Sub Item 1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Folder 2</a>
<ul>
<li><a href=”#”>Sub Item 2.1</a></li>
<li><a href=”#”>Folder 2.1</a>
<ul>
<li><a href=”#”>Sub Item 2.1.1</a></li>
<li><a href=”#”>Sub Item 2.1.2</a></li>
<li><a href=”#”>Menu 2.1.3</a>
<ul>
<li><a href=”#”>Sub Sub Item 2.1.3.1</a></li>
<li><a href=”#”>Sub Sub Item 2.1.3.2</a></li>
</ul>
</li>
<li><a href=”#”>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>Item 4</a></li>
</ul>
</div>
</td>
<td>
<h1> </h1>
<!– define Magic Zoom Plus –></td>
</tr>
</table>
</body></html>
(No Ratings Yet)
Loading ...
Comments (0)
Trackbacks - Pingbacks (0)
Leave a Reply