2015-12-20 6 views
0

Я создал собственное мобильное меню для своей 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 и сдвинув закрыло меню?

Заранее благодарен!

+0

Можете ли вы опубликовать скрипку (полный и работает), чтобы нам было легче ответить? –

+0

Допустимо ли опубликовать ссылку на HTML-страницу на моем собственном сайте? Не знаете, как включить содержимое бутстрапа в JsFiddle. –

+0

Привет, вот ссылка на страницу - http://www.mike-upjohn.co.uk/projects/new-site/ Если вы ограничите размер экрана, вы увидите меню гамбургера в левом верхнем углу страницы. Откройте меню, а затем измените размер окна на рабочий стол, и вы увидите, что я установил его для отключения мобильного меню. Есть ли лучший способ сделать это, чем через вышеприведенный код, проверяя ширину более или менее 750 пикселей? –

ответ

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

+0

Спасибо, я попробую сегодня вечером и отметьте это как ответ, если это сработает. Спасибо за поддержку! Я новичок в бутстрапе, но до сих пор жизнь стала намного проще. –

 Смежные вопросы

  • Нет связанных вопросов^_^