Is it possible to easily add a jquery/javascript mouseover delay to css only drop down menu?

Question

Is it possible to add a mouseover delay to a pure css drop down menu (as to not annoy the user when moving mouse to another link location on the page) using a jquery or javascript routine?

Most all of the material I have searched on this site and google, recommend going to a jquery or javascript type menu. I would like to stay with a pure css menu if possible, for search engine SEO purposes mainly.

I have tried adding a few jquery timeout routines to my 'div' and top-level 'ul' but to no avail.

LINK TO CODE: http://jsfiddle.net/2fc3W/1/

My CSS is:

<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li li:hover > a{border:none;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>

My HTML is:

<div id="menubar">
<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
</ul>
</div>

Thanks for any advice in guiding me in the right direction.

I used jQuery for the hover intent jsfiddle.net/tjfogarty/2fc3W/3 — TJ Fogarty
– TJ Fogarty, Commented Mar 8, 2013 at 22:41
@RustyJeans I edited the title sorry. What I was meaning to get across was that my menu is currently not using jquery/javascript it was only css. — Rodney
– Rodney, Commented Mar 8, 2013 at 22:52
CSS3 transition will allow you to add a delay as well as an animation, but is not supported in IE9 or older. — Mooseman
– Mooseman, Commented Mar 8, 2013 at 22:55

TJ Fogarty · Accepted Answer · 2013-03-08 22:55:15Z

2

Here's the JavaScript/jQuery version: http://jsfiddle.net/tjfogarty/2fc3W/3/

And the CSS version: http://jsfiddle.net/tjfogarty/2fc3W/4/

Note, I just used the -webkit- vendor prefix for the animations. As well, you have to watch out for browser compatibility for CSS animations.

-webkit-animation: showNav 0.4s forwards;
-webkit-animation-delay: 0.5s;

answered Mar 8, 2013 at 22:55

TJ Fogarty

1611 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rodney Over a year ago

I think one of these is going to work for me. One other question, where would I specify the color: and background: to prevent the menu from appearing to change on a quick mouse over? Notice how right now it changes the top level as it would when you intentionally mouse over. I tried adding it in the new lines you added but that didn't work. Thanks.

TJ Fogarty Over a year ago

You mean something like this? jsfiddle.net/tjfogarty/2fc3W/5 I had to define a new animation. I'd include a fallback as well for unsupported browsers if you're going to rely on CSS3 for this :)

Rodney Over a year ago

Yes, but notice what has happened to the slide out when you mouseover the Press link?

Rodney Over a year ago

I have decided to go with the JavaScript/JQuery version because it seems to work best in live environment. I was wondering, is there a way to implement in the Javascript/JQuery version the fix you did here: jsfiddle.net/tjfogarty/2fc3W/5 ?

Patrick M · Accepted Answer · 2013-03-08 22:57:13Z

1

It's possible without using jQuery or Javascript, but you have to use CSS3 (or the browser-specific css3-like rules, e.g. -webkit, -ms etc.). There's a site out for building your own such menus from a gui. I've not used it (or even downloaded it yet), but their demos blew my mind a while ago:

http://css3menu.com

Actually a lot of sites now:

https://www.google.com/search?q=css3+menu

answered Mar 8, 2013 at 22:57

Patrick M

11.1k9 gold badges74 silver badges105 bronze badges

Collectives™ on Stack Overflow

Is it possible to easily add a jquery/javascript mouseover delay to css only drop down menu?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related