Уроки мастерства


Многоуровневое меню


Содержание урока

Сегодня мы представляем Вам удобное меню-аккордеон с поддержкой групп/подгрупп. Данное меню работает только на CSS3, используя :checked псевдо-селектор класса входных элементов. Однако мы включили и версию с jQuery, в случае, если вы предпочитаете плавную анимацию по сравнению с мгновенным эффектом по умолчанию. Выбор за Вами!

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

Создание структуры

Структура HTML довольно проста: на аккордеоне-это неупорядоченный список. Если элемент списка содержит подэлементы, вставляем input[type=checkbox] и его метки. Также, мы добавим класс .has-children к элементу списка. Все “стандартные” элементы списка содержат только ссылки.

<ul class="cd-accordion-menu">
	<li class="has-children">
		<input type="checkbox" name ="group-1" id="group-1" checked>
		<label for="group-1">Group 1</label>
  		<ul>
  			<li class="has-children">
  				<input type="checkbox" name ="sub-group-1" id="sub-group-1">
				<label for="sub-group-1">Sub Group 1</label>
				<ul>
					<li><a href="#0">Image</a></li>
					<li><a href="#0">Image</a></li>
					<li><a href="#0">Image</a></li>
				</ul>
  			</li>
  			<li><a href="#0">Image</a></li>
			<li><a href="#0">Image</a></li>
  		</ul>
	</li>
	<li><a href="#0">Image</a></li>
	<li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu -->

Добавление CSS3

Мы используем умные (и довольно стандартный в наше время) техники для обнаружения нажатия на кнопку Показать суб-Контент с помощью CSS3: только путем включения checkbox входного элемента, мы можем использовать :checked псевдо-класса и прилегающей родственный селектор (тег div + div), чтобы изменить режим отображения на дополнительный элемент <UL> с “none” на “block”.

Шаг за шагом: прежде всего, мы должны убедиться, что checkbox вводного элемента охватывает все элементы списка и содержит в себе все подэлементы. Иными словами: нам необходимо создать пользовательский checkbox. Так, во-первых, вы должны убедиться, что когда вы щелкаете на ярлыке, галочка стоит/снят. А также это достигается при помощи атрибута “for” внутри label (метка “for” атрибут = ввода “name” и “id” атрибутами. HTML-код см. раздел выше). Таким образом, Вы можете просто скрыть элемент ввода (Input) и работать вместо этого с лейблом.

.cd-accordion-menu input[type=checkbox] {
	/* hide native checkbox */
	position: absolute;
	opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
	position: relative;
	display: block;
	padding: 18px 18px 18px 64px;
	background: #4d5158;
	box-shadow: inset 0 -1px #555960;
	color: #ffffff;
	font-size: 1.6rem;
}
Теперь обратите внимание на структуру input в HTML, метку и неупорядоченный список (который мы сделать видимыми по клику) являются братьями и сестрами. При помощи :checked псевдо-класса, вы можете установить следующий порядок движения: при установленном флажке input проверяется (нажатие на label), затем тег <UL> сестринского элемента изменяет его значение отображения с “none” на “block”.
.cd-accordion-menu ul {
	/* by default hide all sub menus */
	display: none;
}
 
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	/* use label:nth-of-type(n) to fix a bug on safari (&amp;lt;= 8.0.8) with multiple adjacent-sibling selectors*/
	/* show children when item is checked */
	display: block;
}

Если вы хотите аккуратно анимировать фазы открытия меню, необходимо включить .js-файл. Также не забудьте добавить класс .animate к основному .cd-accordion-menu элементу (это будет анимировать стрелку вращения).

Скачать Пример с анимацией Пример без анимации



Технологии

CSS3
jQuery

Новые комментарии



    Оставить комментарий