Bootstrap Mobile菜单调整大小到桌面

Question

我为我的HTML页面构建了一个自定义移动菜单。此移动菜单坐在所述内容的所述底部和被隐藏，直到使用以下选择： -

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" aria-expanded="false" id="mobile-navigation-toggle"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

这是与引导出现在移动的标准汉堡包菜单图标。定制移动菜单如下： -

<div id="menu" class="nav-collapse"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Home</a></li> 
    </ul> 
</div> 

然后我打开和关闭，因为我想它也该菜单JS功能，这工作得很好。

$("#mobile-navigation-toggle").click(function() { 
var expanded = $(this).attr('aria-expanded'); 

if(expanded == "true") { 
    $(this).attr('aria-expanded','false'); 
    $("#main").animate({marginLeft:'0px'},'slow'); 
} 
else { 
    $(this).attr('aria-expanded','true'); 
    $("#main").animate({marginLeft:'500px'},'slow'); 
} 
}); 

我虽然重新浆纱从移动到桌面时，一个问题 - 我想这个活动菜单（这可能会或可能不会在时间扩展），滑动关闭和主要内容滑回。移动菜单从左侧推入。

我已经写了这个，它工作正常，但我觉得它可能很hacky。

$(window).resize(function() { 
    var width = $(window).width(); 
    console.log(width); 

    <!-- Is there a better way of doing this? --> 
    if(width >= 750) { 
     $("#mobile-navigation-toggle").attr('aria-expanded','false'); 
     $("#main").animate({marginLeft:'0px'},'slow'); 
    } 
    <!-- End Is there a better way of doing this? --> 
}); 

有没有更好的方法来测试引导桌面/移动菜单是否比检查750的宽度和滑动菜单关闭显示？

在此先感谢！

Answer 1

您可以使用@media query来检测窗口宽度。

只需添加到你的CSS：

#main { 
    transition:all .3s ease; 
} 

@media screen and (min-width: 480px) { 
    #main { 
     margin:0 !important; 
    } 
} 

此外，您需要更改animate功能$("#main").animate({marginLeft:'0px'},'slow');到css - 的CSS transition约需动画照顾。

请注意，您在旅游网站中有#main夫妇。你应该解决这个问题。