/ Scripts & jquery / Вертикальное многоуровневое меню

Вертикальное многоуровневое меню

04.06.2022

749

Создадим вертикальное многоуровневое меню. За основу берем верстку стандартного меню WordPress. Условно у меню будет id menu.

jQuery(document).ready(function($){
	
	// Убираем ссылку из пунктов с подменю, добавляем им стрелку вперед и создаем кнопку назад из подменю
	$('#menu li.menu-item-has-children > a').removeAttr("href");
	$('#menu li.menu-item-has-children').append('<span class="dl-forward"><i class="icon-chevron-right2"></i></span>');
	$('#menu ul.sub-menu').prepend('<li class="dl-back"><i class="icon-chevron-left2"></i> назад</li>');
	
	// Добавление класса актив при переходе в подменю и обратно
	$('#menu li.menu-item-has-children a').on('click', function(){
		$(this).next().addClass('active');
	});
	
	$('#menu .dl-back').on('click', function(){
		$(this).parent('ul.sub-menu').removeClass('active');
	});
	
});

Стили:

#menu {
    position: relative;
	padding: 0 30px;
	height: 100%;
}

#menu ul li {
    list-style: none;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
}

#menu ul > li.menu-item-has-children > a, #menu .dl-back {text-decoration: none; cursor: pointer;}

#menu ul.sub-menu {
	width: 100%;
	height: 100%;
	/*overflow-x: hidden;*/ /* если много пунктов */
    left: 100%;
	padding: 0 30px;
    position: absolute;
    background: #480f1c;
    top: 0;
	transition: all 0.3s ease;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s ease 0s;
}

#menu ul li > ul.sub-menu.active {left: 0;}

#menu span.dl-forward {
    font-size: 0.8rem;
    color: #bc4059;
    margin-left: 7px;
}

#menu .dl-back i {
    font-size: 0.8rem;
    color: #bc4059;
    margin-right: 7px;	
}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Прилепленное меню

Прилепленное меню

Делаем шапку сайта (включающую логотип, меню и контакты) прилепленной к верхнему краю экрана, при перемотке сайта вниз. Оборачиваем необходимый для «прилеплевания» блок в div id=»stick_menu». В данном сайте верстка такая: Читать далее »

Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

/
Шапка при прокрутке вверх

Шапка при прокрутке вверх

Делаем шапку, которая скрывается при прокрутке вниз и появляется при прокрутке вверх. Верстка и стили header нужно добавить class=»nav-down». Особенность стилей в том, что header должен быть fixed, a body Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Вертикальное многоуровневое меню Вертикальное многоуровневое меню
Фоновые линии
Рекомендации для васФоновые линииOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.