jQuery悬停下拉菜单全宽度大小 [英] jQuery Hover Drop-Down-Menu Full Width Size

问题描述

我在我的网站上有一个垂直菜单。现在我需要一个下拉系统在一些链接。

我看到这个例子在互联网上： http://jsfiddle.net/4jxph/3018/
但是我想要一个全宽子菜单。索尼的下拉系统是我想要的。
Sony的下拉系统： Sony
我一直在制作全宽尺寸下拉菜单。 br>
我的代码： http://www.jsfiddle.net/3aK9k/4。

所以我想要的是，当我悬停内容所以子菜单，并再次到菜单链接，向下滑动子菜单比子菜单应该有没有一些动作。

I have a vertical menu in my Website. Now i need a dropdown system in some links.
I've see this example on the internet: http://jsfiddle.net/4jxph/3018/ But i want a full width submenu. The Dropdown System of Sony is what I want. Dropdown system by Sony: Sony I've always craetet a full width size dropdown menu.
My Code: http://www.jsfiddle.net/3aK9k/4.
So what i want, when i hover the content so the submenu and again to the menu link which slidedown the submenu than the submenu should be there without some moves.

我希望我解释我想做什么。我认为这是可能的，但是压倒了我对JS和jQuery的知识。

I hope I've explain what i want to do. I think it is possible but that overwhelmed my knowledge of JS and jQuery.

任何人都可以告诉我怎么做？

Can anyone tell me how to that?

推荐答案

HTML

    <ul id="nav_menu">
    <li><a class="nav_menu_link nav">Home</a></li>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>

jQuery

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){    
    }
);

$('#nav_menu').hover(
    function(){
    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

FIDDLE

这篇关于jQuery悬停下拉菜单全宽度大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！