Как сделать аккордеон меню на чистом CSS.

Очередной аккордеон! Сегодня мы с вами рассмотри как сделать аккордеон-меню для сайта. Рассмотрим реализацию вертикального меню для боковой панели в виде аккордеона. Код представленный в записи используется для демонстрации, поэтому стили у него простые.

HTML

И так давайте разберём html код многоуровневое аккордеон-меню. Элемент с классом — prog_time_menu это основной контейнер, в котором находится все компоненты. Внутри элемента с классом submenu находятся подпункты и другие под меню.

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

<ul class="prog_time_menu">
   <li class="submenu">
        <!-- Поля input нужны для отлова нажатия на пункт, который имеет подпункты. Пользователь нажимает на label, нажатие передается на input с id указанным внутри атрибута for -->
        <input type="checkbox" name="pt_1" id="pt_1" checked>
	<label for="pt_1">Пункт меню 1(с подпунктами)</label>
        <!-- Подпункты как и основные пункты тоже добавляются во внутрь конструкции ul. -->
  	<ul>
  	   <li class="submenu">
  	      <input type="checkbox" name ="sub-pt_1" id="sub-pt_1">
	      <label for="sub-pt_1">Подпункт меню 1(с подпунктами)</label>
		   <ul>
			<li><a href="#0">Подпункт меню 2</a></li>
			<li><a href="#0">Подпункт меню 3</a></li>
			<li><a href="#0">Подпункт меню 4</a></li>
		   </ul>
  	   </li>
           <!-- Подпункты без подменю содержат простые ссылки-->
  	   <li><a href="#">Подпункт меню 2</a></li>
	   <li><a href="#">Подпункт меню 3</a></li>
  	</ul>
   </li>
   <li><a href="#">Image</a></li>
   <li><a href="#">Image</a></li>
</ul>

CSS

.prog_time_menu, .prog_time_menu ul {
    list-style: none; //убираем маркеры для списков
}
.prog_time_menu input[type=checkbox] {
    position: absolute; //позиционируем поля абсолютно, чтобы они не мешали и не занимали пространство 
    opacity: 0; //ставим прозрачность на 0 (полностью прозрачный)
}
.prog_time_menu label, .prog_time_menu a {
    position: relative; //обычное позиционирование
    display: block; //блочный элемент
    padding: 18px 18px 18px 64px; //внутренний отступ
    background: #fafafa; //задний фон
    border: 1px solid #555960; //цвет и ширина границ
    color: #555960; //цвет текста
    font-size: 1.6rem; //размер шрифта
    margin: 0; //наружный отступ
}
/*Изначально наши пункты меню будут скрыты*/
.prog_time_menu ul {
    display: none; //не позиционировать (скрывать)
}
/*После нажатия на пункт меню, будет запускаться поиск внутри него ul и ему будет задаваться указанное свойство */
.prog_time_menu input[type=checkbox]:checked + label + ul,
.prog_time_menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	display: block;
}

Добавочка

Теперь давайте рассмотрим как реализовать открытие меню при наведение на его пункты. Здесь тоже все очень просто…мы заменяем checked на hover и добавляем одно условие .prog_time_menu .submenu ul:hover , для того чтобы наше меню не закрывалось когда мы убираем курсор с подпункта на его «внутренние части«.

/*............*/
.prog_time_menu input[type=checkbox]:hover + label + ul, .prog_time_menu .submenu ul:hover, .prog_time_menu input[type=checkbox]:hover + label:nth-of-type(n) + ul {
    display: block;
    transition: 0.5s;
}
/*...........*/