Создаем адаптивную навигацию на сайте

[pluser]

А без jQuery?

[anor]

А без JS, CSS и HTML? =)

[pluser]

В идеале только CSS и HTML но и JS вполне разумно использовать.
jQuery не нужен.

[friday]

Здесь не нужен ни jquery, ни яваскрипт вообще.

Перед добавить, ссылку #pull заменить на и добавить к стилям:

nav > input { position: absolute; left: -9999px; }
nav > input:checked + ul { display: block; }

[friday]

Чёрт, хабр съел теги. Перед смиском добавить чекбокс, ссылку заменить на label.

[Makito]

А если человек откроет сайт в ие7-8 в уменьшенном окне (ну вот вдруг), то функционал сломается.

[friday]

Такие «вдруг» нерепрезентативны. Но если очень хочется, можно и продублировать на яваскрипте.

[equand]

А если слон поедет на трамвае, трамвай тоже сломается…

[sergeisirik]

Как-то много кода и мало текста. Ну можно ещё и флэш сделать и не париться, тоже будет везде отображаться флэш плеером.

[Renius]

Под везде вы наверное iOS устройства подразумеваете?

[sergeisirik]

Ну, для начала http://www.adobe.com/products/flashplayer/tech-specs.html. Вот и под андроид есть http://www.softportal.com/software-23472-adobe-flash-player.html

[Renius]

Я вижу по первой ссылке Mac OS. Flash не работает на устройствах iOS.

[sergeisirik]

Извините не совсем понял к чему вы?

[sergeisirik]

Я написал своё мнение о статье, и предложил альтернативный вариант. Мне показалось, что более развёрнутые комментарии статье не помешали бы.

[snater]

Вместо clearfix в данном случае можно использовать overflow:hidden для ul

[psywalker]

Или решение Ильи Стрельцына (SelenIT2);)

[maxshopen]

В Fx15 меню не ужалось до одного столбца, в IE8 вообще ничего не работает, меню только для большого экрана, в хроме порядок. Иконка вообще нигде не показывается.

[xsubst]

странно, у меня в Firefox 15 ужалось.

[maxshopen]

[macik_spb]

Если количество пунктов нечетное, в 2 колонки не красиво будет.

[anor]

Можно пустую плашку показывать)

[bw3d]

ну принцепе дельный цсс буду иметь ввиду.
но. всетаки мне кажется для мобильных версий надо делать отдельные страницы и там уже пытаться вписаться в отдельные экраны.

[Razbezhkin]

Суть адаптивного дизайна как раз в том, чтобы сделать одну страницу, которая будет адаптироваться к разным устройствам.

[bw3d]

вы определенно правы. в теории так и есть. но реальность такова что полностью адаптивный дизайн может получится неоправданно трудозатратным

[Razbezhkin]

Думаю, что создавать отдельную страницу для разных устройств — более трудозатратная работа. Представьте, что у вас на сайте 50 динамических страниц и вам нужно сделать вариант для экрана, для планшета и для смартфона (три варианта). в результате получается 150 страниц. Когда нужно что-то поменять на одной странице — это нужно сделать на трех страницах. в общем вот такое направление мыслей. Кроме того, наверное, не случайно, появилась тенеденция делать сайты адаптивными — значит этот подход привлекает все большее число разработчиков.

[Makito]

Все же адаптивный дизайн не панацея. Скорее даже, адаптивную верстку можно применять в достаточно ограниченном пространстве тематики сайтов

[bw3d]

собственно об этом и я.

[bw3d]

я не говорил про 150 дизайнов я сказал про 2 варианта страницы
1. для десктопнях браузеров.
2. адаптивный для мобильных устройств.

вы реальные вебклиенты\сайты делали? есть случаи где для десктопа функуилнальность вразы больше чем для мобылы и таких случаев большинство. для мобилы имеем информативную функциональность из серии буть в курсе или сделай что то простое. (ибо больше с мобилы просто не удобно) для десктопа всякие настройки и конфиги. сайты типа домашней страницы или того же баша по сложности вертски приближающихсяк нулю не стоит сравнивать со всеми вместе. для простых сайтов разумеется проще сделать полностью адаптивный дизайн

[EzS]

ну принцепе дельный цсс буду иметь ввиду.
но. всетаки мне кажется для мобильных версий надо делать отдельные страницы и там уже пытаться вписаться в отдельные экраны.

Мне казалось, школьные каникулы закончились?

[Gorky]

А почему сначала идет «media screen and» а потом «media only screen and»? Эта какая-то особенность адаптивной верстки? Что будет если в первом правиле добавить only или убрать у следующих?

[lol2Fast4U]

only не нужен

[MagicWolf]

Может я чего-то не понимаю, но разве display:inline + float:left не избыточно?

[yurik417]

Opera 12.02 — меню сказало: «досвиданья» и скрыло от меня текст пунктов

[sergeyzwezdin]

Интересно, а почему меню получило мобильное представление на телефоне с разрешением экрана 768х1280?

[Makito]

Потому что для мобильных устройств включается масштабирование

[sergeyzwezdin]

Каким образом?

[sergeyzwezdin]

Минусануть, вместо того, чтобы нормально пояснить — типичная позиция хабра-жителей.
ОК :-)