Cliffo Posted April 3, 2010 Report Share Posted April 3, 2010 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! Quote Link to comment Share on other sites More sharing options...
Cliffo Posted April 4, 2010 Author Report Share Posted April 4, 2010 Little help please? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 4, 2010 Report Share Posted April 4, 2010 I'll look at this later today. It's apparently been a busy weekend -- not much activity on the forum the last two days. Quote Link to comment Share on other sites More sharing options...
Cliffo Posted April 4, 2010 Author Report Share Posted April 4, 2010 I understand, and sorry for the shameless bumb, i just have been getting a little frustrated trying to add this, being the last thing i need before i can move on to my next theme. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 4, 2010 Report Share Posted April 4, 2010 (edited) 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 April 4, 2010 by Eric Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 4, 2010 Report Share Posted April 4, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 4, 2010 Report Share Posted April 4, 2010 Off topic... Ben do you see the 1px off sprite buttons? Like the "add reply" at the top. I've tweaked the CSS. If you still have issues, let me know via PM so we don't go off topic here? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 4, 2010 Report Share Posted April 4, 2010 There has to be a way to have a basic css functionality and then the js iceing. I'm iternally bored, so I'll work on this again Quote Link to comment Share on other sites More sharing options...
Cliffo Posted April 4, 2010 Author Report Share Posted April 4, 2010 Okay that almost worked, seems the actual links wont direct anywhere though. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 4, 2010 Report Share Posted April 4, 2010 (edited) 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 April 4, 2010 by Eric Quote Link to comment Share on other sites More sharing options...
Cliffo Posted April 5, 2010 Author Report Share Posted April 5, 2010 Wow i feel dumb for not thinking of that, this was a rather useless adventure considering with enough padding it's easy to use. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 5, 2010 Report Share Posted April 5, 2010 Not dumb, for some reason I didn't think of the same thing on mine untill much later. Quote Link to comment Share on other sites More sharing options...
Cliffo Posted April 5, 2010 Author Report Share Posted April 5, 2010 Well thanks for the advice, i added a bottom padding and then a negative margin to the top with a top padding to fill that margin and it is perfect! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 5, 2010 Report Share Posted April 5, 2010 Okay that almost worked, seems the actual links wont direct anywhere though. Assuming you are talking about my example, yes, the links don't go anywhere. Just replace the href="#" values with your own link. Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 5, 2010 Report Share Posted April 5, 2010 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 5, 2010 Report Share Posted April 5, 2010 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... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.