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

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

HIT

04.06.2022

1012

Создадим вертикальное многоуровневое меню. За основу берем верстку стандартного меню 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;	
}
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Прилепленное меню

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

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

Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Добавление кнопки more при узком меню

Добавление кнопки more при узком меню

Если пункты меню не вмещаются в его заданную ширину, то их можно спрятать в кнопку more. Вариант 1 Работает в целом неплохо. Но если именно придираться, то при изменении размера Читать далее »

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

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

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