2

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!

4

7 回答 7

1

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

于 2012-04-20T09:25:37.003 回答
1

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.

于 2012-04-24T22:29:19.737 回答
0

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

于 2012-04-20T10:47:26.140 回答
0

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.

于 2012-04-21T21:34:27.277 回答
0

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 ?

于 2012-04-23T09:44:51.193 回答
0

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

于 2012-04-24T05:05:56.523 回答
0

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.

于 2012-04-25T00:05:29.477 回答