Вертикальное раскрывающееся меню HTML + CSS + jQuery
4 года назад

Вертикальное раскрывающееся меню HTML + CSS + jQuery

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

Плавность раскрывающихся элементов подменю придадут красоту и стилизацию, поэтому будем использовать CSS свойство transition. Изначально все подпункты меню будут свернуты, кроме основного раздела. Чтобы задать по умолчанию открытый раздел меню необходимо установить ul:eq(3), где eq(x) может принимать значение от 0 - до последнего пункта меню. Нумерация идентификаторов меню начинается с 0.

Как раскрыть подпункты меню определнного раздела jQuery

$('#menu ul:eq(3)').show();
$('#menu li a.deactive:eq(3)').addClass('active');

В данном примере мы указали что четвертый пунт меню по умолчанию будет развернут.

Ниже представлены: HTML разметка страницы, оформление меню CSS, скрипт аккордеон jQuery.

menu.htm
<ul id="menu">
 <li><a href="" class="deactive"><img src="icons8-folder-16.png" alt="">Раздел 1</a>
 <ul>
  <li><a>Подраздел 1</a></li>
  <li><a>Подраздел 2</a></li>
  <li><a>Подраздел 3</a></li>
 </ul>
 </li>
 <li><a href="" class="deactive"><img src="icons8-folder-16.png" alt="">Раздел 2</a>
 <ul>
  <li><a>Подраздел 1</a></li>
  <li><a>Подраздел 2</a></li>
  <li><a>Подраздел 3</a></li>
  <li><a>Подраздел 4</a></li>
  <li><a>Подраздел 5</a></li>
  <li><a>Подраздел 6</a></li>
  <li><a>Подраздел 7</a></li>
  <li><a>Подраздел 8</a></li>
 </ul>
 </li>
 <li><a href="" class="deactive"><img src="icons8-folder-16.png" alt="">Раздел 3</a>
 <ul>
  <li><a>Подраздел 1</a></li>
 </ul>
 </li>
 <li><a href="" class="deactive"><img src="icons8-folder-16.png" alt="">Раздел 4</a>
 <ul>
  <li><a>Подраздел 1</a></li>
  <li><a>Подраздел 2</a></li>
  <li><a>Подраздел 3</a></li>
  <li><a>Подраздел 4</a></li>
  <li><a>Подраздел 5</a></li>
  <li><a>Подраздел 6</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;
}

h1 {
	text-align: center;
}

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

ul#menu ul {
 display: none;
}

ul#menu li.selected ul {
 display: block;
}

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;
}

ul#menu li > ul li a:after { 
 content: '';
}  
 
.deactive:after {
 content: '\002B';
 color: #fff;
 font-weight: bold;
 float: right;
 margin-left: 5px;
}

.active:after {
 content: "\2212";
 color: #fff;
 font-weight: bold;
 float: right;
 margin-left: 5px;
}
acordeon.js
$(document).ready(function(){
 initMenu();
});

function initMenu() {

$('#menu ul').hide();
$('#menu ul:eq(3)').show();
$('#menu li a.deactive:eq(3)').addClass('active');

$('#menu').each(function () {
 var $toggle = $(this);
 $('li a', $toggle).not("ul li ul a").click(function () {
 if($(this).hasClass('active')){
 $(this).removeClass("active");
 } else{
 $('li a').removeClass('active');
 $(this).addClass('active');
 }
 });
});

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

 return false;
 }

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

 return false;
 }
});

}
10,3K
Комментарии
  • Maxtech3 года назад
    Как реализовать в вашем аккордеоне, чтобы открытая группа позиции в меню соответствовала открытой странице конкретной группы?
    Ответить
  • Ser3 года назад
    Присваиваете открытой группе номер можно название страницы, соответствующий странице и соответственно код, отвечающий за отображение этой группы.
    Ответить
  • Андрей3 года назад
    Здравствуйте. Как сделать, чтобы n1. при клике на подкатегорию, категория должна оставаться открытой и быть активной border-left,n2. при клике по категории с открытыми подкатегориями, эта категория так же должна закрываться?
    Ответить
  • Sasha7 месяцев назад
    Здравствуйте, подскажите как сделать чтобы при нажатии на пункт меню, соответственно был нужный переход по ссылке И меню сворачивалось, а не раскрывалось как сейчас. Меню планируется использовать для мобильной версии сайта и очень неудобно когда при переходе по ссылке оно полностью разворачивается.
    Ответить