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夫婦。你應該解決這個問題。