Выпадающее меню на CSS . Горизонтальное выпадающее меню
Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.
Итак приступим к написанию основной структуры сайта
<!DOCTYPE html>
<html>
<head>
<title> Выпадающее меню на CSS </title>
</head>
<body>
</body>После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>
<nav> <ul> <li><a href='#'>Главная</a></li> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>PHP</a></li> <li><a href='#'>JavaScript</a></li> </ul> </nav>
Меню верхнего уровня у нас создано.
Теперь необходимо назначить стили для элементов меню.
nav { margin: 50px 0; bacground-color: #E94f56; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { margin: 0px -7px 0 0; display: inline-block; background-color: #E94f56; } nav a { display: block; padding: 0 10px; color: #ffff; font-size: 23px; line-height: 60px; text-decoration: none; } nav a:hover { backgroung-color: #000001; }
Проверим то что у нас получилось.
Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке.
Создадим структуру с вложенным меню.
<nav> <ul> <li><a href='#'>Главная</a></li> <li><a href='#'>HTML</a> <ul> <li><a href='#'>История HTML</a></li> <li><a href='#'>Структура HTML</a></li> <li><a href='#'>HTML5</a></li> </ul> </li> <li><a href='#'>CSS</a></li> <li><a href='#'>PHP</a></li> <li><a href='#'>JavaScript</a></li> </ul> </nav>
Теперь нужно добавить стили к вложенному меню. Для создания выпадающего меню необходимо задать вложенному списку абсолютное позиционирование и смещение от основного меню.
nav ul ul {
display: none;
position: absolute;
top100%;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
min-width: 180px;
float: none;
display:list-item;
position: relative;
}Должно получиться следующее
Добавим для пункта меню с вложенным подменю соответствующий индикатор.
li> a:after {content: '+'}
li> a:only-child:after {content:'';} В итоге у нас получилось следующее
Выпадающее меню для мобильной версии сайта
- Главная
- WEB-мастер
- Выпадающее меню
На странице представлены выпадающие меню, реализованные на HTML, CSS и JavaScript, которые могут легко интегрированы на любой сайт. Достоинством представленных шаблонов выпадающих меню является использование на любых мобильных устройствах. Включение в подменю большого количества ссылок позволяет реализовать развернутую структуру навигации по сайту.
Преимуществом является то, что в выпадающее меню можно вставлять изображения с описанием по теме сайта. Функционал используемых меню позволит улучшить дизайн ресурса. Выпадающие горизонтальные меню с большим количеством пунктов идеально подойдут для сайтов со сложной структурой или интернет-магазина. Рекомендуем данные выпадающие меню посмотреть на мобильных устройствах и увидеть, как они реагируют.
Внешний вид меню на планшете
Меню располагается на всю ширину экрана. Имеется кнопка поиска по сайту.
Демо 1
Внешний вид меню на компьютере
При уменьшении размера браузера, складывается меню в две строки. При дальнейшем уменьшении получите вид, как на мобильном устройстве с небольшим разрешением. То есть данное выпадающее меню имеет три вида.
Демо 2
Как видно из кода ниже он достаточно простой, наполнять дополнительными пунктами не составит труда, примерно такой код для всех 4 видов Демо.
<nav>
<div></div>
- Главная
Столбец 1
Ссылка 1 Ссылка 2 Ссылка 3Столбец 2
Ссылка 1 Ссылка 2 - О компании
- Новости
Новостная лента
Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 - Сегодня в мире
Мода
Ссылка 1 Ссылка 2 Ссылка 3
Здоровье
Ссылка 1 Ссылка 2
Авто
Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4
- Спорт
Лето
Ссылка 1 Ссылка 2 Ссылка 3Осень
Ссылка 1 Ссылка 2 - Контакты
</nav>
Вид выпадающего меню при открытом пункте.
Демо 3
Вид выпадающего меню на iPhone 4 горизонтально.
Демо 4
Оставить комментарии:
Создание примера выпадающего меню с помощью CSS :focus-within
В сегодняшнем примере мы создадим выпадающее меню на чистом CSS, используя псевдокласс :focus-within .
Вы можете увидеть в видео ниже рабочий пример:
Как работает псевдоселектор CSS :focus-within
:focus-within выбирает элемент, если этот элемент содержит дочерние элементы, находящиеся в фокусе.
Он связан с псевдоклассом :focus , просто он сработает, если будет выбрано что-то, что содержится в этом элементе.
В отличие от :focus , который применяется непосредственно к самому элементу, правила :focus-within применяются к родительскому элементу, на который наведен фокус.
Создание выпадающего меню CSS с помощью :focus-within
Чтобы создать меню, мы начнем с базовой структуры HTML, подобной приведенной ниже:
Добавим немного CSS, чтобы сделать меню первоначальным:
.menu-container {
дисплей: встроенный гибкий;
flex-направление: строка;
граница: сплошная 2px #000000;
курсор: указатель;
}
.меню {
положение: родственник;
прокладка: 0rem 0.5rem;
}
.меню > .меню-контент {
дисплей: нет;
} На данный момент у нас будет показано только меню, но без рабочего выпадающего списка:
Причина, по которой нам нужно использовать tabindex="0" , заключается в том, что меню можно будет выбрать, когда пользователь перемещается.
с клавиатурой.
Чтобы добавить раскрывающийся список, добавятся дополнительные правила, основанные на псевдоклассе :focus-within :
.menu > .menu-content {
дисплей: нет;
положение: абсолютное;
граница: сплошная 2px #000000;
}
.menu: focus-within >
.menu-content {
дисплей: гибкий;
flex-направление: столбец;
}
.меню {
набивка: 0,5 бэр;
отображение: встроенный блок;
цвет: #000000;
} На этом этапе, если мы нажмем на меню, мы увидим, что раскрывающийся список работает.
Если бы у нас было всего .menu:focus > .menu-content раскрывающееся меню закрывалось бы при навигации по элементам из этого раскрывающегося списка. Поэтому необходимо использовать :focus-within .
Ознакомьтесь с полным рабочим кодом здесь.
Добавление вложенных выпадающих меню
Одна приятная особенность этого подхода заключается в том, что мы можем просто включить HTML для подменю:
Проверка DEMO
