Я создал собственное мобильное меню для своей 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 и сдвинув закрыло меню?
Заранее благодарен!
Можете ли вы опубликовать скрипку (полный и работает), чтобы нам было легче ответить? –
Допустимо ли опубликовать ссылку на HTML-страницу на моем собственном сайте? Не знаете, как включить содержимое бутстрапа в JsFiddle. –
Привет, вот ссылка на страницу - http://www.mike-upjohn.co.uk/projects/new-site/ Если вы ограничите размер экрана, вы увидите меню гамбургера в левом верхнем углу страницы. Откройте меню, а затем измените размер окна на рабочий стол, и вы увидите, что я установил его для отключения мобильного меню. Есть ли лучший способ сделать это, чем через вышеприведенный код, проверяя ширину более или менее 750 пикселей? –