Как создать выпадающее меню с помощью html и css

Содержание:

Создание пользовательского меню выбора
Изображения
Использование
HTML структура
Примеры
- Выпадающие элементы одинарных кнопок
- Выпадающие элементы кнопок с разделенными зонами
Использование
- Через JavaScript
  - еще требуется
- События
CSS
Хак с чекбоксом
- HTML
- CSS
Примеры
- Одиночная кнопка выпадающего меню
- Split кнопка с выпадающим меню
Подсказка для текстовой области
Горизонтальное выпадающее меню с разделителями
Выпадающее меню со списком элементов на HTML
Выпадающий при наведении список меню на HTML

Создание пользовательского меню выбора

Шаг 1) добавить HTML:

Пример

<!—surround the select box within a «custom-select» DIV element.Remember
to set the width:—><div class=»custom-select» style=»width:200px;»>
<select>    <option value=»0″>Select car:</option>
<option value=»1″>Audi</option>    <option
value=»2″>BMW</option>    <option
value=»3″>Citroen</option>    <option
value=»4″>Ford</option>    <option value=»5″>Honda</option>
<option value=»6″>Jaguar</option>    <option value=»7″>Land
Rover</option>    <option value=»8″>Mercedes</option>
<option value=»9″>Mini</option>    <option
value=»10″>Nissan</option>    <option
value=»11″>Toyota</option>    <option
value=»12″>Volvo</option> </select></div>

Шаг 2) добавить CSS:

Пример

/*the container must be positioned relative:*/.custom-select {
position: relative; font-family: Arial;}.custom-select select {
display: none; /*hide original SELECT element:*/}.select-selected {
background-color: DodgerBlue;}/*style the arrow inside the select
element:*/.select-selected:after { position: absolute;
content: «»; top: 14px; right: 10px; width: 0;
height: 0; border: 6px solid transparent; border-color: #fff
transparent transparent transparent;}
/*point the arrow upwards when the select box is open (active):*/.select-selected.select-arrow-active:after
{ border-color: transparent transparent #fff transparent;
top: 7px;}
/*style the items (options), including the selected item:*/.select-items
div,.select-selected { color: #ffffff; padding: 8px 16px;
border: 1px solid transparent; border-color: transparent transparent
rgba(0, 0, 0, 0.1) transparent; cursor: pointer;}/*style items (options):*/
.select-items { position: absolute; background-color:
DodgerBlue; top: 100%; left: 0; right: 0;
z-index: 99;}/*hide the items
when the select box is closed:*/.select-hide { display: none;
}
.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1);}

Шаг 3) добавить JavaScript:

Пример

var x, i, j, selElmnt, a, b, c;/*look for any elements with the class
«custom-select»:*/x = document.getElementsByClassName(«custom-select»);
for (i = 0; i < x.length; i++) { selElmnt = x.getElementsByTagName(«select»); /*for each element, create a new
DIV that will act as the selected item:*/
a = document.createElement(«DIV»); a.setAttribute(«class»,
«select-selected»); a.innerHTML = selElmnt.options.innerHTML;
x.appendChild(a); /*for each element, create a new DIV that will
contain the option list:*/ b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»); for (j =
1; j < selElmnt.length; j++) {    /*for each option in the
original select element,    create a new DIV that will act
as an option item:*/    c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options.innerHTML;
c.addEventListener(«click», function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/        var y,
i, k, s, h;        s =
this.parentNode.parentNode.getElementsByTagName(«select»);
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options.innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
for (k = 0; k < y.length; k++) {
y.removeAttribute(«class»);
}
this.setAttribute(«class», «same-as-selected»);
break;          }
}        h.click();
});    b.appendChild(c); } x.appendChild(b);
a.addEventListener(«click», function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();      closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»); });}function closeAllSelect(elmnt) { /*a function that will
close all select boxes in the document, except the current select
box:*/ var x, y, i, arrNo = []; x =
document.getElementsByClassName(«select-items»); y =
document.getElementsByClassName(«select-selected»); for (i = 0; i <
y.length; i++) {    if (elmnt == y) {
arrNo.push(i)    } else {
y.classList.remove(«select-arrow-active»);    }
} for (i = 0; i < x.length; i++) {    if (arrNo.indexOf(i))
{      x.classList.add(«select-hide»);
} }}/*if the user clicks anywhere outside the select box,then
close all select boxes:*/document.addEventListener(«click», closeAllSelect);

❮ Назад
Дальше ❯

Изображения

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

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

Через атрибуты или 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 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-тегов

Примеры

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

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :

Кнопка выпадающего списка

А вот так — с элементами:

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

Главная

Вторичная

Успех

Инфо

Предупреждение

Опасность

Выпадающие элементы кнопок с разделенными зонами

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

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

Главная

Toggle Dropdown

Вторичная

Toggle Dropdown

Успех

Toggle Dropdown

Инфо

Toggle Dropdown

Предупреждение

Toggle Dropdown

Опасность

Toggle Dropdown

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

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

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

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

Через JavaScript

Вызвать меню через JavaScript:

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

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

События

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

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

CSS

Пришло время заняться непосредственно выпадающим меню. Сначала, импортируем шрифты, которые будут использоваться для элементов нашего меню и заголовков:

@font-face
{
    font-family: Museo500-Regular;
    src: url('../fonts/Museo500-Regular.otf');
}

Теперь добавим стили для настройки общего вида: background с шестнадцатеричным значением #263544 и font face со значением Museo 500. Затем, установим несколько стилей для тегов <a> и <h2>:

body {background: #263544; font-family: Museo500-Regular;}
a{text-decoration: none;}
h2 {color: #fff; font-size: 22px; margin: 0 24px;}

Теперь, напишем стили для контейнеров иконок, в которых мы будем скрывать текст меню. Используя неупорядоченный список, определим класс icon-menu, где будем хранить все наши иконки меню.

Следующим будет класс icon-box с размерами 120 на 120 пикселей. Далее, обратимся по имени класса к каждому пункту меню и изменим для каждого из них значение свойства background:

ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px;position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2pxrgba(150, 150, 150, 1);}
.icon-box a {display: block;}

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

span.icon {display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 45px;}
span.icon.home {background-position: 0px 0px;}
span.icon.aboutme {background-position: -36px 0px;}
span.icon.portfolio {background-position: -72px 0px;}
span.icon.blog {background-position: -109px 0px;}
span.icon.contact {background-position: -145px 0px;}

Для имени пункта меню будем использовать тег <h2>. Зададим ему position в значении absolute и подвинем влево. Используя свойство z-index, скроем текст под иконкой и контейнером.

Используя атрибут transition, мы можем добавить эффект плавной замены одного стиля другим без использования Flash-анимации или JavaScript.

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

.icon-box.home h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #E74C3C;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        border-left: 3px solid #a7382d;
 
}
 
.icon-box.home a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.aboutme h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #1dd0ad;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #0d866e;
}
 
.icon-box.aboutme a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.portfolio h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #3498db;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #2177b1;
}
 
.icon-box.portfolio a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.blog h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #f1c40f;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #b8960e;
}
 
.icon-box.blog a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.contact h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #f39c12;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #bc780d;
}
 
.icon-box.contact a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}

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

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

Нам нужно переключить отображение меню, используя только 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 до большого числа.

Примеры

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

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

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

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

Подсказка для текстовой области

И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.

Благодаря атрибуту 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>.

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

Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.

Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:

Сразу после </title>.

Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:

Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

Скачать пример

Преимуществами такого решения является:

меню будет тянутся динамически;
отступы от разделителя до пункта везде одинаковые;
более красивое и гибкое оформление.

Выпадающее меню со списком элементов на 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

И снова мы изобретаем меню на чистом CSS, без использования JS.

<ul id=»menu»><li><a href=»#»>Раздел меню №1<a><li><li><a href=»#»>Раздел меню №2<a>
<ul>
<li><a href=»#»>Подраздел №1 второго меню<a><li>
<li><a href=»#»>Подраздел №2 второго меню<a><li>
<ul><li><li><a href=»#»>Раздел меню №3<a>
<ul>
<li><a href=»#»>Подраздел №1 третьего меню<a><li>
<li><a href=»#»>Подраздел №2 третьего меню<a><li>
<li><a href=»#»>Подраздел №3 третьего меню<a><li>
<ul><li> <ul>

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

Результат:

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

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