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

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

Через атрибуты или 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-переходов).

Хак с чекбоксом

Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

HTML

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox" id="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

CSS

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Выравнивание меню

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя. Добавить к к правому краю в раскрывающемся меню.

Берегись! Выпадающие списки располагаются благодаря Popper.js (кроме случаев, когда они содержатся в навигационной панели).

Right-aligned menu

• Action
• Another action
• Something else here

Отзывчивое выравнивание

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

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

Left-aligned but right aligned when large screen

• Action
• Another action
• Something else here

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

Right-aligned but left aligned when large screen

• Action
• Another action
• Something else here

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

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

Через атрибуты или 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-переходов).

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }

Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

Попробовать »

Обзор

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

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

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

CSS

Теперь, непосредственно давайте задавать сам стиль CSS для меню и для кнопок цвета. Вот он сам CSS код:

#nav,#nav ul {
 list-style: none outside none;
 margin: 0;
 padding: 0;
}
#nav {
 background-color: #000000;
 border-radius: 5px 5px 5px 5px;
 box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
 display: table;
 padding: 10px;
 position: relative;
}
#nav ul {
 background-color: red;
 border:1px solid red;
 border-radius: 0 5px 5px 5px;
 border-width: 0 1px 1px;
 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
 left: -9999px;
 overflow: hidden;
 padding: 20px 0 10px;
 position: absolute;
 top: -9999px;

-moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -o-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);

-moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
 -ms-transition: -ms-transform 0.1s linear;
 -o-transition: -o-transform 0.1s linear;
 -webkit-transition: -webkit-transform 0.1s linear;
 transition: transform 0.1s linear;
}
#nav li {
 float: left;
 position: relative;
}
#nav li a {
 color: #FFFFFF;
 display: block;
 font-size: 16px;
 padding: 7px 20px;
 text-decoration: none;
}
#nav li:hover > a {
 background-color: red;
 border-radius: 5px 5px 5px 5px;
 color: #FFFFFF;
}
#nav li:hover > a.hsubs {
 border-radius: 5px 5px 0 0;
}
#nav li:hover ul.subs {
 left: 0;
 top: 34px;
 width: 180px;

-moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
}
#nav ul li {
 width: 100%;
}
#nav ul li:hover > a {
 background-color: #222222 !important;
 border-radius: 5px 5px 5px 5px;
}

/* colors */
.colorScheme {
 height: 32px;
 list-style: none outside none;
 margin: 0 auto 25px;
 width: 320px;
}
.colorScheme a {
 cursor: pointer;
 float: left;
 height: 30px;
 margin: 0 5px;
 width: 30px;
}
.colorScheme .red {
 background-color: red;
}
.colorScheme .orange {
 background-color: orange;
}
.colorScheme .pink {
 background-color: pink;
}
.colorScheme .green {
 background-color: green;
}
.colorScheme .blue {
 background-color: blue;
}
.colorScheme .indigo {
 background-color: indigo;
}
.colorScheme .violet {
 background-color: violet;
}
.colorScheme .grey {
 background-color: grey;
}

#red:target ~ #nav ul {
 background-color: red;
 border: 1px solid red;
}
#orange:target ~ #nav ul {
 background-color: orange;
 border: 1px solid orange;
}
#pink:target ~ #nav ul {
 background-color: pink;
 border: 1px solid pink;
}
#green:target ~ #nav ul {
 background-color: green;
 border: 1px solid green;
}
#blue:target ~ #nav ul {
 background-color: blue;
 border: 1px solid blue;
}
#indigo:target ~ #nav ul {
 background-color: indigo;
 border: 1px solid indigo;
}
#violet:target ~ #nav ul {
 background-color: violet;
 border: 1px solid violet;
}
#grey:target ~ #nav ul {
 background-color: grey;
 border: 1px solid grey;
}

#red:target ~ #nav li:hover > a {
 background-color: red;
}
#orange:target ~ #nav li:hover > a {
 background-color: orange;
}
#pink:target ~ #nav li:hover > a {
 background-color: pink;
}
#green:target ~ #nav li:hover > a {
 background-color: green;
}
#blue:target ~ #nav li:hover > a {
 background-color: blue;
}
#indigo:target ~ #nav li:hover > a {
 background-color: indigo;
}
#violet:target ~ #nav li:hover > a {
 background-color: violet;
}
#grey:target ~ #nav li:hover > a {
 background-color: grey;
}

Пример получения значения в скрипте PHP

В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега <select> в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit”. Данные формы будут передаваться в тот же PHP-файл, после чего отобразится выбранный цвет:

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

Метод формы, используемый в примере — POST, поэтому можно получить значения формы с помощью массива PHP $_POST. Это код формы, используемый в примере:

<form action="" method="post">

<div class="seldemo">

<label>Select A Color: </label>

<select name="selphp">

<option value="Maroon">Maroon</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

<option value="Blue">Blue</option>

<option value="Red">Red</option>

</select>

<p><input type="submit" value="Submit" class="btncls"></p>

</div>

</form>

А вот как PHP-скрипт используется, чтобы получить значение HTML select option:

<?php

if( $_POST != "" )

{

echo "You selected the following color:<strong>". $_POST."</strong>";

}

?>

Если в форме указан метод GET, тогда используйте PHP-массив $_GET.

Примеры

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

Одна кнопка

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

Dropdown button

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

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

Primary

Secondary

Success

Info

Warning

Danger

Кнопка разделения

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

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

Primary

Toggle Dropdown

Secondary

Toggle Dropdown

Success

Toggle Dropdown

Info

Toggle Dropdown

Warning

Toggle Dropdown

Danger

Toggle Dropdown

Принцип действия и 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%;
}

Применение

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

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

Через JavaScript

Вызов выпадающих списков через JavaScript:

все еще требуется

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

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра , как в .

Имя	Тип	По умолчанию	Описание
	номер | строка | функция	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Для получения дополнительной информации обратитесь к документации по Popper.js .
	логический		Разрешить раскрывающемуся списку переворачиваться в случае перекрытия ссылочного элемента. Для получения более подробной информации обратитесь к Popper.js в .
	строка | элемент		Граница ограничения переполнения раскрывающегося меню. Принимает значения , , или ссылка на HTMLElement (JavaScript только). Для получения дополнительной информации см. Документацию .
	строка | элемент		Справочный элемент раскрывающегося меню. Принимает значения , или в качестве ссылки HTMLElement. Для получения дополнительной информации обратитесь к документации Popper.js .
	строка		По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью .
	null | объект		Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см.

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

Методы

Метод	Описание
	Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
	Показывает раскрывающееся меню данной панели навигации или навигации с вкладками.
	Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками.
	Обновляет положение раскрывающегося списка элемента.
	Уничтожает раскрывающийся список элемента.
	Статический метод, который позволяет получить раскрывающийся список, связанный с элементом DOM.

События

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

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

Комментарии для сайта Cackle

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

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

Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.