Преобразование меню в выпадающий список на маленьких экранах

[gok]

Преобразовывани меню в сайта в стандартный системный дропдаун-дикое и неправильное решение, это видно и по скриншоту в статье.
Правильное решение реализовано на сайте сюрфейса surface.com

[UksusoFF]

Может и правильно, но с момента нажатия до появления секунд 30 прошло.

[matiouchkine]

Преобразовывание меню на surface.com — дикое и неправильное решение, это очевидно. Правильное решение — это преобразовывание меню в сайта в стандартный системный дропдаун.

Это утверждение ничем не лучше вашего. Мне лично абсолютно все равно, как оно выглядит. Системный дропдаун — это удобно. А сюрфейс — это еще одно «охтыёрштвоюмедь, что это?!».

[gok]

Применяя решение типа как на surface.com я, как разработчик сайта, имею контроль над внешним видом и поведением этой секции, и потому удобство работы с сайтом и впечатления пользователей зависят от меня. Полагаясь на системные контролы, я абсолютно теряю контроль над внешним видом и поведением, а следовательно-не могу влиять на впечатления пользователей. И если косой индиец реализовал системный дропдаун понятной только ему логикой — я не хочу отдавать пользователя моего сайта в руки этого индийца.

Кроме того, переключение между абсолютно разными интерфейсами/дизайнами заставляют пользователя лишний раз думать и адаптироваться. И системные контролы содержат лишние ненужные элементы, это видно и на скрине в статье

Ну и банально невозможно отобразить двухуровневое меню.

[matiouchkine]

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

Ну да. Этого-то и хочется избежать ;-)

Пользователь всегда лоялен своей привычной теме. И не всегда его представления о прекрасном совпадают с вашими.

Мне-то как раз нравятся всякие плюшки. Но я знаю массу людей, которых испугает сюрфейс. И ни одного, которого испугает привычный контрол, знакомый по всем остальным приложениям.

А двухуровневое меню — вообще страшное зло. Если бы у меня была волшебная палочка, я бы начал исправление мира с отмены двухуровневых меню.

[gok]

Но я знаю массу людей, которых испугает сюрфейс.

Причем здесь сюрфейс? мы обсуждаем не сюрфейс, а решение, примененное на его промо-сайте.

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

… и примененный вообще вне рамок привычного использования? Не припомню ни одного приложения, где бы дропдаун использовался в качестве меню. Не очень-то очевидно для пользователя получается.

[macik_spb]

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

[gok]

например у динозавра?

[macik_spb]

Просто не надо считать себя умнее всех…

Это я не о вашем комментарии, а о стремлении некоторых авторов сайтов навязать пользователям «свое видение», установив определенное разрешение экрана, или использую только определенную технологию доступную не на всех устройствах.

К тому же, такие понятия как «accessibility» и «graceful degradation» никто не отменял.

[gok]

Не спорю, но забота о меньшинстве хороша в меру, иначе мы вернемся к верстке сайтов таблицами

[gok]

сори, дубль

[s1im]

Жесть, до чего падает уровень хабра. Для кого статья? Начинающим верстальщикам больше пригодилась бы статья об основах адаптивной верстки под различные устройства. Опытные верстальщики это все и так знают.

[s1im]

Кстати, вот как выглядит сайт из статьи в ie9:

Скриншот 111 Кб

[CAJAX]

Я без JS обошелся. Можно на yougo.fr/ посмотреть после логина через OpenID.
Хотя тестировал только под андроидом, возможно на iOS будет криво работать.

[CAJAX]

Вобщем вот так выглядит в момент нажатия на один из пунктов меню

[lolmaus]

Под iPhone/iPod это не заработает, но есть решение:

niteodesign.com/web-design/iphone-ipad-ios-and-the-css-hover-event/

[CAJAX]

Проверил только что на iOS6, работает с одним отличием от андроида — меню не закрывается при нажатии на пустое пространство на странице. Только при явной потере фокуса при клике по другой ссылке/кнопке.

[kovalevsky]

А я вот на люблю на меленьком экране дропдауны. По-моему жутко неудобно.

[KidsKilla]

Да, имхо на малых экранах лучше что-то типа аккордеона вместо дд.

[de1vin]

На многоуровневых меню такой список будет выглядеть кашей.

[Zippovich]

помоему самому такое придумать и сделать быстрее чем статью читать

[kolyuchii]

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

[KidsKilla]

Если уж JS, почему бы весь дом помимо селекта не строить им же?!

[yurik417]

Есть еще такие плагины:
Для одноуровневого меню masscode.ru/index.php/k2/item/40-limenurespeasy
И для меню с бесконечной вложенностью masscode.ru/index.php/k2/item/41-limenuresphard

[vc54]

А нельзя обойтись без дублирования ссылок в коде?

[Nnear]

quickdoc.ru — главное меню сайта.
Мы обошлись. Можно всё это сделать на чистом css без дублирования ссылок (у нас js применяется только для того, чтобы меню открывалось по нажатию на кнопку — такое требование было).

[theillarionov]

Читайте в следующих выпусках из цикла «Занимательные техники на Хабре»:

• учимся изменять размеры шрифта на всем сайте используя em;
• чудеса вертикального выравнивания на чистом CSS;
• фантастическая гибкость использования вложенных селекторов.

Хабр, что ты делаешь…

[Supercharged]

Меню из пяти пунктов, которое бы спокойно влезло даже в самый маленький экран, преобразовали в SELECT, где нужно сделать 3 клика для перехода… Сомнительно.