2 Июля 2018

Вертикальное раскрывающееся меню аккордеон на HTML5 + CSS3 + JS

Вертикальное раскрывающееся меню аккордеон один из способ сократить объем информации на странице, без потери содержания. Каждый из разделов содержит в свернутом виде подпункты основного. Преимущества таких меню заключается в том, что при клике на раздел меню, раскрываются подпункты основного раздела. При переходе на другой основной раздел, разворачиваются подпункты следующего.

Плавность раскрывающихся элементов подменю придадут красоту и стилизацию, поэтому будем использовать css свойство transition. Изначально все подпункты меню будут свернуты, кроме основного раздела.

Все подпункты меню свернуты 
$('#menu ul').hide();
Все подпункты меню развернуты 
$('#menu ul').show();
Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 
$('#menu ul').hide();
$('#menu ul:eq(1)').show();
Два подпункта меню развернуты 
$('#menu ul').hide();
$('#menu ul:eq(1)').show();
$('#menu ul:eq(3').show();
menu.htm 
<ul id="menu">
  <li><a href=""><img src="1.png" alt=""> Меню и навигация</a>
      <ul>
        <li><a href="">Горизонтальные меню</a></li>
        <li><a href="">Вертикальные меню</a></li>
        <li><a href="">Выпадающие меню</a></li>
        <li><a href="">Аккордеон</a></li>
      </ul>
    </li>
    <li>
      <a href=""><img src="2.png" alt=""> Интерфейс</a>
      <ul>
        <li><a href="">Формы</a></li>
        <li><a href="">Модальные окна</a></li>
        <li><a href="">Скроллинги</a></li>
        <li><a href="">Блоки</a></li>
      </ul>
    </li>
    <li>
      <a href=""><img src="3.png" alt=""> Статьи и уроки</a>
      <ul>
        <li><a href="">Скорость закгрузки сайта</a></li>
        <li><a href="">Битые ссылки</a></li>
        <li><a href="">Оптимизация сайта</a></li>
        <li><a href="">Поднятие в поисковой выдачи</a></li>
      </ul>
    </li>
    <li>
      <a href=""><img src="4.png" alt=""> Mac OS</a>
      <ul>
        <li><a href="">Удленитель питания</a></li>
        <li><a href="">ТОП 5 переходников</a></li>
        <li><a href="">Mac OS High Sierra</a></li>
        <li><a href="">Взрывы iPhone 8</a></li>
      </ul>
    </li>
</ul>
style.css 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html,body {
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 background: #fafafa;
 margin: 20px 0 0 0;
 padding: 0;
}

ul#menu, ul#menu ul {
 list-style-type:none;
 width: 280px;
 margin: 0 auto;
 padding: 0;
}

ul#menu a {
 display: block;
 text-decoration: none;  
}

ul#menu li {
 margin-top: 1px;
}

ul#menu li a img {
 vertical-align: middle;
 padding: 0 5px 5px 0;
}

ul#menu li a {
 background: #878e9c;
 color: #fff;  
 padding: 12px;
 -webkit-transition: 0.1s;
 -moz-transition: 0.1s;
 transition: 0.1s;
 font-family: 'Roboto', sans-serif;
 font-size: 14px; 
}

ul#menu li a:hover {
 background: #757b87;
}

ul#menu li ul li a {
 background: #ebeaec;
 color: #333;
 padding-left: 20px;
}

ul#menu li ul li a:hover {
 background: #d4d3d5;
 padding-left: 25px;
}
acordeon.js 
$(document).ready(function(){
  initMenu();
});

function initMenu() {

$('#menu ul').hide();
$('#menu ul:eq(1)').show();

$('#menu li a').click(
  function() {
    var iselemnt = $(this).next();
    if((iselemnt.is('ul')) && (iselemnt.is(':visible'))) {
      return false;
    }

    if((iselemnt.is('ul')) && (!iselemnt.is(':visible'))) {
      $('#menu ul:visible').slideUp('normal');
      iselemnt.slideDown('normal');
      return false;
    }
  }
);

}

Источник - http://bhtml.ru/22