Многоуровневое аккордеон-меню

demosourse

Простое аккордеон-меню средствами CSS.

Данный пример разработан исключительно средствами CSS, а именно гвоздём программы стал псевдо-класс :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 -->

Добавляем стиль

Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox, мы сможем воспользоваться псевдо-классом :checked и сменить отображение потомков с “none” на “block”.

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

.cd-accordion-menu input[type=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;
}

Теперь обратите внимание на HTML: input, label и ненумерованный список - соседи. При клике по checkbox (по факту клик по label), извлекается <ul> элемент и меняется режим отображения с “none” на “block”:

.cd-accordion-menu ul {
	display: none;
}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	display: block;
}

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/css-multi-level-accordion-menu/
Перевел: Станислав Протасевич
Урок создан: 28 Октября 2015
Просмотров: 27015
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Сентября 2016 15:34
    xocotle
    Подскажите, а есть решение с куками? Мне нужно чтобы меню при переходе по ссылке не меняло своего развернутого положения
^ Наверх ^