Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 15
Меню не закрывается при клике "вне меню". А это довольно-таки, привычная вещь для пользователей, и является неотъемленной частью UX таких меню.
А вообще, на продакшене использовать "только css"-меню довольно затруднительно. Слишком много возможных "хотелок" приведут к переписыванию на javascript.
А если замените дефис на минус, выглядеть будет приятнее. Кстати, Accessibility тоже надо доводить до 100%
Меню не закрывается при клике «вне меню».А это довольно-таки, привычная вещь для пользователей,..Полностью согласен, в планах.
А если замените дефис на минусСпасибо за решение!
Accessibility не 100% так как загрузка каталога товаров через «яндекс поиск для им» который через iframe работает, а другой вид загрузки через json еще не настроен.
Меню не закрывается при клике «вне меню».А это довольно-таки, привычная вещь для пользователей
добавил для себя закрытие меню по клику вне меню — варианты на jquery и ванильном js — может кому еще пригодится.
vanilla ja
jquery
upd. только заметил, с 7 по последний дочерние элементы первого уровня, там где подменю начинают открываться слева, клик справа от меню не закрывает открытое меню, поскольку затрагивает дочерний элемент — промежуточный список.
Несмотря на то, что все элементы списка сдвинуты влево, пространство список занимает, поэтому надо будет доработать…
jQuery какой версии?
jQuery v1.6.4
нууу… 2011 года релиз. Там еще ie7 поддерживется, конечно это старая и медленная версия.
1. Меню такого объема лучше делать вертикальным: нет лимита по длине, избавляет от «Ещё...», можно интуитивно сортировать и фильтровать (расположив инпут/панель фильтров над меню). Плюс это позволит выполнить пункт 2.
2. Минимальные габариты кликабельной плашки желательно делать такими, чтобы туда влезал палец (48x48 px и более). Это очень сильно снижает количество мискликов и, след-но, отказов. На десктопе тоже! Не забывайте, что не все люди обладают точной моторикой и зрением, а с возрастом всё это проседает. Чем старше аудитория, тем критичнее размеры областей клика.
3. В идеале меню должно управляться и табуляцией. Включая перемещение по подпунктам с клавиатуры. У нас все забивают, но в зарубежных проектах это бывает базовым требованием. Там больше доля ридеров и всяких гаджетов, поэтому все помешаны на accessibility. В разметке желательно следить за семантикой (nav), в некоторых случаях внедрятьARIA-roles и т.д.
4. Нежелательно делать «выворотку» (светлый текст на темном фоне) для светлых тем. Контраст цветов фона и текста лучше держать повыше (примерно как у вас в выделенных пунктах).
5. Минимальный размер шрифта сейчас желательно делать минимум 16px для десктопа, причем брать гротески а не антиквы. Для сжатых и мелких гарнитур (Pt Sans и др) размер шрифта надо брать даже чуть больше — ~18 или выше.
6. В меню такой вложенности желательно показывать кол-во дочерних элементов и товаров, особенно если вы требуете полный клик, чтобы показать подуровень. Иначе у вас будут ситуации, когда человек делает 3-6 кликов, а в итоге оказывается в пустой или почти пустой подподкатегории, где нечего выбирать.
7. Желательно обрабатывать не только состояние hover, но и active и pressed/selected. Т.е. меню должно чем-то реагировать на нажатие и различать текущую цепочку навигации (на какой странице находимся) от простой подсветки пунктов при их просмотре (какой пункт меню под мышкой).
8. Не очень удачно делать два ряда горизонтальных меню друг под другом. См п.1.
9. Про скрытие меню по клику на оверлей (вне меню) уже написали выше. В идеале ещё по клавише Esc (и «назад» на телефонах)
10. В идеале (без прямолинейного сео) вложенность основного меню надо уменьшать до 1-2 уровней. А более глубокую рубиркацию показывать после перехода внутрь. Точкой входа в магазин почти всегда становится не главная, а внутренняя страница. Т.е. человеку, который пришел по запросу «Сантехника», выгоднее на первом же уровне (без кликов) показать Унитазы и Раковины, а не Инструмент и Краску. Верхний уровень на внутряках как раз лучше показывать по прямому запросу, то есть по клику на общую кнопку типа «Все рубрики», «Полный каталог» и т.п.
P.S. 36k — это не настолько много) Норма для большого тематического магазина. А ведь есть ещё гипермаркеты)
Успехов!
2. Минимальные габариты кликабельной плашки желательно делать такими, чтобы туда влезал палец (48x48 px и более). Это очень сильно снижает количество мискликов и, след-но, отказов. На десктопе тоже! Не забывайте, что не все люди обладают точной моторикой и зрением, а с возрастом всё это проседает. Чем старше аудитория, тем критичнее размеры областей клика.
3. В идеале меню должно управляться и табуляцией. Включая перемещение по подпунктам с клавиатуры. У нас все забивают, но в зарубежных проектах это бывает базовым требованием. Там больше доля ридеров и всяких гаджетов, поэтому все помешаны на accessibility. В разметке желательно следить за семантикой (nav), в некоторых случаях внедрятьARIA-roles и т.д.
4. Нежелательно делать «выворотку» (светлый текст на темном фоне) для светлых тем. Контраст цветов фона и текста лучше держать повыше (примерно как у вас в выделенных пунктах).
5. Минимальный размер шрифта сейчас желательно делать минимум 16px для десктопа, причем брать гротески а не антиквы. Для сжатых и мелких гарнитур (Pt Sans и др) размер шрифта надо брать даже чуть больше — ~18 или выше.
6. В меню такой вложенности желательно показывать кол-во дочерних элементов и товаров, особенно если вы требуете полный клик, чтобы показать подуровень. Иначе у вас будут ситуации, когда человек делает 3-6 кликов, а в итоге оказывается в пустой или почти пустой подподкатегории, где нечего выбирать.
7. Желательно обрабатывать не только состояние hover, но и active и pressed/selected. Т.е. меню должно чем-то реагировать на нажатие и различать текущую цепочку навигации (на какой странице находимся) от простой подсветки пунктов при их просмотре (какой пункт меню под мышкой).
8. Не очень удачно делать два ряда горизонтальных меню друг под другом. См п.1.
9. Про скрытие меню по клику на оверлей (вне меню) уже написали выше. В идеале ещё по клавише Esc (и «назад» на телефонах)
10. В идеале (без прямолинейного сео) вложенность основного меню надо уменьшать до 1-2 уровней. А более глубокую рубиркацию показывать после перехода внутрь. Точкой входа в магазин почти всегда становится не главная, а внутренняя страница. Т.е. человеку, который пришел по запросу «Сантехника», выгоднее на первом же уровне (без кликов) показать Унитазы и Раковины, а не Инструмент и Краску. Верхний уровень на внутряках как раз лучше показывать по прямому запросу, то есть по клику на общую кнопку типа «Все рубрики», «Полный каталог» и т.п.
P.S. 36k — это не настолько много) Норма для большого тематического магазина. А ведь есть ещё гипермаркеты)
Успехов!
Спасибо за подробные идеи!
1. Пробовал, на компьютерах очень много места занимает и далеко листать вниз. Даже если 2х уровневое делать то получается до 58 строчек 33+25 подкатегорий у нажатого пункта. Такое меню не устроило руководство.
2. Я бы с радостью крупней меню делал, но тогда будет полоса прокрутки, а при ней люди часто нажимают рядом с меню (а в этой ситуации меню должно закрываться Пункт 9)
3-5 согласен
6. Возможна ситуация: человек подумает что это не количество подпунктов, а количество товаров и тогда даже не нажмет на пункт меню. А подписывать что это количество категорий грамозко. У конечных категорий вполне можно добавить количество товаров в категории.
7-10. согласен, это очень нужно
P.S 36к это и есть гипермаркет. У Леруа Мерлен 30-44к в зависимости от города. У нас уже 37к
1. Пробовал, на компьютерах очень много места занимает и далеко листать вниз. Даже если 2х уровневое делать то получается до 58 строчек 33+25 подкатегорий у нажатого пункта. Такое меню не устроило руководство.
2. Я бы с радостью крупней меню делал, но тогда будет полоса прокрутки, а при ней люди часто нажимают рядом с меню (а в этой ситуации меню должно закрываться Пункт 9)
3-5 согласен
6. Возможна ситуация: человек подумает что это не количество подпунктов, а количество товаров и тогда даже не нажмет на пункт меню. А подписывать что это количество категорий грамозко. У конечных категорий вполне можно добавить количество товаров в категории.
7-10. согласен, это очень нужно
P.S 36к это и есть гипермаркет. У Леруа Мерлен 30-44к в зависимости от города. У нас уже 37к
В целом интересное решение.
Думаю не повредило бы еще заблокировать выделение текста внутри пунктов меню.
Думаю не повредило бы еще заблокировать выделение текста внутри пунктов меню.
Нуу даже не знаю, вроде бы уже всё давно придумано, вон теми же ситилинк и технопоинт\днс
Открытие меню по нажатию… Про меню с открытием при наведении: при открытие страницы 99% людей пересечет мышкой меню, что вызовет его незапланированное появление закрыв видимую часть экрана тем самым расстроив посетителя. Решить можно включив задержку при наведении (чтоб не открывалось сразу), но тогда меню «тормозное» становится.
Я бы все же сделал открытие по hover`у, а затем привел к нужному поведению через js. Тогда и проблем с закрытием меню при клике мимо меньше было бы. Плюс полностью рабочее меню да при условии выключенного js (хотя кто сейчас выключает js, кроме меня, не знаю)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Быстрое, удобное, адаптивное меню для 1075 категорий (36000 товаров)