Отзывчивые боковые панели - Как можно достичь?

Question

Я готов сделать что-то вроде того, что сделал TNW. Если вы видите на экране < 900px, он скрывает навигацию по боковым колонкам и показывает возможность спускаться вниз. Я знаю, что они используют Media Queries, но css выглядит довольно большим и сложным для меня, и я не уверен, что он делает все с помощью только запроса Media или параметра изменения размера браузера.

Что такое минималист и легко достичь этого варианта. Моя единственная задача состоит в том, чтобы показать этот вариант для экранов меньше, чем 800px

Answer 1

@ Ани прав о нескольких вещах. Определенно убедитесь, что у вас есть тег viewport и, конечно, используйте медиа-запросы для управления вашим CSS при различных ширинах видовых экранов.

Однако вам действительно не нужны JS, которые они разместили. Это также не самая лучшая идея использовать .resize. Вместо этого используйте что-то вроде mediaCheck, которое использует matchMedia под капотом, чтобы условно выполнить JS на основе медиа-запросов. Если вы должны использовать .resize для чего-то, используйте что-то вроде Cowboy's Throttle plugin, потому что каждый браузер обрабатывает событие resize по-разному.

Отличный учебник по внедрению навигации вне холста (например, TNW) - over at Smashing Mag. По существу, создайте свои стили с помощью min-width запросов (от самых маленьких до самых больших) и используйте только JS для управления состоянием навигации на определенных контрольных точках.

Answer 2

лучшим вариантом является CSS, это довольно просто:

CSS:

sidebar{ 
    //your css 
} 

@media only screen and (max-width:800px){ 
    sidebar{ 
     your css for 800width 
    } 
} 

Кроме того, не забудьте добавить мета-тег :

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

при использовании JQuery: Это не является предпочтительным, но если вы не хотите использовать CSS то:

$(document).ready(function() { 
    responsive(); 
    $(window).resize(function() { responsive(); }); 
}); 

function responsive(){ 
    var winWidth = $(window).width(); 
    if(winWidth < 800) { 
     // do stuff here 
    } 
    else{ 
    } 
}