Меню загрузочного мобильного меню Изменение размера рабочего стола

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> 

Это стандартный значок меню гамбургера, который появляется с Bootstrap на мобильном телефоне. Обычай мобильное меню выглядит следующим образом: -

<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'); 
} 
}); 

У меня есть проблема, хотя при повторной калибровки с мобильного телефона на рабочем столе - Я хочу, чтобы это мобильное меню (которые могут или не могут быть расширены в то время), чтобы скользить закрыты и основное содержание будет задвинута назад. Мобильное меню перемещается слева.

Я написал это, что прекрасно работает, но я чувствую, что это может быть довольно хаки.

$(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 на сайте тура. Вы должны это исправить.