Как сделать выпадающее меню на html и css
Содержание:
Использование
Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса элемента родительского списка. Атрибут отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.
На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики () к непосредственным дочерним элемента . Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.
Через JS
Управляйте выпадающими элементами с помощью JavaScript:
still required
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к как в .
| Название | Тип | По умолч. | Описание |
|---|---|---|---|
| offset | number | string | function |
Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. Popper.js |
|
| flip | boolean | true | Позволяет выпадающему элементу перевернуться, если произошло перекрытие другого элемента. Больше информации: . |
| boundary | string | element | ‘scrollParent’ | Граница ограничения переполнения выпадающего меню. Принимает значения , , или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к от Popper.js. |
| reference | string | element | ‘toggle’ | Справочный элемент выпадающего меню. Принимает значения , , или ссылка на HTMLElement. Для получения дополнительной информации обратитесь к Popper.js’s . |
| display | string | dynamic | static | По умолчанию мы используем Popper.js для динамического позиционирования. Для отключения используйте . |
| popperConfig | null | object | null | Чтобы изменить конфигурацию Popper.js по умолчанию в Bootstrap, смотрите |
Обратите внимание, что если для установлено значение, отличное от , позиция применяется к контейнеру
Методы
| Метод | Описание |
|---|---|
| Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом. | |
| Показывает выпадающее меню данной навигационной панели или вкладки. | |
| Скрывает выпадающее меню данной навигационной панели или вкладки. | |
| Обновляет позицию выпадания элемента. | |
| Уничтожает выпадающий элемент. |
События
Все события выпадающих элементов наступают в родительском элементе класса и несут свойство , значение которого равно элементу якоря (ссылка, т.е. ), запускающего функциональность toggle.
| Событие | Описание |
|---|---|
| Это событие наступает немедленно по вызову экземпляра метода show. | |
| Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов). | |
| Это событие наступает немедленно по вызову экземпляра метода hide. | |
| Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов). |
HTML структура
<ul class=’menu’>
<li><a href=»#»>Section 1</a></li>
<li><a href=»#»>Section 2</a>
<ul> <!—выпадающий блок—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
</ul>
</li>
<li><a href=»#»>Section 3</a>
<ul> <!—выпадающий блок—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Sub-section</a>
<ul> <!—выпадающий блок второго уровня—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
</ul>
</li>
</ul>
</li>
</ul>
на основе других HTML-тегов
Принцип действия и CSS
внедрения JavaScriptdisplaynoneblockinline-blockДля сокрытия/появления блоков можно применять и иные свойства CSS, чаще это делается когда к меню применяется эффекты CSS3-анимации
вертикальнымПример кода CSS
/*обнуление стилей*/
*{
margin: 0;
padding: 0;
border: none;
}
ul, li {
list-style-type: none; /*убираем маркеры списка*/
}
li a {
text-decoration: none; /*убираем подчеркивание ссылок*/
}/*меню*/
.menu li {
position: relative; /*позиционирование*/
float: left; /*обтекание слева*/
}
.menu ul {
position: absolute; /*позиционирование выпадающих блоков*/
display: none; /*скрываем блоки*/
min-width: 150px; /*минимальная ширина выпадающих блоков*/
}
.menu li:hover > ul {
display: block; /*показываем блоки при наведении курсора на родителя*/
}/*положение выпадающих блоков первого уровня*/
.menu ul {
left: 0;
top: 100%;
}/*положение вложенных выпадающих блоков*/
.menu li ul li ul{
left: 100%;
top: 0%;
}
При верстке вертикального выпадающего меню необходимо:
— точно указать ширину (width) всего блока меню (в данном случаи для селектора .menu);
— свойство обтекания float для основных разделов не указывается. Для всех выпадающих блоков можно указать одно положение, относительно основного.
Тогда код CSS будет выглядеть примерно так:.menu {
width: 150px; /*ширина всего блока*/
}
.menu li {
position: relative;
}
.menu ul {
position: absolute;
display: none;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}/*положение всех выпадающих блоков*/
.menu li ul {
left: 100%;
top: 0%;
}
свойства CSSПример
/*меню*/
.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
}/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}/*выпадающие блоки*/
.menu ul {
position: absolute;
display: none;
background: #666;
border: 1px solid #999;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
Подсказка для текстовой области
И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.
Благодаря атрибуту placeholder (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Атрибуты placeholder и readonly тега <textarea></title> </head> <body> <form> <textarea placeholder = "Введите информацию в текстовое поле"></textarea> <textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br> <input type = "submit" name = "submitInfo" value = "отправить"> </form> </body> </html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).
Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его. Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент с типом кнопки «отправка формы»: type = «submit»)
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Пример использования атрибутов placeholder и readonly тега <textarea>.
Выпадающее меню со списком элементов на 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-код меню будет выглядеть так:
<nav class="menu_color">
<ul class="my_menu">
<li><a href="#/">пункт 1<a><li>
<li><a href="#/">пунтк 2<a><li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс для активного пункта (ссылка на текущую страницу).
Сброс и установка стилей по умолчанию
Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.
Для этого используем класс . Кроме того прописываем для него общие стилевые правила, которые будут применяться ко всем меню, даже если будет измененна тема оформления.
Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.
Файл my-menu.css
/* Убираем маркеры и отступы */
.my_menu {
list-stylenone;
margin;
padding;
}
.my_menu li {
margin;
padding;
positionrelative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
displayblock;
margin;
padding12px 20px;
text-decoration none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
cursor default;
}
Цветовое оформление
Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:
- Цвет фона меню
- Цвет и фон ссылки. При оформлении пунктов меню стилевые правила применяются непосредственно к ссылкам, т.е тегу
- Цвет и фон ссылки при наведении курсора
- Цвет и фон активной ссылки
×
Примечание
На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.
/* === Цветовое оформление menu_color === */
.menu_color {
background#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
color#999;
background rgba(, , , );
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
color #bbb;
background rgba(, , , 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
color#fff;
backgroundrgba(, , , 0.4);
}
Пояснения:
- Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
- Использование прозрачности при задании цвета фона — . Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.
×
Замечание
Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.
Разделители пунктов
Стили привязываем к классу , т.к. это элемент оформления, а не разметки.
Конструкция используется для присвоения стилей всем пунктам основного меню, кроме первого. Таким образом убирается верхняя рамка первого пункта меню.
Если в этом нет необходимости — заменяем на
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
border-top 1px solid rgba(255, 255, 255, 0.1);
box-shadow -1px rgba(, , , 0.15);
}
Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.
Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!
Шаг 3 — Как создать выпадающее меню CSS
Мы стилизуем наш HTML код используя следующие CSS правила:
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html:
<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Главное меню</button>
<div class="dropdown-child">
<a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
<a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
<a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
<a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
<a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
</div>
</div>
</body>
</html>
В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Как сделать меню в html
Рейтинг: 4.8/5 Оценили: 39
Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.
Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.
Как сделать меню на html
Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.
К примеру, для создания меню мы используем список с классом class=»menu» (название класса любое, только латинские буквы), и код html будет выглядеть так:
Обязательные параметры и значения CSS
- margin: 0; — убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
- list-style-type: none; — убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.
Как сделать горизонтальное меню на CSS
И выглядеть это будет так:
Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.
Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color ( добавим фон для пункта меню ), и изменим вид ссылки.
Отображаться горизонтальное меню уже будет таким образом:
Так как горизонтальное меню в большинстве случаях прописывают в шапке сайта, то и я в примере добавил в меню фон, который вы измените под свой цвет шапки.
И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.
Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.
Как сделать вертикальное меню на CSS
Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li <. параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.
И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.
Давайте рассмотрим вертикальное меню CSS на примере:
Вот так вертикальное меню отобразится на странице:
- Первый пункт меню
- Второй пункт меню
- Третий пункт меню
- Четвёртый пункт меню
Как сделать выпадающее меню на CSS
Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.
Обязательно запомните! Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li , где находится эта ссылка, прописать position: relative; , а для выпадающего меню position: absolute;
Давайте напишем html код для выпадающего меню на CSS.
Посмотрите, как будет выглядеть на странице выпадающее меню на CSS.
- Первый пункт меню
- Второй пункт меню ⇒
- Первый подпункт
- Второй подпункт
- Третий подпункт ⇒
- Первая ссылка
- Вторая ссылка
- Третья ссылка
- Четвёртая ссылка
Четвёртый подпункт
Третий пункт меню ⇒
Первая ссылка
Вторая ссылка
Третья ссылка
Четвёртая ссылка
Четвёртый пункт меню
Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).
Посмотрите! Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.
Примеры
Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом или другим элементом с . При необходимости выпадающие элементы можно запускать из элементов или .
Выпадающие элементы одинарных кнопок
Любую одинарную кнопку можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :
Кнопка выпадающего списка
А вот так — с элементами:
Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
Главная
Вторичная
Успех
Инфо
Предупреждение
Опасность
Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса для правильного отступа вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг с обеих сторон выпадающей «каретки» и удаляет , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
Главная
Toggle Dropdown
Вторичная
Toggle Dropdown
Успех
Toggle Dropdown
Инфо
Toggle Dropdown
Предупреждение
Toggle Dropdown
Опасность
Toggle Dropdown
JS
Подключите jQuery и скрипт common.js в head.
<script src=»js/jquery-3.2.1.min.js»></script>
<script src=»js/common.js»></script>
|
1 |
<script src=»js/jquery-3.2.1.min.js»></script> <script src=»js/common.js»></script> |
common.js
$(document).ready(function() {
$(‘html’).removeClass(‘no-js’);
$(‘.menu-click a’).on(‘click’, function () {
var el = $(this);
el.parent().toggleClass(‘menu-active’);
el.parent().siblings(‘.menu-click.menu-active’).removeClass(‘menu-active’);
});
});
|
1 |
$(document).ready(function(){ $(‘html’).removeClass(‘no-js’); $(‘.menu-click a’).on(‘click’,function(){ varel=$(this); el.parent().toggleClass(‘menu-active’); el.parent().siblings(‘.menu-click.menu-active’).removeClass(‘menu-active’); }); }); |
Добавляем меню второго уровня
Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».
Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать
position: absolute; top: 100%;
То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.
Помимо позиционирования нужно придать выпадающему меню стиль как у меню верхнего уровня. Яблочко от яблоньки, как говорится…
Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.
Как сделать выпадающее меню действительно выпадающим
Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.
Выпадающему меню добавляем:
display: none;
А чтобы его отобразить, нужно прописать:
#top_menu > li:hover > ul {
display: block;
}
Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.
Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:
Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.
Ну что же, давайте еще немного поколдуем над ним.
Создание горизонтального выпадающего меню:
Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.
XHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<header> <nav> <ul> <li><a href=»#»>Главная</a></li> <li>Галерея <ul> <li><a href=»#»>Машины</a></li> <li><a href=»#»>Горы</a></li> <li><a href=»#»>Компьютеры</a></li> </ul> </li> <li>О себе <ul> <li><a href=»#»>Имя</a></li> <li><a href=»#»>Аватарка</a></li> </ul> </li> </ul> </nav> </header> |
Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги , для лучшей индексации.
Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.
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 |
html, body { margin; padding; } nav > ul { displayflex; margin; width100%; background-colorgreen; } nav > ul > li { margin-right20px; } li { colorwhite; list-stylenone; font-size20px; } li a { colorwhite; text-decorationnone; } li > ul{ displaynone; positionabsolute; background-colortomato; padding; } li:hover > ul{ displayblock; } |
В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.
Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам , которые находятся внутри тега , сделать позиционирование и добавить ему свойство , что бы блок не показывался на экране.
Последнее важное изменение, это при наведении мышкой на , внутри которого есть , он появлялся, вот что получилось
Такое латовый вариант получился, теперь сделаем так, что бы меню выпадало с анимацией, а не просто появлялась, для этого не много изменим стили.
Примечание:
Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
nav > ul { displayflex; margin; width100%; height25px; background-colorgreen; } li > ul{ positionabsolute; top40px; visibilityhidden; opacity; background-colortomato; padding; transition400ms; } li:hover > ul{ visibilityvisible; top25px; opacity1; } |
В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем и добавляем , для показа элемента, равный 25 пикселям и , для полной не прозрачности.
Также появилось свойство , для плавных переходов, мы задаём ему время перехода 400 миллисекунды.
