Як зробити багаторівневе меню-аккордіон на css3.

Відео: випадає МЕНЮ на чистому CSS / HTML

Всім привіт! У цій статті ми розглянемо, як зробити просте багаторівневе меню-аккордіон на CSS3.

створення структури

Структура дуже проста: аккордіон - це ненумерований список. Якщо елемент списку містить інші елементи, тоді ми вставляємо input [type = checkbox] і його мітку. Також ми додаємо .has-children клас до елементу списку. Всі "звичайні" елементи списку містять тільки посилання.

class="Cd-accordion-menu"gt; 
class="Has-children"gt; 
type="Checkbox"name="Group-1"id="Group-1"checkedgt; 
for="Group-1"gt;Group 1 
 
 
class="Has-children"gt; 
 type="Checkbox"name="Sub-group-1"id="Sub-group-1"gt; 
 for="Sub-group-1"gt;Sub Group 1 
 
  
href="# 0"gt;Image 
href="# 0"gt;Image 
href="# 0"gt;Image 
  
 
href="# 0"gt;Image 
href="# 0"gt;Image 
 
 
 
href="# 0"gt;Image 
href="# 0"gt;Image

додаємо стилі

Ми використовуємо розумну (і досить стандартну в наші дні) техніку визначення кліка і показуємо подсодержаніе з використанням тільки CSS: для checkbox елемента ми можемо використовувати псевдо-клас : checked і суміжний селектор (div + div), щоб змінити властивість display для ul з none на block.

Відео: Просте меню, що випадає

Крок за кроком: перш за все, ми повинні переконатися, що checkbox охоплює весь елемент списку, який містить подсодержаніе. Іншими словами, ми повинні створити кастомний checkbox. Отже, для початку ви повинні перевірити, коли клацає по мітці, обраний checkbox чи ні. Цього можна досягти, використовуючи for аттрибут всередині елемента мітки. Таким чином ви можете просто приховати 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:18px18px18px64px- 
 background:# 4d5158- 
 box-shadow: inset 0-1px# 555960- 
 color:# ffffff- 
 font-size:1.6rem- 
}

Зауважте, що зараз в html розмітці input, мітка і ненумерований лист є спорідненими елементами. використовуючи псевдоклас : checked, ви можете анімувати даний процес: коли checkbox обраний (кликнули по мітці), тоді властивість display для елемента 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 (lt; = 8.0.8) with multiple adjacent-sibling selectors * / 
/ * Show children when item is checked * / 
 display: block- 
}

Якщо ви хочете зробити плавну анімацію, тоді підключіть js файл. Також не забудьте додати .animate клас до .cd-accordion-menu елементу (це анімує стрілочки).

Отже, на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі