admin管理员组

文章数量:1418136

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: / 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: .
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.

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?

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/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/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.

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?

  • javascript
  • jquery
  • html
  • css
  • drop-down-menu
Share Improve this question edited Mar 3, 2014 at 18:15 asked Mar 2, 2014 at 2:08 user2615031user2615031 7
  • What do you mean by without some moves? – Zword Commented Mar 4, 2014 at 9:42
  • One more question - Do you want exact output as the sony.de link given? – Zword Commented Mar 4, 2014 at 9:58
  • @Zword with "without some moves" i wanna say that the content have no animation. – user2615031 Commented Mar 4, 2014 at 10:26
  • I want this exact proportion to the drop-down menu of Sony, it need not be the same code. @Zword – user2615031 Commented Mar 4, 2014 at 10:29
  • So you dont want slidedown animation? – Zword Commented Mar 4, 2014 at 10:31
 |  Show 2 more ments

5 Answers 5

Reset to default 2

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

I have made slidedown in the fiddle which works exactly like sony.de:

Updated Fiddle(New)

HTML

<div id="menu">
<ul>
    <div id="mainMenu">
    <li class="menu1">Home</li>
    <li class="menu2">DropDown1</li>
    <li class="menu3">DropDown2</li>
    </div>
</ul>
    <div class="submenu menu2">
        <!--menu items-->
    </div>
    <div class="submenu menu3">
        <!--menu items-->
    </div>
</div>

CSS

html,body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#menu{
    position:relative;
    width:100%;
    height:80px;
    font-family:sans-serif;
}
#menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{
    display:inline-block;
    margin-top:0px;
}
#menu >ul {
    position:absolute;
    top:0px;
    z-index:100;
    list-style:none;
    padding:0px;
    font-size:18px;
    height: 80px;
    width: 100%;
    background: none repeat scroll 0% 0% #FFA500;
}
#menu ul>#mainMenu>li{
    padding: 29px;
}
#menu ul>#mainMenu>li:hover{
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all 0.2s ease 0s;
}
#menu .submenu{
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:white;
    border:1px solid black;
}

jQuery

var preClass="";
$('#menu>ul>#mainMenu>li').hover(function(){
    var curClass = $(this).attr('class');
    if(preClass!=curClass){
        $('.submenu[class*='+preClass+']').stop()
    .animate({'bottom':'0px'});
        $('.submenu[class*='+curClass+']').stop()
    .animate({'bottom':''+(-$('div[class*='+curClass+']').height())+'px'});}
    preClass=curClass;
});

$('#mainMenu').mouseleave(function(){
    preClass="";
    setTimeout(function(){
    if(preClass=="")
    $('.submenu').stop().animate({'bottom':'0px'});
    },350);
});

$('#menu').mouseleave(function(){
    preClass=""
    $('.submenu').stop().animate({'bottom':'0px'});
});

$('.submenu').hover(function(){
    preClass = $(this).attr('class').replace("submenu ","");
    $(this).css({'bottom':''+(-$(this).height())+'px'});
},
function(){
    if(preClass!=curClass){
    $(this).stop().animate({'bottom':'0px'});
    }
});

Fiddle with delay added like sony.de

Check your needed code jSFiddle

Download code file from Box

HTML Code

<ul id="nav_menu">
    <li><a class="nav_menu_link">Home</a></li>
    <li class="nav_menu_link_drop_1">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" style="display: none;">  
            <ul id="file_menu">
                <li><a href="#file">File</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#view">View</a></li>
                <li><a href="#insert">Insert</a></li>
                <li><a href="#modify">Modify</a></li>
                <li><a href="#control">Control</a></li>
                <li><a href="#debug">Debug</a></li>
                <li><a href="#window">Window</a></li>
                <li><a href="#help">Help</a></li>
            </ul>
        </div>
    <li class="nav_menu_link_drop_2">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" style="display: none;">
            <ul id="file_menu">
                <li><a href="#file">2 File</a></li>
                <li><a href="#edit">2 Edit</a></li>
                <li><a href="#view">2 View</a></li>
                <li><a href="#insert">2 Insert</a></li>
                <li><a href="#modify">2 Modify</a></li>
                <li><a href="#control">2 Control</a></li>
                <li><a href="#debug">2 Debug</a></li>
                <li><a href="#window">2 Window</a></li>
                <li><a href="#help">2 Help</a></li>
            </ul>
    </div>
</ul>
<script src="http://code.jquery./jquery-latest.min.js" type="text/javascript"></script>

CSS Code

* {   
margin: 0;
padding: 0;
}
#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: black;
    font-size: 18px;
    height: 0;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_link:hover .arrow.down {
    border-top-color: #FFF;
}

#content1:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content1, #content2 {
    width: 100%;
    height: auto;
    background: gray;
    display: none;
    position: absolute;
}

#file_menu {
    border: 1px solid #1c1c1c;
}

#file_menu li {
    width: 100%;
    height: 30px;
    background-color: #302f2f;
}

#file_menu li a {
    font-family: Arial;
    font-size: 14px;
    color:#FFFFFF; 
    font-weight: bold;
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
}

#file_menu li a:hover {
    color: #F00880;
}

JQuery

var link1 = $(".nav_menu_link_drop_1");
var link2 = $(".nav_menu_link_drop_2");
var content1 = $('#content1');
var content2 = $('#content2');

$(link1).hover(
    function(){ 
        $(content1).slideDown(350);
    },
    function(){
        $(content1).slideUp(350);
    }
);

$(link2).hover(
    function(){ 
        $(content2).slideDown(350);
    },
    function(){
        $(content2).slideUp(350);
    }
);

You can achieve that with only CSS. Cleaner, simpler.

Live demo here : http://jsfiddle/4jxph/3031/

Here's the modified CSS : 

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
    margin: auto;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
#button:hover .file_menu {
    max-height: 100000px; 
    opacity: 1;
}
ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    width:100%;
    border: 1px solid #1c1c1c;
    transition: all .2s;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

Because you want it, here's the JS solution (cleaner than other answer):

var link = $("li[class^=nav_menu_link_drop]");

$(link).hover(

    function(){ 
        var content = $(this).next('div[id^="content"]');
        $(content).stop(true).slideDown(350);
    },
    function(){
         var content = $(this).next('div[id^="content"]');
         $(content).delay(350).slideUp(350);


    }
);

Is that doing the job ? http://jsfiddle/3aK9k/27/

If I got you right you don't want the animation, for that simply set the animation time to 0. You dont need .stop() and you should consider using .hover() instead of mouseenter and mouseleave. Here is a link: http://api.jquery./hover/

Example:

$(link1).hover(
    function(){ 
        $(content1).slideDown(0);
    },
    function(){
        $(content1).slideUp(0);
    }
);

Here is your fiddle with updated code: http://jsfiddle/3aK9k/2/

EDIT: I just noticed but you have invalid html your div-tag is inside the ul-tag put it in your li... seriosly CHECK your markup... thats not the only wrong thing i noticed...

EDIT: Uhm... OK... maybe you should rethink your approuch, only because it works you shouldn't use invalid html

本文标签： javascriptjQuery Hover DropDownMenu Full Width SizeStack Overflow

版权声明：本文标题：javascript - jQuery Hover Drop-Down-Menu Full Width Size - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745280627a2651405.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。