Адаптивная навигация

Question

Я пытаюсь создать отзывчивую навигацию, похожую на Boostrap's , но у меня возникают некоторые проблемы. Вот что у меня сейчас: http://jsfiddle.net/apautler/eqAZz/. Может быть трудно сказать в примере, но навигация исчезает, когда вы переходите от экрана к экрану. Я знаю причину этого в том, что jQuery проверяет, не превышает ли размер экрана 992px при загрузке. Если это так, то скрывает навигацию. Затем при увеличении страницы навигация все еще скрыта. Мне нужно как-то сделать переоценку по мере изменения размера страницы. Я думаю, что есть функция jQuery resize (), но, похоже, это не сработало. Есть идеи?

Я также готов начать все сначала, если есть лучший способ его построить. Спасибо за помощь!

Answer 1

Было бы намного проще использовать CSS3 Медиа-запросы .

@media all and (max-width:500px) { 
     .navigation {display:none;}
}

Answer 2

Попробуйте этот учебник, ссылка: http://hightechnology.in/how-to-create-responsive-menu-2/

Демо-версия, и вы также можете скачать код.

Answer 3

вот основной обработчик изменения размера окна

$(window).resize(function(){
    var hideShow=($(window).width() < 992 ) ? 'hide' :'show';
    $('#nav')[hideShow]();
})

Answer 4

$(window).resize(function(){
if ($(window).width() < 992) {
$('#nav-primary').hide();
}
else {
$('#nav-primary').show();
}
});

работает

Answer 5

Попробуйте это:

http://jsfiddle.net/will/eqAZz/2/embedded/result/

Я не уверен, почему ты не мог заставить его работать. В JS fiddle вам придется взглянуть на полноэкранную версию.

Тем не менее, вы должны смотреть на медиа-запросы, используя CSS. http://www.w3.org/TR/css3-mediaqueries/

JavaScript не требуется!

Надеюсь, это поможет:)