С помощью некоторых расширенных действий можно легко создать раскрывающееся меню с помощью CSS. Добавьте несколько свойств CSS3, и вы сможете создать дизайн, который когда-то был достижим только с фоновыми изображениями и Javascript. Следуйте этому руководству, чтобы увидеть пошаговый процесс создания собственного раскрывающегося меню на чистом CSS.
Рекомендуем также посмотреть:
- Как создать модное навигационное меню в плоском стиле в CSS
- Создайте раскрывающееся меню с полем поиска в CSS3 и HTML
- Различные методы для размещения объекта ровно по центру
В меню, которое мы будем создавать, есть две подкатегории, которые появляются после активации родительской ссылки при наведении курсора. Первая серия вложенных ссылок появляется под основной панелью навигации, затем вторая серия ссылок вылетает горизонтально из первого раскрывающегося списка. Взгляните на демонстрацию выпадающего меню CSS, чтобы увидеть все это в действии.
Структура HTML
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Inspiration</a></li> </ul> </nav>
Сначала нам нужно создать структуру HTML для нашего меню CSS. Мы будем использовать HTML5 для размещения меню навигации в <nav>элементе, а затем добавим основные ссылки навигации в простой неупорядоченный список.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>
Затем первые наборы подменю можно добавить по ссылкам «Учебники» и «Статьи», каждое из которых представляет собой полный неупорядоченный список, вставленный в один <li>из вариантов родительского меню.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>
Вторичное подменю вложено под опцию «Веб-дизайн» первого подменю. Эти ссылки помещаются в другой неупорядоченный список и вставляются в «Веб-дизайн» <li>.
Пока что у нас получился аккуратный макет ссылок с подменю, имеющим четкое отношение к своим родителям.
Стили CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}Давайте начнем с работы CSS основных функций раскрывающегося списка. Благодаря специфике CSS и расширенным селекторам мы можем ориентироваться на отдельные элементы, глубоко скрытые в структуре HTML, без необходимости в дополнительных идентификаторах или классах. Сначала скройте подменю, указав в объявлении любые UL в UL display:none;. Чтобы эти меню появлялись снова, их необходимо преобразовать обратно в блочные элементы при наведении курсора на LI. Селектор дочерних элементов обеспечивает нацеливание только на дочерний UL объекта LI, а не сразу все подменю.>
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}Затем мы можем приступить к оформлению главного меню навигации с помощью свойств CSS3, таких как градиенты, тени блоков и радиус границы. Добавление position:relative;позволит нам абсолютно позиционировать подменю в соответствии с этой главной панелью навигации, а затем display:inline-tableсузит ширину меню, чтобы оно соответствовало. Правило стиля clearfix очистит плавающие элементы, используемые в последующих элементах списка, без использования overflow:hidden, что скроет подменю и предотвратит их появление.
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}Затем к отдельным пунктам меню добавляется стиль с помощью правил CSS, добавленных к <li>вложенной привязке. В браузере это изменит ссылку на синий градиентный фон и белый текст.
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}Основная панель навигации теперь полностью оформлена, но над подменю все еще нужно поработать. В настоящее время они наследуют стили от своих родительских элементов, поэтому изменение фона и удаление радиуса границы и заполнения исправляет их внешний вид. Чтобы убедиться, что они вылетают под главным меню, они расположены абсолютно на 100% от верха UL (то есть от низа).
LI каждого UL в подменю не нужно перемещать рядом, вместо этого они перечислены вертикально с тонкими границами, разделяющими каждый из них. Затем эффект быстрого наведения затемняет фон, чтобы служить визуальной подсказкой.
nav ul ul ul {
position: absolute; left: 100%; top:0;
}Последний шаг – соответствующим образом расположить подменю. Эти меню уже будут наследовать все стили подменю, поэтому все, что им нужно, это расположить абсолютно справа (слева: 100%) относительного положения родительского элемента <li>.
Завершенное раскрывающееся меню на чистом CSS
