Question

我需要一个菜单/大型菜单，当下拉菜单在Facebook for Business菜单上打开时，会将内容向下移动：https://www.facebook.com/business 我在Avast上看到了同样的效果：http://www.avast.com

感谢您的帮助，非常感谢！

Answer 1

对于您想要的行为，您可以使用：JQuery的slideDown()函数。然后，您可以在菜单项上绑定mouseover和mouseout个事件，并调用slideDown和slideUp函数。

<强> Example in JSFiddle

<强> HTML：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active menu-item" data-menuItem="#getstarted">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                </li>
                <li class="menu-item" data-menuItem="#css"><a href="http://getbootstrap.com/css">CSS</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 menu-panel" hidden="" id="getstarted">
        <ul>
            <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
            <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
            <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
            <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
            <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>   
        </ul>
    </div>
    <div class="col-xs-12 menu-panel" hidden="" id="css">
        <ul>
            <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
            <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
        </ul>
    </div>    
</div>

<强> JavaScript的：

$(".menu-item").mouseenter(
    function(e){        
        e.preventDefault();
        e.stopPropagation();
        var $active=$(".active-menu-panel");
        $active.removeClass("active-menu-panel").hide();
        var selector=$(this).attr("data-menuItem");
        if($active.length){
            $(selector).addClass("active-menu-panel").show();
        } else {
            $(selector).addClass("active-menu-panel").slideDown();
        }
    }    
);

$(".menu-panel").mouseleave(function(){
    $(this).removeClass("active-menu-panel").slideUp();
});

将内容向下移动的Drupal下拉菜单

1 个答案: