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

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;
 
}

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

Структура HTML

Как видите, в HTML коде — ничего лишнего. Структура содержит минимальное количество элементов, и в ней очень просто разобраться.

<ul id="menu">
        <li><a href="#">Главная</a></li>
        <li>
                <a href="#">Категории</a>
                <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Графический дизайн</a></li>
                        <li><a href="#">Инструменты разработчика</a></li>
                        <li><a href="#">Веб дизайн</a></li>
                </ul>
        </li>
        <li><a href="#">Работы</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
</ul>

Очень важно, чтобы HTML структура была осмысленной. У меня она построена логически и понимается как надо, хотя и не стилизована пока что:

Доступность

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

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов ( и ), необходимых для меню согласно стандарту ARIA.

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

Группировка пунктов меню

Давайте рассмотрим следующий тег <optgroup>, который используется для группировки связанных данных в раскрывающемся списке <select> и предназначен для более удобного представления информации пользователям.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Группа №1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Группа №2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:


Рис. 39 Группировка данных в раскрывающемся списке HTML.

В следующем примере с использованием логического атрибута disabled мы отключим одну группу («Group B«):

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута disabled HTML тега <optgroup></title>
	</head>
	<body>
		<select>
			<optgroup label = "Group A"> <!--Группа №1 -->
				<option>A.1</option>
			</optgroup>
			<optgroup label = "Group B" disabled> <!--Группа №2 (отключена)-->
				<option>B.1</option>
				<option>B.2</option>
			</optgroup>
			<optgroup label = "Group C"> <!--Группа №3 -->
				<option>C.1</option>
				<option>C.2</option>
				<option>C.3</option>
			</optgroup>
		</select>
	</body>
</html>

Результат нашего примера:


Рис. 39а Отключение группы (пример использования атрибута disabled HTML тега <optgroup>).

Разметка

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

<div class="container">
<a class="toggleMenu" href="#">Меню</a>
<ul class="nav">
	<li  class="test">
		<a href="#">Обувь</a>
		<ul>
			<li>
				<a href="#">Женская</a>
				<ul>
					<li><a href="#">Сандали</a></li>
					<li><a href="#">Кроссовки</a></li>
					<li><a href="#">Лодочки</a></li>
					<li><a href="#">На каблуке</a></li>
					<li><a href="#">Мокасины</a></li>
					<li><a href="#">Сланцы</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Мужская</a>
				<ul>
					<li><a href="#">Мокасины</a></li>
					<li><a href="#">Кроссовки</a></li>
					<li><a href="#">Классические</a></li>
				</ul>
			</li>
		</ul>
	</li>

Примеры

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

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

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

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

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

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

Главная

Вторичная

Успех

Инфо

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

Опасность

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

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

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

Главная

Toggle Dropdown

Вторичная

Toggle Dropdown

Успех

Toggle Dropdown

Инфо

Toggle Dropdown

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

Toggle Dropdown

Опасность

Toggle Dropdown

CSS

Для меню используются следующие стили:

#fdw nav select {
	display:none; /* Для дисплеев мобильных устройств */
}
#fdw nav ul {
	display:block;
	z-index:999999;
}
#fdw nav ul li {
	display:inline-block;
	padding:50px 3px 30px;
	margin-left:30px;
	position:relative;
}
#fdw nav ul li a:link, #fdw nav ul li a:visited {
	color:#444;
	font:normal 20px 'Yanone Kaffeesatz', sans-serif;
	text-transform:uppercase;
	display:inline-block;
	position:relative;
}
#fdw nav ul li a:hover, #fdw nav ul li a:active {
	color:#e25d29;
	text-decoration:none;
}
#fdw nav ul li span {
	position:absolute;
	right:-12px;
	bottom:6px;
	width:7px;
	height:8px;
	margin:0 0 0 3px;
	float:right;
	display:block;
	background:url('images/nav_arrow.png') no-repeat left -8px;
	font:0/0 a;
}
#fdw nav ul li.current {
	border-bottom:2px solid #e25d29;
}
#fdw nav ul li.current a {
	color:#e25d29;
	cursor: default;
}
#fdw nav ul li.current a span {
	background:url('../images/nav_arrow.png') no-repeat left 0;
}
#fdw nav ul li.current ul li a {
	cursor:pointer;
}

/*===== Стили для sub_menu =======*/
#fdw nav ul li ul.sub_menu {
	position:absolute;
	top:90px;
	left:0;
	margin:0;
	padding:0;
	background:#fff;
	border:1px solid #ececec;
	border-top:5px solid #e25d29;
	display:none;
	z-index:999999;
    -moz-box-shadow: 0px 6px 7px #121012;
    -webkit-box-shadow: 0px 6px 7px #121012;
    box-shadow: 0px 6px 7px #121012;
}
#fdw nav ul li ul.sub_menu li.arrow_top {
	position:absolute;
	top:-12px;
	left:12px;
	width:13px;
	height:8px;
	display:block;
	border:none;
	background:url('images/arrow_top.png') no-repeat left top;
}
#fdw nav ul li ul.sub_menu li {
	float:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #ececec;
}
#fdw nav ul li ul.sub_menu li a {
	white-space: nowrap;
	width: 150px;
	padding:12px;
	font:13px Arial, tahoma, sans-serif;
	text-transform:capitalize;
	color:#777;
}
#fdw nav ul li ul.sub_menu li a:hover {
	background:#f9f9f9;
	color:#333;
}
#fdw nav ul li ul.sub_menu li a.subCurrent {
	color:#e25d29;
	cursor:default;
}
#fdw nav ul li ul.sub_menu li a.subCurrent:hover {
	background:none;
}
/*===========================================*/


@media only screen and (min-width: 768px) and (max-width: 959px) {
		/* nav */
		#fdw nav ul li{
			margin-left:12px;
		}
}

	/* Для всех мобильных устройств */
@media only screen and (max-width: 767px) {

		/* Навигационное меню */
		#fdw nav ul {
			display:none;
		}
		#fdw nav select {
			width:100%;
			display:block;
			margin-bottom:30px;
			cursor:pointer;
			padding:6px;
			background:#f9f9f9;
			border:1px solid #e3e3e3;
			color:#777;
		}
}

Разберемся с jQuery

Теперь нам надо создать пользовательский скрипт. Мы создадим его в нашем HTML документе, добавим тэг сразу после декларирования jQuery:

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

Сначала наш документ загружается и, когда он загружен на 100%, скрипт приступает к действию:

Мы помещаем весь код нашего скрипта внутрь выше описанной функции. Сначала нам нужно скрыть неупорядоченный список с помощью следующего кода:

Теперь добавляем функцию, которая сворачивает/разворачивает список:

Давайте разберем далее подробно, что происходит в данном коде. Когда вы нажимаете кнопку мыши на «+», который является элементом h3 span, элемент ul, который является следующим элементом родительского элемента h3 span (это h3) начинает сворачиваться/разворачиватся.

Теперь сделаем наш список боле интересным. Выделим четные строки списка с помощью следующего кода:

Удаляем overflow:hidden;

Чтобы меню с выпадающими пунктами заработало, нужно удалить правило из стилей элемента centeredmenu div. Если просто удалить данное правило, то может появиться полоска горизонтальной прокрутки для страницы. Это происходит потому, что невидимый элемент ul иногда выходит за правую границу области видимости. Однако не стоит беспокоиться. Есть решение.  Мы можем предотвратить выход элемента за правую границу области видимости, перевернув позиционирование элементов меню так, чтобы элемент ul выступал с левой стороны. Ниже представлен измененный код CSS:

#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:right;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

На рисунке представлена диаграмма того, что происходит с элементами при использовании выше приведенных правил:

Обратите внимание, что розовый элемент ul выступает теперь с левой стороны страницы. Браузер автоматически обрезает все, что выходит за границу области видимости слева

Поэтому нам не нужно использовать правило !

Выпадающий список с быстрым поиском

Классический выпадающий список в ячейке листа Excel, сделанный через Данные – Проверка (Data – Validation) – простая и удобная штука, которую ежедневно применяют очень многие пользователи. Однако, у этого списка есть один весьма серьезный недостаток – в нём нет быстрого поиска по первым символам, т.е. фильтрации (отбора) только тех значений, куда введённый фрагмент входит как подстрока. Это серьезно ухудшает удобство пользования даже если в списке всего пара-тройка десятков позиций, а при нескольких сотнях убивает юзабилити напрочь.

Давайте рассмотрим как всё же реализовать подобный трюк. В качестве подопытного кролика возьмём список 250 лучших фильмов по версии IMDb:

Конечная цель – создать выпадающий список (ячейка G3), в котором можно будет быстро находить нужные фильмы, введя только жанр, год или фрагмент названия, например “гамп”.

Шаг 1. Определяем, кто нам нужен

Сначала нам нужно понять, какие из исходных ячеек нужно показывать в списке, т.е. определить содержится ли введённый в выпадающем списке текст (например, жанр “детектив”) в названии фильма. Для этого добавим слева от исходных данных еще один столбец с функцией ПОИСК (SEARCH ) , которая ищет заданную подстроку в тексте и выдает либо порядковый номер символа, где он был обнаружен, либо ошибку, если его там нет:

Теперь завернем нашу формулу в функцию проверки ЕЧИСЛО (ISNUMBER) , которая превратит числа в логическую ИСТИНУ (TRUE) , а ошибки – в ЛОЖЬ (FALSE) :

Теперь сделаем так, чтобы ЛОЖЬ превратилась в 0, а вместо ИСТИНА в столбце появились последовательно возрастающие индексы-числа 1,2,3. и т.д. Это можно сделать с помощью добавления к нашей же формуле ещё парочки функций:

Здесь функция ЕСЛИ (IF) проверяет что мы имеем (ИСТИНУ или ЛОЖЬ), и

  • если была ИСТИНА, то выводит максимальное значение из всех вышестоящих чисел + 1
  • если была ЛОЖЬ, то выводит 0

Шаг 2. Отбираем в отдельный список

Дальше – проще. Теперь банальной функцией ВПР (VLOOKUP) просто выведём все найденные названия (я добавил столбец с порядковыми номерами для удобства):

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

Шаг 3. Создаем именованный диапазон

Теперь создадим именованный диапазон, который будет ссылаться на отобранные фильмы. Для этого выбрем на вкладке Формулы команды Диспетчер имен – Создать (Formulas – Name Manager – Create) :

Имя диапазона может быть любым (например, Фильмы), а самое главное – это функция СМЕЩ (OFFSET) , которая и делает всю работу. Напомню её синтаксис, если вы подзабыли:

=СМЕЩ( начальная_ячейка ; сдвиг_вниз ; сдвиг_вправо ; высота ; ширина )

  • В качестве начальной ячейки задаём первую ячейку списка отобранных элементов (E2).
  • Сдвиги вниз и вправо у нас отсутствуют, т.е. равны нулю.
  • Высота диапазона у нас соответствует максимальному значению индекса из столбца А.
  • Ширина диапазона – 1 столбец.

Осталось сделать выпадающий список.

Шаг 4. Создаем выпадающий список

Выделим жёлтую ячейку (G2) и выберем на вкладке Данные команду Проверка данных (Data – Validation) . В открывшемся окне выбрем Список (List) в поле Тип данных (Allow) , а в качестве источника введем имя нашего созданного диапазона со знаком равно перед ним:

Чтобы Excel не ругался при вводе на неточное совпадение наших фраз с исходным списком, на вкладке Сообщение об ошибке (Error Alert) в этом окне нужно выключить флажок Выводить сообщение об ошибке (Show error alert) :

Вот и всё. Можно жать на ОК и наслаждаться результатом:

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

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

Всё, что мы делали на Шагах 1-3 заменяется одной(!) формулой, где новая функция ФИЛЬТР (FILTER) отбирает из исходного диапазона A2:A251 только те фильмы, которые содержат заданную подстроку.

А дальше останется при создании выпадающего списка указать в качестве источника первую ячейку диапазона отобранных фильмов (C2) и добавить к ней знак #, чтобы получить ссылку на весь динамический массив:

И всё. Никаких именованных диапазонов и медленных СМЕЩ, никаких танцев с дополнительными столбцами и формулами. Песня!

CSS

#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}

Для больших экранов

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

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

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

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

СКАЧАТЬ ИСХОДНЫЙ КОД

Данная публикация является переводом статьи «How To Create a Responsive Dropdown Navigation Using Only CSS» , подготовленная редакцией проекта.

Подготовка иконок меню

Скачайте набор из 80 иконок. В данной статье мы будем использовать следующие иконки:

  • Home;
  • User;
  • Portfolio;
  • Chat;
  • Envelope.

Чтобы найти нужные иконки, откройте файл PSD из архива и найдите слои с соответствующими названиями.

Итак, перетащите иконку Home в новый PSD-файл в Photoshop. Затем выберите пункт меню «Image -> Canvas Size» и добавьте область в 16 пикселей слева.

Убедитесь, что якорь установлен вправо, как на картинке ниже:

User

Это можно сделать, нажав комбинацию клавиш Ctrl+A на клавиатуре и кликнув по кнопке «align right edges», находящейся на панели инструментов Align сверху:

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

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

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

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий