Как стать автором
Обновить

Комментарии 40

А без JS, CSS и HTML? =)
В идеале только CSS и HTML но и JS вполне разумно использовать.
jQuery не нужен.
Здесь не нужен ни jquery, ни яваскрипт вообще.

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

nav > input { position: absolute; left: -9999px; }
nav > input:checked + ul { display: block; }
Чёрт, хабр съел теги. Перед смиском добавить чекбокс, ссылку заменить на label.
А если человек откроет сайт в ие7-8 в уменьшенном окне (ну вот вдруг), то функционал сломается.
Такие «вдруг» нерепрезентативны. Но если очень хочется, можно и продублировать на яваскрипте.
А если слон поедет на трамвае, трамвай тоже сломается…
Хороший способ! Я делал с помощью ссылки, :target и CSS transition. Но без JS меню не уезжало обратно.
Как-то много кода и мало текста. Ну можно ещё и флэш сделать и не париться, тоже будет везде отображаться флэш плеером.
Под везде вы наверное iOS устройства подразумеваете?
Я вижу по первой ссылке Mac OS. Flash не работает на устройствах iOS.
Вы еще не проснулись, напишите оправдательный комментарий через пару часиков.
Извините не совсем понял к чему вы?
Я написал своё мнение о статье, и предложил альтернативный вариант. Мне показалось, что более развёрнутые комментарии статье не помешали бы.
Вы написали о решении на флеше, а флеша нет на всех мобильных устройствах (iOS в целом, Android последних версий, Windows Phone, Symbian, etc), только у единиц пользователей. А речь идет о создании универсального меню для настольных и мобильных клиентов.
Вместо clearfix в данном случае можно использовать overflow:hidden для ul
В Fx15 меню не ужалось до одного столбца, в IE8 вообще ничего не работает, меню только для большого экрана, в хроме порядок. Иконка вообще нигде не показывается.
странно, у меня в Firefox 15 ужалось.
Если количество пунктов нечетное, в 2 колонки не красиво будет.
Можно пустую плашку показывать)
ну принцепе дельный цсс буду иметь ввиду.
но. всетаки мне кажется для мобильных версий надо делать отдельные страницы и там уже пытаться вписаться в отдельные экраны.
Суть адаптивного дизайна как раз в том, чтобы сделать одну страницу, которая будет адаптироваться к разным устройствам.
вы определенно правы. в теории так и есть. но реальность такова что полностью адаптивный дизайн может получится неоправданно трудозатратным
Думаю, что создавать отдельную страницу для разных устройств — более трудозатратная работа. Представьте, что у вас на сайте 50 динамических страниц и вам нужно сделать вариант для экрана, для планшета и для смартфона (три варианта). в результате получается 150 страниц. Когда нужно что-то поменять на одной странице — это нужно сделать на трех страницах. в общем вот такое направление мыслей. Кроме того, наверное, не случайно, появилась тенеденция делать сайты адаптивными — значит этот подход привлекает все большее число разработчиков.
Все же адаптивный дизайн не панацея. Скорее даже, адаптивную верстку можно применять в достаточно ограниченном пространстве тематики сайтов
собственно об этом и я.
я не говорил про 150 дизайнов я сказал про 2 варианта страницы
1. для десктопнях браузеров.
2. адаптивный для мобильных устройств.

вы реальные вебклиенты\сайты делали? есть случаи где для десктопа функуилнальность вразы больше чем для мобылы и таких случаев большинство. для мобилы имеем информативную функциональность из серии буть в курсе или сделай что то простое. (ибо больше с мобилы просто не удобно) для десктопа всякие настройки и конфиги. сайты типа домашней страницы или того же баша по сложности вертски приближающихсяк нулю не стоит сравнивать со всеми вместе. для простых сайтов разумеется проще сделать полностью адаптивный дизайн
ну принцепе дельный цсс буду иметь ввиду.
но. всетаки мне кажется для мобильных версий надо делать отдельные страницы и там уже пытаться вписаться в отдельные экраны.
Мне казалось, школьные каникулы закончились?
А почему сначала идет «media screen and» а потом «media only screen and»? Эта какая-то особенность адаптивной верстки? Что будет если в первом правиле добавить only или убрать у следующих?
only не нужен
Может я чего-то не понимаю, но разве display:inline + float:left не избыточно?
Opera 12.02 — меню сказало: «досвиданья» и скрыло от меня текст пунктов
Интересно, а почему меню получило мобильное представление на телефоне с разрешением экрана 768х1280?
Потому что для мобильных устройств включается масштабирование
Каким образом?
Минусануть, вместо того, чтобы нормально пояснить — типичная позиция хабра-жителей.
ОК :-)
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.