Jump to content

menu after hover delay


Cliffo

Recommended Posts

Hello all, first off thanks a ton for the css tutorials, thanks to this site i have created my first ever website template and with css! I am trying to add a delay to my drop down menus, as of now it is rather hard to click links because they disappear so fast. I have found a few random "hover delay" js scripts but i can not get them to work. I am going to link my current code, i am curious how to get a delay working on this nav bar and if i even used css properly to create what i have now. Here is a link to my test site also;

 

div#navi {
width: 960px;
height: 39px;
}
ul.navi {
margin:-2px 0px -2px -40px;
}
ul.navi, ul.navi li {
float: left;
list-style:none;
}
ul.navi li ul {
display: none;
}
ul.navi li:hover ul {
display:block;
list-style: none;
position:absolute;
}
ul.navi li:hover ul li {
padding-right:50px;
}
ul.navi li:hover ul li a{
color:#FFF;
}
ul.navi li:hover ul li a:hover{
color:#FFF;
}

div#navi2 {
width: 960px;
height: 29px;
background-image:url(images/nav_bottom.gif);
margin-top:-5px;

 

 

<div id="navi">
   <ul class="navi">
     <li><a href="/index.php"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_01.gif" /></a>
       <ul>
         <li><a href="/index.php?site=news">News</a></li>
         <li><a href="/index.php?site=news&action=archive">Archives</a></li>
         <li><a href="/index.php?site=articles">Articles</a></li>
         <li><a href="/index.php?site=calendar">Calendar</a></li>
         <li><a href="/index.php?site=faq">FAQ</a></li>
         <li><a href="/index.php?site=search">Search</a></li>
       </ul>
     </li>
     <li><a href="/index.php?site=forum"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_02.gif" /></a></li>
     <li><a href="/index.php?site=squads"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_03.gif" /></a>
       <ul style="margin-left:-255px;">
         <li><a href="/index.php?site=about">About Us</a></li>
         <li><a href="/index.php?site=squads">Squads</a></li>
         <li><a href="/index.php?site=members">Members</a></li>
         <li><a href="/index.php?site=clanwars">Matches</a></li>
         <li><a href="/index.php?site=history">History</a></li>
         <li><a href="/index.php?site=awards">Awards</a></li>
       </ul>
     </li>
     <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_04.gif" />
       <ul style="margin-left:-320px;">
         <li><a href="/index.php?site=forum">Forums</a></li>
         <li><a href="/index.php?site=guestbook">Guestbook</a></li>
         <li><a href="/index.php?site=registered_users">Registered Users</a></li>
         <li><a href="/index.php?site=whoisonline">Online Users</a></li>
         <li><a href="/index.php?site=polls">Polls</a></li>
         <li><a href="/index.php?site=server">Servers</a></li>
       </ul>
     </li>
     <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_05.gif" />
       <ul style="margin-left:-330px;">
         <li><a href="/index.php?site=files">Downloads</a></li>
         <li><a href="/index.php?site=tutorials">Tutorials</a></li>
         <li><a href="/index.php?site=movies">Movies</a></li>
         <li><a href="/index.php?site=gallery">Photos</a></li>
         <li><a href="/index.php?site=links">Weblinks</a></li>
         <li><a href="/index.php?site=demos">Demos</a></li>
       </ul>
     </li>
     <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_06.gif" />
       <ul style="margin-left:-710px;">
         <li><a href="/index.php?site=sponsors">Sponsors</a></li>
         <li><a href="/index.php?site=partners">Partners</a></li>
         <li><a href="/index.php?site=newsletter">Newsletter</a></li>
         <li><a href="/index.php?site=contact">Contact Us</a></li>
         <li><a href="/index.php?site=challenge">Fight Us</a></li>
         <li><a href="/index.php?site=joinus">Join Us</a></li>
         <li><a href="/index.php?site=linkus">Link Us</a></li>
         <li><a href="/index.php?site=imprint">Imprint</a></li>
       </ul>
     </li>
   </ul>
 </div>
 <div id="navi2"></div>

 

 

Here are the two js scripts i tried, honestly not sure how to use them and couldnt get either to work;

 

 

var delay = 500; /* milli seconds */
function attachHooks() {
   var menu = document.getElementById("navi");
   var menuItems = menu.getElementsByTagName("ul.navi li ul");
currentHover = menuItems[0];
   for (var i = 0; i < menuItems.length; i++) {
       menuItems[i].onmouseover = function () {activateMenuWithDelay(this);};
       menuItems[i].onmouseout = function () {deactivateMenuWithDelay(this);};
   }
}

function activateMenuWithDelay(ele) {
if(ele.timer) {
       clearTimeout(ele.timer);
}
ele.timer = setTimeout(function(){activateShowMenu(ele)}, delay);
}



function activateShowMenu(ele) {
var parent = ele;
   parent.className = "showMenu";
}

function deactivateMenu(ele) {
   var parent = ele;
   parent.className = " ";
}

function deactivateMenuWithDelay(ele) {
if(ele.timer) {
       clearTimeout(ele.timer);
}
   ele.timer = setTimeout(function(){deactivateMenu(ele)}, delay);
}

function initMenuDelay() {
attachHooks();
deactivateMenu();
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
 	window.onload = func;
} else {
 	window.onload = function() {
 	oldonload();
 	func();
 	}
}
}

addLoadEvent(attachHooks);

 

 

 

 

<script type="text/javascript">

sfHover = function() {
     var sfEls = document.getElementById("navi").getElementsByTagName("li");
     for (var i=0; i<sfEls.length; i++) {
           sfEls[i].onmouseover=function() {
                 this.className+=" sfhover";
           }
           sfEls[i].onmouseout=function() {
                 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
           }
     }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

 

I was also thinking that instead of the second list showing when they hover over the first, it would be much better if it showed after they clicked the first part, then it doesn't disappear until they click another. Any help is appreciated!

Link to comment
Share on other sites

Off topic... Ben do you see the 1px off sprite buttons? Like the "add reply" at the top.

 

OP, I looked into this a lot a little while back and couldn't get it accomplished. I narrowed it down to these two plugins. http://users.tpg.com.au/j_birch/plugins/superfish/ and http://cherne.net/brian/resources/jquery.hoverIntent.html

 

I'll play along though because I too would like to add this to one of my demos.

Edited by Eric
Link to comment
Share on other sites

A quick response for you... Basically, in order to do what you have in mind, you'll need to drop the CSS based menu you are using that's controlling when the submenus appear and disappear, and use something that's Javascript based instead. Since the show/hide effect is currently being controlled with CSS, I believe that trying to add a javascript-based delay on the menu hiding won't do any good. I would suggest making the submenu a bit taller -- giving it a bit more space above and below the menu will make it easier for visitors to use.

 

My skills with plain Javascript aren't that good to be honest. This is something quick and simple with jquery (a library that basically extends the functionality of Javascript) that will show/hide the menus on click, and they won't disappear until another item has been clicked on:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script type="text/javascript"> 
		jQuery(function($) { 
			$('#menu a').click(function() { 
				$('#menu .sub').hide();
				$(this).next().show();
				return false; 
			});
		}); 

	</script>
</head>
<body>

<ul id="menu">
	<li><a href="#">Nav Item</a>
		<ul class="sub" style="display:none;">
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
	<li><a href="#">Nav Item</a>
		<ul class="sub" style="display:none;">
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
	<li><a href="#">Nav Item</a>
		<ul class="sub" style="display:none;">
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
</ul>

</body>
</html>

 

This is one way to go, but if you only use jquery for one small element on the page, it's a bit of a waste, since you force the user to download a 70kb library that will only be used once. You should be able to do this with plain Javascript, I'm just not sure how without spending a lot of time on research unfortunately. It's possible that someone with more Javascript knowledge can help you out here... if not, I'd suggest looking around for a Javascript menu script that activates on click.

Link to comment
Share on other sites

I highly doubt you want to redo your menu (with js based or this) but this is cool and food for thought. Pure css click based menu http://www.visibilityinherit.com/projects/popup-menu-demo4.php I have a prettier one at home but havnt uploaded it yet.

 

In the meantime you could add more bottom padding to that sub menu to make it easier to stay put.

Edited by Eric
Link to comment
Share on other sites

I highly doubt you want to redo your menu (with js based or this) but this is cool and food for thought. Pure css click based menu http://www.visibilityinherit.com/projects/popup-menu-demo4.php I have a prettier one at home but havnt uploaded it yet.

 

That's an interesting pure css click menu, Eric, but I notice that IE has to use ActiveX which is javascript.

 

It's important, therefore, to have an alternative menu or site map with conventional links as some people have ActiveX disabled by their IT department or just prefer to have it disabled and won't realize that it's needed.

Link to comment
Share on other sites

Thanks John. One thing I can't do with it though is make it have a third level popup. By adding hover to the second level I am able to popup the third level. But then it's not right. Depending, then you have to click to go out, unhover to lose the third, and click close to lose the second. If you could figure a way to click out and click close to come back in that would be cool...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...