Вечная проблема с подкатегориями в меню…

Решено

Acme1994

(@acme1994)

Всем привет.
Уже больше месяца борюсь с подкатегориями в навигационной панели. Как-то раз получилось сделать, стрелочки работали ( вверх,низ ) и вобще отображались дочерние элементы ( подменю ).

Помогите, пожалуйста, понять что не так …

CSS стили меню:

.box-category {
	padding: 0px;
}
.side_bar_menu {
	list-style: none;
	margin: 0;
	padding: 0 0 1em;
}
.side_bar_menu ul {
	list-style: none;
}

/* Убираем отступ у inline-block элементов */
.side_bar_menu li,
.side_bar_menu li li,
.side_bar_menu li li li {
	position: relative;
	font-size: 0;
	line-height: 1.5;
}
/* Возвращаем размер шрифта ссылок */
.side_bar_menu li a,
.side_bar_menu li li a,
.side_bar_menu li li li a {
	font-size: 16px;
}

.side_bar_menu > li {
	margin: 0px 0px 4px;
}
.side_bar_menu > li > a {
	display: inline-block;
	text-decoration: none;
	border-radius: 3px;
	position: relative;
	font-size: 16px;
}
.side_bar_menu > li a + ul {
    display: none;
}

.link_span {
	display: inline-block;
	padding: 3px 12px 3px 0px;
	position: relative;
	z-index: 21;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.7);
	text-decoration: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.link_arrow {
	z-index: 99;
	display: inline-block;
	position: relative;
	top: 1px;
	width: 20px;
	padding: 0 5px;
	font-size: 12px;
	color: #a5a5a5;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

a:hover .link_span{
	padding-left: 12px;
	text-decoration: none;
}
.link_arrow:hover {
	padding: 0 5px;
	text-decoration: none;
	color: #436DA2;
}

.current_page_item  > a > .link_span {
	font-weight: 600;
	text-decoration: none;
}

.side_bar_menu > li ul {
	margin: 0 0 0 23px;
	padding: 5px 0;
}
.side_bar_menu > li a.active {
	background: #4682B4;
}

.side_bar_menu > li a:hover {
	color: #4682B4;
	text-decoration: none;
}

.side_bar_menu > li a.active + ul {
	color: ##4682B4;
	display: block;
}
.side_bar_menu > li ul > li {
	margin: 0 0 4px 0;
}
.side_bar_menu > li ul > li > a {
	display: inline-block;
	font-size: 16px;
  text-decoration: none;
	border-radius: 3px;
	text-shadow: 0 0 1px #fff;
	position: relative;
}
.side_bar_menu > li ul > li > a.active {
	background-color: #4682B4;
	border-radius: 3px;
	text-shadow: 0 0 1px #fff;
	text-decoration: none;
}
/* фон при навидении мышкой на слово */
.hover_span {
	display:block;
	width: 0;
	height: 100%;
	background-color: #08ada7;
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
	border-radius: 3px;
	position: absolute;
	top:0;
	z-index: 20;
	opacity: 0.5
}

.textwidget {
	padding: 0 0 10px;
	margin: 0px 0 0;
	text-decoration: none;
}

/* Вспомогательные классы [display] (например показать или скрыть выпадающее меню) */
.enabled { display: block !important; }
.disabled { display: none !important; }

/* Вспомогательные классы menu (применяются для смены состояния пунктов меню) */
.menu--active {
	background-color: #fafafa;
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
}
.menu--active .link_span {
	padding: 3px 12px;
	text-shadow: none;
}
.menu--active:hover .link_span {
	/*padding-left: 17px;*/
}
.tagcloud {
	padding: 0 0 10px;
	overflow: hidden;
}
.tagcloud a{
	float: left;
	font-size: 12px;
	padding: 2px 12px;
	color: #555;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.7);
	background-color: #fafafa;
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
		background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02));
	margin: 0 8px 8px 0;
	border-bottom: 1px solid #e6e6e6;
	border-bottom: 1px solid rgba(0,0,0,0.05);

	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	border-radius: 4px;
}

JS:

// Sidebar Menu
	$('#sidebar .widget_categories > ul, #sidebar .widget_nav_menu  > div > ul, #sidebar .widget_pages ul:first, #sidebar .widget_meta ul, #sidebar .widget_recent_entries ul, #sidebar ul.product-categories').addClass('side_bar_menu');
	$('#sidebar ul.side_bar_menu a').wrapInner('<span class="link_span"/>').prepend('<span class="hover_span"></span>');

	// Sidebar Menu effects
	$('.side_bar_menu a').not(".active").hover(
			function() {
				$(this).children('.hover_span').stop().animate({width:'100%'},500,'easeOutExpo');
			},
			function() {
				$(this).children('.hover_span').stop().animate({width:'0'},200,'easeOutExpo');
			}
	);

		$('.side_bar_menu .link_arrow').click(function () {
			console.log($(this).siblings('a'));
			if ($(this).parent('li').hasClass('menu-item-has-children')) {
				$(this).parent('li').children('.sub-menu').toggleClass('enabled');
				$(this).siblings('a').toggleClass('menu--active');
				$(this).toggleClass('icon-minus');
			}
		}
	);

	$('.side_bar_menu a').not(".active").hover(
		function() {
			$(this).siblings('.hover_span').stop().animate({width:'100%'},500,'easeOutExpo');
		},
		function() {
			$(this).siblings('.hover_span').stop().animate({width:'0'},200,'easeOutExpo');
		}
	);
	$('.testimonials').parents('.textwidget').css('paddingBottom',0);

В демо версии работает, загружаю на сайт и нет этих стрелочек и прочего:
скриншот демки

Просмотр 2 ответов — с 1 по 2 (всего 2)

rikitikes
(@rikitikes)

8 лет, 5 месяцев назад

Плагин Collapsing Categories. Настроек и стрелочек у него много.

Автор Acme1994
(@acme1994)

8 лет, 5 месяцев назад

Не люблю уйму плагинов, потому путаюсь в них) Уже поправил проблему.

Просмотр 2 ответов — с 1 по 2 (всего 2)

Тема «Вечная проблема с подкатегориями в меню…» закрыта для новых ответов.