Горизонтальное выпадающее многоуровневое меню

Выпадающее меню (многоуровневое)

До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.

За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.

HTML-код 2-х уровневого меню:

<nav class="menu_color">
    <ul class="my_menu">
        <li><a href="#/">пункт 1<a><li>
        <li class="parent"><a href="#/">родительский пункт 2<a>
            <ul class="sub-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 */
.menu_color .sub-menu {
  background #f5f5f5;
  border 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color #555;
  background rgba(, , , );
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color #fff;
  background #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top 1px solid #fff;
  box-shadow  -1px  #ddd;
  padding-left 40px  /* Добавляем отступ для подпунктов */
}

Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню. 

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского . (Именно для этого при сбросе и установке для него было задано )

/*Общие*/
.my_menu .sub-menu {
  display none;
  position absolute;
  top ;
  min-width 200px;
  z-index 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока  (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display block;
  top 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left 100%;
  margin-left -10px;
}

×

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу .

Подменю выпадающеее влево

Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.

Аналогично с предыдущим примером привязываем стили к родительскому блоку правой колонки .

Вы спросите, для чего все эти сложности? Да, действительно, можно просто переписать стили для правой колонки без всяких дополнительных классов.., и делать это каждый раз, когда по тем или иным причинам нужно будет переместить (или скопировать) меню из одной колонки в другую …

Цель — универсальность! Вы один раз прописываете код, а потом размещаете меню где хотите и оно будет работать правильно!

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right 100%;
  left auto;
  margin-right -5px;
}

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Установка и настройка плагина выпадающего меню WordPress

Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.

1. 1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».

2. 2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».

3. 3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.

4. 4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»

5. 5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.

   Доступно для выбора три варианта:

   Hover intent – тоже самое, что и «Наведение мышки»

   Наведение мышки — открывается при наведении указателя мышки на пункте

   Клик мышки – открывается при клике указателем мышки по пункту

6. 6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

   И скорость, с которой оно будет открываться:

7. 7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.

8. 8.Во вкладке открывшегося окна «Мега Меню» мы можем:

   • В разделе «Режим отображения» выбрать способ расположения элементов. Если мы выберем пункт «Выпадающее меню», то в результате мы получим стандартное выпадающее меню WordPress, где пункты будут открываться при наведении на них указателя мышки, либо клике по ним.

     Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:

   • В раскрывающемся списке, который расположен рядом с настройкой режима отображения мы можем выбрать и добавить в открывающуюся область любой из доступных виджетов

   • В следующем раскрывающемся списке мы можем изменить количество столбцов, в которых будут располагаться наши пункты и добавленные виджеты.

9. 9.На вкладке «Settings» вы можете скрыть надпись или стрелку, отключить ссылку, отключить отображение элемента на мобильных устройствах или компьютерах, задать настройки выравнивания для самого элемента, иконки и подменю, а так же можно отключить отображение подменю на мобильных устройствах.

10. 10. На следующей вкладке мы можем задать иконку для пункта меню.

    В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.

11. 11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»

12. 12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.

    Переключаясь по вкладкам раздела вам нужно задать настройки цвета, отступы, высоту, шрифты, рамки, тени и другие визуальные настройки в соответствии с цветовым оформлением вашего сайта. После того, как вы зададите все настройки, не забудьте нажать на кнопку «Сохранить изменения».

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 к уже существующим классам.

Для задержки изменения состояния при hover-эффекте (эффект перехода) используется свойство CSS3 — .

Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color #999;  
  background rgba(, , , );
 
  /* добавляем код */
  -webkit-transition all .3s;
  -moz-transition all .3s;
  -o-transition all .3s;
  transition all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color #555;
   background rgba(, , , );
 
  /* добавляем код */
  -webkit-transition all .3s;
  -moz-transition all .3s;
  -o-transition all .3s;
  transition all .3s;
}
 

А вот с плавным появленем подменю проблема …

Дело в том, что использовать для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display block; /* переопределено */
  position absolute;
  top ;
  width 200px;
  z-index 9999;
 
  /* Добавить */
  opacity ;
  -webkit-transition opacity .5s, top .7s;
  -moz-transition opacity .5s, top .7s;
  -o-transition opacity .5s, top .7s;
  transition opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display block;
  top 4px;
 
  /* Добавить */
  opacity 1;
}

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса элемента родительского списка. Атрибут отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики () к непосредственным «детям» элемента . Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к как в .

Название	Тип	По умолч.	Описание
offset	number | string | function	Смещение выпадающего элемента относительно его триггера. См. Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: .
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения , , или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к от Popper.js.
reference	string | element	‘toggle’	Reference element of the dropdown menu. Accepts the values of , , or an HTMLElement reference. For more information refer to Popper.js’s .
display	string	dynamic | static	By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Обратите внимание, что если для установлено значение, отличное от , позиция применяется к контейнеру

Методы

Метод	Описание
	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
	Обновляет позицию «выпадения» элемента.
	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса и несут свойство , значение которого равно элементу «якоря» (ссылка, т.е. ), запускающего функциональность toggle.

Событие	Описание
	Это событие наступает немедленно по вызову экземпляра метода show.
	Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
	Это событие наступает немедленно по вызову экземпляра метода hide.
	Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в , или другой элемент, который заявляет, . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:

Dropdown button

И с элементами:

Dropdown link

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

Default

Primary

Success

Info

Warning

Danger

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную по обе стороны от каретки на 25% и удалите , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

Default

Toggle Dropdown

Primary

Toggle Dropdown

Success

Toggle Dropdown

Info

Toggle Dropdown

Warning

Toggle Dropdown

Danger

Toggle Dropdown

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте / , который содержит Popper.js.

Если вы компилируете наши JS файлы, .

Простое вертикальное меню

Исходный 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 стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Раздвижное меню-аккордеон

×

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по .

Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …

Аккордеон должен раскрываться по , а это уже 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;  /* Добавляем отступ для подпунктов */
}

Примечание.Почему было использовано свойство , а не ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения — анимация не срабатывает.

Часть 1

Составление HTML

1. Создание раздела навигации. Как правило, мы используем для главной панели навигации сайта тег <nav>, <header> — для более узких разделов или <div>, если нет других вариантов. Поместите этот код в элемент <div>, чтобы можно было задать стили для всего меню:

<div>
 <nav>
     </nav>
</div>

1. Задайте для каждого раздела название класса. Мы будем использовать атрибут класса позже, чтобы определить стиль этих элементов с помощью CSS. Задайте названия классов для контейнера и меню с раскрывающимся списком HTML:

<div class="nav-wrapper">
<nav class="nav-menu">
</nav>
</div>

1. Добавьте список пунктов меню. Неупорядоченный список (<ul>) содержит пункты главного меню (<li>), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к этому позже в разделе CSS:

<div class="nav-wrapper">
   <nav class="nav-menu">
<ul class="clearfix">
   <li>Home</li>
              <li>Contributors</li>
         <li>Contact Us</li>
 </ul>
   </nav>
</div>

1. Добавление ссылок. Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор (например, «#!»), чтобы курсор пользователя менял внешний вид при наведении на них. В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:

<div class="nav-wrapper">
   <nav class="nav-menu">
      <ul class="clearfix">
       <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         </li>
         <li><a href="#!">Contact Us</a>
         </li>
      </ul>
   </nav>
 </div>

1. Создание списков вложенных элементов. После того, как мы установим стили, эти раскрывающиеся списки HTML станут выпадающими меню. Вложите список в элемент, на который пользователь будет наводить курсор. Задайте имя класса и ссылку, как мы делали ранее:

<div class="nav-wrapper">
   <nav class="nav-menu">
      <ul class="clearfix">
         <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         <ul class="sub-menu">
            <li><a href="/jordan">Michael Jordan</a></li>
            <li><a href="/hawking">Stephen Hawking</a></li>
         </ul>
         </li>
         <li><a href="#!">Contact Us</a>
         <ul class="sub-menu">
            <li><a href="mailto:bugsupport@company.com">Report a Bug</a></li>
            <li><a href="/support">Customer Support</a></li>
         </ul>
         </li>
      </ul>
   </nav>
</div>