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

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

04.06.2022

295

Создадим вертикальное многоуровневое меню. За основу берем верстку стандартного меню 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;	
}

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

  • Похожие записи
  • Комментарии
  • Вложения
Шапка при прокрутке вверх

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

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

Автоматическое меню, оглавление, измененное состояние меню

Автоматическое меню, оглавление, измененное состояние меню

Меню с изменяемым состоянием может применяться для различных задач, в т.ч. для меню лэндинга или для оглавления длинной страницы. Такое меню состоит из хэш-ссылок для перемещения по самой странице. Смысл Читать далее »

Фиксированное меню 2.0

Фиксированное меню 2.0

Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение. Верстка фиксируемого блока <div id="stick_menu" class="default"> В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно. Стили для фиксированного Читать далее »

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

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

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