Большой обзор красивых многоуровневых меню с codepen / Хабр
TeadonВремя на прочтение 4 мин
Количество просмотров 186KБлог компании mr. Gefest Разработка веб-сайтов *CSS *HTML *
Хабр, привет!
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным.
Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
Flat Navigation
Стильная навигационная панель с плавным подменю.
В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu — Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu — Menu Interaction Concept
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
Решение неплохое, но слишком уж много используется классов.
Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
http://codepen.io/cmcg/pen/ofFiz
П.
С.Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Вам интересны такие подборки по разным тематикам? (кнопки, вкладки, подсказки и так далее)
92.8% Да 503
7.2% Нет 39
Проголосовали 542 пользователя. Воздержался 61 пользователь.
Теги:- верстка сайтов
- css
- html
- js
- menu
- коллекция кода
- Блог компании mr. Gefest
- Разработка веб-сайтов
- CSS
- HTML
«Не путайте пользователя»: 14 элементов и 10 правил для эффективной навигации по сайту
Идеальная навигация держится на трех китах. Это:
- Дизайн
Дизайн необходимо продумать с учетом общепринятых элементов навигации.
- Удобство
Навигация должна быть интуитивно понятной. Перенасыщение меню ведет к дезориентации, рассеянному вниманию и уводит пользователя от основной повестки. На каждой странице должна быть своя навигация, позволяющая пользователю легко вернуться к предыдущему материалу или перейти на новый без потери логической связи.
- Структура
Структура составляется так, чтобы пользователь смог оказаться в нужном разделе максимум за несколько кликов. Не следует перенасыщать сайт несколькими навигационными слоями — расположение разделов должно быть предсказуемым.
Основные элементы навигации сайта
1.
Главное менюЭто ключевой пункт при разработке навигации. Лучше всего создать горизонтальное меню в шапке сайта — такой вариант привычнее для пользователя. Оптимальное число разделов в нем — не более 7. Для дополнительной информации можно использовать раскрывающееся меню с подразделами. Привлечь внимание к конкретным разделам и выделить активный раздел можно шрифтом или цветом.
Для обозначения меню можно использовать значок «гамбургер» — три горизонтальные черты. При нажатии на него пользователь видит пункты меню, которые до этого были скрыты.
Главное меню горизонтального вида отлично выделяется благодаря правильно подобранной цветовой гамме и структуре
2. Боковое меню
В него помещают подразделы, рубрики и дополнительную навигационную информацию. Как правило, оно размещается в левой части страницы и не дублируется во всех разделах сайта. Не стоит перенасыщать боковое меню, оптимальное количество разделов в нем — не более 10.
Пример неперенасыщенного меню с подразрелами слева
3. Иконки
Для визуальной привлекательности вместо текстовых ссылок можно использовать иконки: значок корзины для списка покупок, значок сердца для избранных товаров и т.д. Крайне важно здесь избегать иконок, непривычных для пользователя и выбранной категории.
Работа студии. Удобное меню слева представлено иконками и при наведении дублируется текстом
4. Карта сайта
На главную страницу можно добавить карту сайта — она содержит гиперссылки на все разделы и помогает пользователю мгновенно переходить на нужную ему страницу.
Карта сайта на главной странице. Отличный пример удобного размещения разделов
5. Поиск
Для некоторых ресурсов будет актуален поиск по ключевым словам. Его лучше разместить в главном меню и сделать постоянным навигационным спутником пользователя.
Светлый поиск является продолжением главного меню
6. Фильтрация и сортировка
Для более удобного поиска используйте фильтры — они помогают пользователю отметить нужные характеристики и быстро найти подходящий товар, не путешествуя по ненужным ему страницам и разделам.
Расширенная сортировка и фильтрация облегчают пользователям поиск
7. Раздел «О компании»
Данный раздел необходим для повышения доверия пользователей к вашей компании, его можно разместить в главном меню или футере.
Работа студии. Раздел «О компании» размещен в футере
8. Текстовые ссылки
Такие ссылки используют для пояснения информации и удержания внимания пользователя на сайте. Они могут как вести на другие разделы, так и открывать всплывающие окна.
Работа студии.
Текстовые ссылки органично смотрятся в тексте и не перегружают его
9. «Хлебные крошки»
Такое интересное название пришло к нам из известной сказки про Гензель и Гретель, в которой хлебные крошки указывали им путь. Это вспомогательные навигационные элементы в верхней части страницы — слева от того раздела, где сейчас находится пользователь. Они кликабельны и позволяют вернуться на один или несколько шагов обратно.
Ozon активно использует «хлебные крошки»
10. Призывы к действию
Для призыва к целевому действию можно использовать отдельную кнопку, ведущую в соответствующий раздел. Главное здесь — придерживаться логических взаимосвязей.
Работа студии. На сайте кнопки «Оставить заявку» расположены под каждым предложением компании
11. Кнопка возврата
На площадках с большим объемом информации (например, в интернет-магазинах) в шапке страницы можно разместить кнопку в виде стрелки, направленной вверх.
Она поможет пользователям быстро вернуться на предыдущую страницу, не прокручивая большие массивы данных.
Кнопка возврата крупно показана справа
12. URL-адрес страницы
Очень важно вынести в адресную строку названия разделов, чтобы пользователь мог понять, в какой части сайта находится сейчас. URL должен отражать суть конкретной страницы.
13. Визуальные эффекты
Не забывайте о важности визуальных эффектов. На кликабельных кнопках значок мышки должен визуально изменяться. Если мы используем лендинг, дизайнер может заложить визуальную навигацию при переходе от одного блока к другому — стрелку или перечисление блоков. Важно выделять разделы, где находится пользователь, другими цветами или подчеркиванием.
Кнопки с дополнительной анимацией привлекают внимание и увеличивают кликабельность.
Работа студии. Кнопка «Записаться» меняет цвет при наведении курсора.
На сайте реализованы различные анимационные эффекты
14. Футер
В этой области сайта дублируются разделы главного меню, располагаются контакты, документы, политика конфиденциальности и другая информация, диктуемая контекстом. Часто футер делают контрастным остальному сайту, но это отнюдь не обязательный прием. Здесь открывается большой простор для фантазии дизайнера.
Работа студии. Футер включает все необходимые разделы
Важные правила удобной навигации
1. Не утруждайте пользователя новыми вкладками
Страницы не должны открываться в новых окнах. Это неудобно для пользователя, так как увеличивает количество вкладок в браузере и усложняет ориентацию на сайте.
Удобно сделана странца параметров. Не нужно переходить в новые разделы — достаточно навести курсор на часть объекта
2. Располагайте контакты на видном месте
Не размещайте контактную информацию далеко от пользователя, привычное расположение — в шапке сайта или футере.
А адрес лучше расположить в футере или на отдельной странице.
Работа студии. Удобное расположение контактной информации. Пользователь видит номер и может связаться сам или «Заказать звонок»
3. Не прячьте меню
Меню должно располагаться на видном месте, не стоит прятать его в «бургер». Желательно закрепить меню и сделать его неизменным при переходе на другие страницы, чтобы ничего не путало пользователя.
Яркая, чистая посадочная страница, но нет закрепленного меню. Оно вынесено в нетрадиционный бургер, что может вызвать затруднения у пользователя
4. Используйте подсказки
В случаях, когда структура меню сложная и перенасыщенная, можно использовать систему информационных подсказок, которые обычно закрепляются в главном меню справа. Они открываются во всплывающем окне и преследуют пользователя при переходе на любую страницу.
Подсказки закреплены в главном меню
5.
Добавляйте стимулирующие разделыДля увеличения времени, проведенного на сайте, часто вводят дополнительные навигационные категории — рекомендованные товары, недавно просмотренные страницы, полезные статьи и другие потенциально интересные пользователю разделы.
Работа студии. Возможность прочитать о компании в СМИ
6. Помните про информационные ссылки
Самое удачное место для размещения информационных ссылок — футер. В него обычно помещают то, что не поместилось в главном меню. Это могут быть документы, адреса, вакансии, доставка и другие второстепенные разделы.
Работа студии. Информативные ссылки для больших объемов информации
7. Не забывайте про правило логотипа
Ваш логотип должен вести на главную страницу — это не только удобство, но и привычка среднестатистического пользователя.
Работа студии.
Пользователь всегда окажется на главной странице, нажав на логотип
8. Группируйте страницы
Чем правильнее сгруппирована информация, тем лаконичнее и понятнее будет навигация. Не дробите разделы, которые можно поместить в один. Если у вас группа компаний, не перечисляйте каждую в отдельном разделе — разместите всю информацию на одной странице «О группе компаний».
Работа студии. При такой группировке в один блок помещается больший объем информации
9. Расставляйте приоритеты
Продумайте первичные и вторичные элементы. Например, первичным будет главное меню, вторичным — боковое и «хлебные крошки». Не путайте пользователя и выносите в главное меню только основные разделы.
Работа студии. Правильно расставленные акценты на главной странице
10. Используйте дизайн
Не забывайте выделять анимацией, цветом или шрифтом разделы и элементы сайта.
Например, ссылки лучше подчеркивать, а «хлебные крошки» — делать большим размером шрифта, нежели основной текст. Пробелы между блоками лендинга не стоит делать слишком большими, чтобы не утомить пользователя долгой прокруткой.
Курсор мыши и кнопки также должны участвовать в дизайн-концепции и подталкивать пользователя к целевому действию.
Работа студии
Правильная навигация сайта содержит в себе гораздо больше нюансов, чем можно описать в одной статье. Главное — помнить, что определяющим фактором при ее разработке является логика и пользовательский опыт.
Попробуйте поставить себя на место пользователя и определить, как ему будет удобнее передвигаться по вашему ресурсу.
Креативные дизайн-эксперименты — это замечательно, но перед их применением стоит учитывать привычные приемы, используемые пользователем в данном сегменте. Составьте список сайтов, на которых вы чувствовали себя наиболее комфортно, и используйте их опыт для вашего собственного ресурса.
Как достичь максимума
- Возьмите за основу краткость: не путайте пользователя и избегайте лишнего в навигационной панели.
- Помните, что пользователь обращает больше внимания на первый и последний пункты панели навигации и просматривает меню слева направо. Значит, в центральной части меню можно располагать наименее значимые ссылки.
- Продумайте «план отступления» — дайте пользователю возможность вернуться к предыдущему разделу несколькими способами, а не только путем нажатия кнопки «Назад» в браузере.
- Обязательно проверьте адаптацию навигации под мобильные устройства: располагаются ли все кнопки на месте, не выходят ли за рамки экрана, удобно ли на них нажимать.
- Обращайте внимание на то, как долго люди задерживаются на вашем сайте. Если пользователь может быстро найти у вас то, что ему нужно, с большой вероятностью он станет вашим клиентом.
Фото на обложке: Shutterstock / William Potter
дизайнов кнопок меню, тем, шаблонов и загружаемых графических элементов на Dribbble
- Просмотр переключателя рабочей области
Переключатель рабочего пространства
- Просмотр компонентов меню пользовательского интерфейса
Компоненты меню пользовательского интерфейса
- Редизайн приложения View Segment
Редизайн приложения сегмента
- Посмотреть 🔔 Уведомление
🔔 Уведомление
- Просмотр стога сена — панель навигации
Стог сена — панель навигации
- Посмотреть боковую панель Twitter
Боковая панель Twitter
- Просмотр темных элементов пользовательского интерфейса, раскрывающихся списков и календаря
Темные элементы пользовательского интерфейса, раскрывающиеся списки и календарь
- Просмотр 🍔 3D-кнопка
🍔 Кнопка 3D
- Просмотр боковой панели навигации
Боковая панель навигации
- Просмотр вкладки «Анимированные»
Анимированная вкладка
- Навигация панели кнопок просмотра
Панель навигации с кнопками
- Просмотр стога сена — настройки администратора
Стог сена — настройки администратора
- Просмотреть 😇 Карточка панели мониторинга — Компоненты пользовательского интерфейса
😇 Карта панели управления — компоненты пользовательского интерфейса
Компоненты пользовательского интерфейса
- Просмотр домашнего приложения
Домашнее приложение
- Посмотреть исследование Nav (начало 2019 г.
)Навигация (начало 2019 г.)
- Просмотр таблицы электронной торговли
Исследование таблицы электронной торговли
- Посмотреть дизайн веб-сайта Hebbia AI
Дизайн веб-сайта Hebbia AI
- Просмотр фильтра/запроса — новый пользовательский интерфейс Countly
Фильтр/запрос — новый пользовательский интерфейс Countly
- Просмотр приборной панели
Приборная панель
- Посмотреть сравнение криптобирж
Сравнение криптобирж
- Просмотр раскрывающегося списка | Компоненты
Раскрывающийся список | Компоненты
- Просмотр ✨Детали навигации — новый пользовательский интерфейс Countly
✨Детали навигации — новый пользовательский интерфейс Countly
- Просмотр меню действий при длительном нажатии
Меню действий при длительном нажатии
)Зарегистрируйтесь, чтобы продолжить или войдите
Идет загрузка еще…
Дизайны кнопок меню, темы, шаблоны и загружаемые графические элементы на Dribbble
- Просмотр компонентов пользовательского интерфейса Темная тема
Компоненты пользовательского интерфейса Темная тема
- Просмотр компонентов ввода для веб-сайта.
