В сегодняшнем уроке мы рассмотрим замечательный прием, который поможет сохранить место у вас на сайте, а именно многоуровневое выпадающее меню, которое позволит сэкономить много на сайте, при этом пользователю интуитивно понятно, что следует за дочерним элементом. Благодаря такой навигации вы можете сократить количество отображаемой информации на сайте при этом качественно ее оформить. Данный пример разработан исключительно средствами CSS. Так же мы добавили и версию с применением jQuery.
Чтобы получить такую функцию мы использовали несколько знакомых Вам, с уроков ранее, а именно псевдо-класс :checked
. И так, давайте приступим.
HTML
HTML структура довольно-таки проста: аккордеон представляет собой ненумерованный список. Если у элемента есть вложенность, то мы добавляем input[type=checkbox]
и название. Так же присваиваем этому элементу класс .has-children
. Все “стандартные” элементы списка содержат ccылки:
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">Главная</label>
<ul>
<li class="has-children">
<input type="checkbox" name ="sub-group-1" id="sub-group-1">
<label for="sub-group-1">Уроки</label>
<ul>
<li><a href="#0">Новые</a></li>
<li><a href="#0">Старые</a></li>
<li><a href="#0">Популярные</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name ="sub-group-2" id="sub-group-2">
<label for="sub-group-2">Контакты</label>
<ul>
<li class="has-children">
<input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
<label for="sub-group-level-3">Интересно</label>
<ul>
<li><a href="#0">Как сделать</a></li>
<li><a href="#0">Подробно</a></li>
</ul>
</li>
<li><a href="#0">Разработка</a></li>
</ul>
</li>
<li><a href="#0">Веб-дизайн</a></li>
<li><a href="#0">Вопросы</a></li>
</ul>
</li>
Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox
, мы сможем воспользоваться псевдо-классом :checked
и сменить отображение потомков с none
на block
.
CSS
Теперь нам нужно настроить checkbox
под себя. Во-первых, при клике по label
, checkbox
должен заполняться или очищаться. Для этого мы используем атрибут for
элемента label
(атрибут label for
= атрибуты input name
и “id”). Таким образом мы можем спрятать элемент 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
, извлекается 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
(смена направления стрелок).