jquery - 我希望在菜单 slider 向下时将我的内容向下推

Question

我希望在单击“菜单”按钮时将我的网页内容向下推，并且菜单会向下滑动，我已尝试使内容位置相对没有定义的高度，但它仍然无法正常工作。

我的菜单被包裹在一个 ... 标签下并且有 CSS :

#wrapper {margin: 0px auto 0; width: 800px; }

我的内容包裹在 ... 标签和 CSS 下:

.container {
width: 100%;
position: relative;
}

我在菜单中使用 jquery，这是文档就绪操作:

$(document).ready(function(){
var menu = $('#menu')
$('#menu-trigger').click(function(event){
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
        $(this).removeClass("open");
    }
    else
    {
        menu.slideDown(400);
        $(this).addClass("open");
    }
}); });

Answer 1

只需添加一个“推送”类即可将容器拉下，并在菜单折叠时将其移除。

if (menu.is(":visible"))
    {
        menu.slideUp(400,  function() {
        $(this).removeClass("open");
        $('.container').removeClass("push");           
        });         
    }
    else
    {
        menu.slideDown(400, function() {
        $(this).addClass("open");
        $('.container').addClass("push");            
        });

    }

.push {    
    bottom: -150px !important;
}

不是最好的方法。但我希望它能为您完成工作。

这是 Fiddle link .希望对您有所帮助。

更新

您可以尝试添加 jquery 动画以使其看起来更流畅。

    if (menu.is(":visible"))
    {
        menu.slideUp(400,  function() {
        $(this).removeClass("open");
        $( ".container" ).animate({
         bottom: "+=50",    
        }, 1000, function() {
        // Animation complete.
        });              
        });         
    }
    else
    {
        menu.slideDown(400, function() {
        $(this).addClass("open");
        $( ".container" ).animate({
        bottom: "-=50",    
        }, 1000, function() {
        // Animation complete.
       });     

        });

    }

这是 fiddle

另一种方法是使用 jquery 在容器和菜单之间动态添加一个 div，设置它的高度并在菜单打开时向下滑动，并在菜单关闭时折叠它。您可以在现有 slideDown 函数的回调部分有效地执行此操作。

希望这对您有所帮助。