CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
Obsivus
Obsivus

Reputation: 8359

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.

The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.

Here is the code and example try it out, any solutions is appreciated!

http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu

Thanks in advance!

Upvotes: 2

Views: 2647

Answers (7)

Joshua Pack
Joshua Pack

Reputation: 910

Example: http://jsfiddle.net/nPdNd/40/

Using jQuery

$(document).ready(function(){
    var clearli;
    $(".test").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('current');
        $(this).addClass('current');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('current');
        }, 500);
    });
});

Changed CSS

ul#nav li:hover > ul { to ul#nav li.current > ul {

ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {

EDIT: I changed the selector due to a bug to .test and added class test to the <li>

EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.

Upvotes: 1

zeel
zeel

Reputation: 1130

CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.

https://developer.mozilla.org/en/CSS/transition-delay

Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.

Upvotes: 0

lakshmi priya
lakshmi priya

Reputation: 159

Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....

Upvotes: 0

ShibinRagh
ShibinRagh

Reputation: 6656

Please add this script in you page , This is easy way Step 1-

Add comon jquery in you page

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

Step 1- Add this script in your page - 

<script type="text/javascript">
jQuery(document).ready(function() {
            $('ul#nav li').hover(function()
                          {
                          $(this).find('ul').stop(true,true).slideDown()
                          },
                          function()
                          {
                          $(this).find('ul').stop(true,true).slideUp()
            });
});

</script>

I do have little changes in your css

Demo http://jsfiddle.net/nPdNd/28/

your code (li:hover)not work ie6 , did u check it ?

Upvotes: 0

Florian Margaine
Florian Margaine

Reputation: 60835

Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/

Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.

Upvotes: 0

Elen
Elen

Reputation: 2343

this is ONLY an example - http://jsfiddle.net/nPdNd/22/

i would suggest you experiment yourself, until you get a desired result

this example is based on mouseenter/mouseleave events:

$("#nav li").mouseenter(function(){
   $(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
   $(this).children('#sub').hide("slide", { direction: "up" }, 300);
});

it is also uses JQuery UI

Upvotes: 0

Oleg
Oleg

Reputation: 9359

Multiple solutions exist to address your problem:

  1. Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):

    http://www.w3schools.com/css3/css3_transitions.asp

    https://developer.mozilla.org/en/CSS/CSS_transitions

    http://www.w3.org/TR/css3-transitions/

  2. If you have jQuery, you can use .animate() to do the same thing:

    http://api.jquery.com/animate/

    Take a look at .stop() too:

    http://api.jquery.com/stop/

  3. If all else fails, you can try playing around with setTimeout();

    https://developer.mozilla.org/en/DOM/window.setTimeout

    http://www.w3schools.com/js/js_timing.asp

Upvotes: 1

Related Questions