Отзывчивая навигация

Question

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

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

Answer 1

Было бы гораздо проще в использовании CSS3 Media queries.

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

Answer 2

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

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

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

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

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

Надежда, что помогает :)

Answer 3

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

работы

Answer 4

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

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

Answer 5

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

Demo их, и вы можете скачать код тоже.