ИЗОБРАЖЕНИЯ
Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения
Выпадающие списки на сайтах
Выпадающие списки имеют свои плюсы и минусы, а также своё место в дизайне веб-интерфейса. Давайте посмотрим, как наилучшим образом использовать этот практичный элемент дизайна, чтобы обеспечить наилучший пользовательский опыт.
При разработке выпадающих списков для сайтов или веб-приложений есть несколько моментов, которые нужно тщательно обдумать заранее. Представьте, что вы не уверены: использовать выпадающий список или какой-то другой из вышеперечисленных элементов.
Ответ прост. Сколько места нужно сэкономить? Приведёт ли это к повышению стоимости взаимодействия? Ведь самое главное — это пользовательский опыт. Использовать больше пространства = улучшить юзабилити? Тогда один из вышеупомянутых альтернативных элементов подойдёт лучше.
Сколько вариантов включать в выпадающий список?
Если результаты пользовательского тестирования покажут, что юзабилити не поломается, выпадающий список может сэкономить место. Общее эмпирическое правило, которому нужно следовать: если вариантов выбора больше пяти, то выпадающий список подойдёт лучше всего. Благодаря тому, что список свёрнут в одно поле, он будет меньше пугать пользователей. Больше десяти — и список может получиться слишком длинным.
Длинные выпадающие списки лучше избегать любой ценой — пользователи не увидят все варианты сразу. Это может лишить вас очков в мире UX, заставив пользователя потратить больше усилий в поиске нужного варианта.
Длинные выпадающие списки также вынуждают пользователя усерднее контролировать движения мыши, чтобы случайно не свернуть список. Вы же не хотите, чтобы у вашего пользователя заболело запястье?
Недоступные параметры и сообщения об ошибках
Что мы делаем с недоступными вариантами? NNG в своём руководстве по выпадающим спискам предлагают не удалять недоступные пункты, а обозначать их серым цветом. Это лучше, чем удалять их. Если недоступные варианты останутся на виду, вы сохраните контекст для пользователя и поможете ему лучше разобраться в интерфейсе.
Ещё лучше, если после достаточно долгого ховера на сером пункте пользователь увидит короткое всплывающее сообщение, которое объяснит, почему этот пункт недоступен и что можно сделать (если можно, конечно), чтобы он стал активным
Когда лучше позволить пользователю вводить данные самому?
Когда дело доходит до поисковых запросов, NNG считает, что лучше разрешить пользователю вводить запрос самому, а не выбирать из выпадающего списка. Особенно если речь о потенциально длинных списках: например, штатах, областях или странах. Они могут потребовать дополнительной валидации от бэкенда, но, если это обеспечивает лучшее юзабилити, оно того стоит.
Рекомендации по липкому меню
Следуйте этим советам, чтобы сделать ваше липкое меню максимально удобным для пользователя.
1 Создайте липкое меню, отражающее индивидуальность вашего бренда.
Вы хотите выбрать типографику, цвета и значки, которые побуждают ваших посетителей нажимать ссылки и другие элементы в вашем липком меню. Однако это не означает, что вы должны использовать совершенно разные шрифты или цвета по сравнению с остальной частью вашего сайта. Вы хотите, чтобы меню навигации по-прежнему отражало ваш бренд.
Например, вместо того, чтобы сделать цвет фона меню неоново-желтым, вы можете выбрать контрастный цвет из своей цветовой схемы. В качестве примера возьмем липкое меню ниже. Он выделяется на странице, не отклоняясь от минималистичного дизайна сайта.
2 Добавьте логотип вашего бренда.
Добавление вашего логотипа в липкое меню – это простой способ держать ваш бренд в центре внимания, пока посетители просматривают ваш контент. Это особенно полезно для предприятий, которым необходимо повысить узнаваемость бренда и привлечь больше подписчиков.
3 Сохраняйте только самые актуальные пункты меню.
Не стоит перегружать свое липкое меню слишком большим количеством опций. Сужая выбор, подумайте, какие товары наиболее актуальны для ваших уникальных посетителей. Например, на сайте электронной торговли значок корзины покупок будет более важным для включения в меню навигации, чем ссылка на страницу «О программе».
Липкое меню заголовка Parade – отличный тому пример. Он предоставляет только основные ссылки, которые будут повышать ценность для потенциальных или существующих клиентов.
4 Создайте настраиваемое липкое меню для мобильных браузеров.
Поскольку у вас будет меньше места для работы на мобильном телефоне, вам нужно создать меню специально для небольших экранов и для настольных компьютеров. На меньшем экране вы захотите уменьшить размер шрифта и скрыть больше пунктов меню. Или вы можете скрыть заголовок, когда люди прокручивают страницу вниз на мобильном устройстве, и отображать его, когда люди прокручивают страницу вверх. Это всего лишь несколько вариантов, которые вы можете сделать при разработке навигации для мобильных устройств.
5 Выберите значок увеличительного стекла над полем ввода поиска.
Максимальное количество свободного места в меню навигации важно независимо от того, для какого устройства вы проектируете. Но это баланс: вы хотите эффективно использовать пространство без ущерба для пользовательского опыта
Один из способов сэкономить место и при этом оправдать ожидания посетителей – заменить поле ввода поиска значком увеличительного стекла. Это беспроигрышный вариант: посетители, которые предпочитают поиск, а не просмотр, по-прежнему имеют возможность, и теперь вы можете добавить еще один элемент в свое меню.
6 Добавьте анимацию наведения или прокрутки.
Хотя некоторые анимации могут отвлекать, другие могут помочь улучшить навигацию по сайту. Например, в магазине витаминов Anser панель навигации прозрачна при первой загрузке страницы. Таким образом, это не отвлекает от показанного слайдера. Но если посетитель наводит курсор на меню или прокручивает страницу вниз, панель навигации переходит с прозрачного фона на белый сплошной цвет, чтобы он мог легко видеть и нажимать на ссылки навигации.
7 Поэкспериментируйте с разными липкими меню.
Поэкспериментируйте с вариантами липких меню, чтобы найти то, что подходит вашим посетителям. Вы захотите провести A / B-тестирование нескольких вариантов, прежде чем приступить к окончательной версии или во время редизайна веб-сайта.
Разметка
Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.
<ul id="nav"> <li> <a href="#" title="Вернуться на главную страницу">Главная</a> </li> <li> <a href="#" title="Информация о компании">О нас</a> <ul> <li><a href="#">Продукты</a></li> <li><a href="#">Команда</a></li> </ul> </li> <li> <a href="#" title="Что мы можем для вас сделать">Услуги</a> <ul> <li><a href="#">Услуга один</a></li> <li><a href="#">Услуга два</a></li> <li><a href="#">Услуга три</a></li> <li><a href="#">Услуга четыре</a></li> </ul> </li> <li> <a href="#" title="Наша продуктовая линейка">Продукты</a> <ul> <li><a href="#">Маленький продукт (первый)</a></li> <li><a href="#">Маленький продукт (второй)</a></li> <li><a href="#">Маленький продукт (третий)</a></li> <li><a href="#">Маленький продукт (четвертый)</a></li> <li><a href="#">Большой продукт (пятый)</a></li> <li><a href="#">Большой продукт (шестой)</a></li> <li><a href="#">Большой продукт (седьмой)</a></li> <li><a href="#">Большой продукт (восьмой)</a></li> <li><a href="#">Невообразимый продукт (девятый)</a></li> <li><a href="#">Невообразимый продукт (десятый)</a></li> <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li> </ul> </li> <li> <a href="#" title="Как с нами связаться">Контакт</a> <ul> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> </ul> </li> </ul>
Разметка достаточно проста и представляет собой серию вложенных списков . Нет никаких ID, классов и элементов. Простой ясный код.
Элемент содержит серию элементов . Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент
Обратите внимание, что элемент выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой
Выпадающее меню со списком элементов на HTML
Вебмастера и блоггеры периодически сталкиваются с проблемой создания горизонтального меню, при наведении на родительские элементы которого будут показывать дочерние элементы.
Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).
Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.
Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:
<ul class=»mmenuu»>
<li><a href=#>Меню №1<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №1 первого меню<a><li>
<ul>
<li>
<li><a href=#>Меню №2<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №2 второго меню<a><li>
<li><a href=#>Субменю №2 второго меню<a><li>
<ul>
<li>
<li><a href=#>Меню №3<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №3 третьего меню<a><li>
<li><a href=#>Субменю №3 третьего меню<a><li>
<li><a href=#>Субменю №3 третьего меню<a><li>
<ul>
<li><ul>
Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:
Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.
Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:
body {
/* Убираю отступы. */
margin0px;
/* Убираю еще отступы. */
padding0px;
/* Задаю шрифт. */
font 14px ‘Verdana’;}
ul {
/* Убираю маркеры у списка*/
list-style none;
/* Делаю элементы блочными. */
display block;
/* Убираю отступы. */
margin0px;
/* Убираю еще отступы! */
padding0px;}
ulafter {
/* Делаю элементы блочными. */
display block;
/* Убираю выравнивание. */
float none;
content ‘ ‘;
clear both;}
ul.mmenuu > li {
/* Задаю выравнивание и позиционирование. */
float left;
/* Считаем координаты относительно исходного места*/
position relative;}
ul.mmenuu > li > a {
/* Делаю элементы блочными: */
display block;
/* Задаю белый цвет. */
color #fff;
/* Задаю отступ 10px. */
padding 10px;
/* Убираю форматирование*/
text-decoration none;
/* Задаю цвет. */
background-color #da570f;}
ul.mmenuu > li > ahover {
/* Задаю цвет при наведении. */
background-color #eb9316;}
ul.ssubmenuu {
position absolute;
width 240px;
top 37px;
left0px;
/* Делаю субменю скрытыми. */
display none;
/* Цвет — белый. */
background-color white;}
ul.ssubmenuu > li {
/* Блочное расположение элементов*/
display block;}
ul.ssubmenuu > li > a {
/* Делаю элементы блочными. */
display block;
/* Убираю форматирование*/
text-decoration none;
/* Задаю отступ. */
padding 10px;
/* Задаю цвет. */
color #ffffff;
/* Еще цвет. */
background-color #da570f;}
ul.ssubmenuu > li > ahover {
/* Цвет бэкграунда при наведении. */
background-color #eb9316;
/* Задаю подчеркивание*/
text-decoration underline;}
ul.mmenuu > lihover > ul.ssubmenuu {
/* Делаю элементы блочными. */
display block;}
Результат:
Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!
ЕЩЁ
Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe
Вертикальное выпадающее меню
Далее я покажу вам как делается вертикальное выпадающее меню при наведении. Стили CSS по аналогии с горизонтальным меню, то есть основным элементов есть псевдокласс :hover, на его базе и будут построенные вертикальные меню для сайта с выпадашкой по наведению.
Здесь вы сможете просмотреть меню в режиме демо, а также скачать готовые примеры меню. Смотрим ниже шаблоны выпадающих меню, в разных вариантах:
Вертикальное выпадающее меню вправо.
Скачать пример
Вертикальное выпадающее меню CSS влево
Скачать пример
Вертикальное многоуровневое меню
Скачать пример
Подробно можно прочесть по этой ссылке https://help-wp.ru/vertikalnoe-vypadayushhee-menu/
Подпункты в меню: выпадающий список
Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.
Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.
Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Выпадающий список</title>
<style>
body {
padding-left: 30%;
font-size: 18px;
}
.m-menu {
margin: 0;
padding: 9px;
width:50%;
text-align:center;
border: 3px solid #000;
background: #FF8C00;
}
.m-menu > li {
position: relative;
display: inline-block;
}
.m-menu a {
display: block;
margin-left: -2px;
padding: 13px;
color: #fff;
border-left: 3px solid #fff;
}
.m-menu a:hover {
background: #1C1C1C;
}
.m-menu .s-menu {
left: 10px;
position: absolute;
display: none;
width: 155px;
margin: 0;
padding: 0;
list-style: none;
background: #FF8C00;
}
.m-menu .s-menu a {
border: 1px solid #000;
}
.m-menu > li:hover .s-menu {
display: block;
}
</style>
</head>
<body>
<ul class="m-menu">
<li><a href="#index">Главная</a></li>
<li>
<a href="#product">Продукция</a>
<ul class="s-menu">
<li><a href="#1">Конфеты</a></li>
<li><a href="#2">Торты</a></li>
<li><a href="#3">Печенье</a></li>
</ul>
</li>
<li><a href="#adress">Контакты</a></li>
</ul>
</body>
</html>
|
В данном примере я разделил единицы меню на два класса:
- m-menu
- s-menu
Первый класс отвечает за основное меню, а s-menu – за подменю.
В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.
При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.
Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.
Как видите, реализация такого приема очень простая.
Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!
Прочитано: 5581 раз
ЕЩЁ
Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
ФОРМЫ
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Пример
<div class=»dropdown»> <button class=»dropbtn»>Выпадающее</button> <div class=»dropdown-content»> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div></div>
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.
Используйте элемент контейнера (например, <div>), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none;}/* Контейнер <div> — необходим для размещения выпадающего содержимого */.dropdown { position: relative; display: inline-block;}/* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}/* Ссылки внутри выпадающего списка */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;}/* Изменение цвета выпадающих ссылок при наведении курсора */ .dropdown-content a:hover {background-color: #ddd;}/* Показать выпадающее меню при наведении курсора */.dropdown:hover .dropdown-content {display: block;}/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */.dropdown:hover .dropbtn {background-color: #3e8e41;}
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Класс использует , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью ).
Класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите на 100% (и чтобы включить прокрутку на небольших экранах).
Вместо того, чтобы использовать границу, мы использовали свойство чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Раздвижное меню-аккордеон
×
Несколько слов вступления
В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по .
Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …
Аккордеон должен раскрываться по , а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…
Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.
Добавлен класс к классу родительского контейнера, а класс заменен на . Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.
<nav class="menu_color">
<ul class="my_menu my_accordion">
<li><a href="#/">пункт 1<a><li>
<li class="parent"><a href="#/">родительский пункт 2<a>
<ul class="sub-accordion-menu>
<li><a href="#/">дочерний подпункт 1<a><li>
<li><a href="#/">дочерний подпункт 2<a><li>
<ul>
<li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Стили для выпадающего меню были привязаны к классу .sub-menu, который мы заменили на . Чтобы не дублировать стилевые правила — группируем классы.
Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.
Изменения кода — минимальные! Мы просто через запятую дописали новые классы к предыдущему примеру:
/* === Группировка классов === */
/* Убираем маркеры и отступы */
.my_menu, .sub-menu,
.sub-accordion-menu {
list-stylenone;
margin;
padding;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
color #bbb;
background rgba(, , , 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
border-top 1px solid rgba(255, 255, 255, 0.1);
box-shadow -1px rgba(, , , 0.15);
}
После этого добавим стили, для закрытого и раскрытого аккордеона:
/* === Закрытый ===*/
.sub-accordion-menu {
display block;
position static;
width auto;
overflow hidden;
border none;
margin !important;
max-height ; /* Скрываем выпадающее подменю */
transition max-height 1s; /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
max-height 1000px;
}
.sub-accordion-menu > li > a {
padding-left 40px; /* Добавляем отступ для подпунктов */
}
Примечание.Почему было использовано свойство , а не ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения — анимация не срабатывает.
Выводы
Выпадающие списки стоит использовать, когда нужно увеличить доступное экранное пространство и автоматизировать определённые процессы для пользователей: упростить и сделать более эффективным заполнение форм и опросов, а также изменение настроек.
Однако не спешите применять выпадающие списки в своих интерфейсах, даже если кажется, что можно. Всегда думайте о пользователе, когда что-либо упрощаете. Если пользователю проще ввести данные — дайте ему такую возможность.
В заключение, всегда проверяйте выпадающие списки на пользователях, чтобы убедиться, что им удобно. Если нет, рассмотрите другие варианты UI-элементов, упомянутые в этой статье.
