Как запретить автозакрытие подменю?

Question

[blackbb]

Здравствуйте, есть сайт justscoundrelyandex1.ru.fvds.ru. Как сделать, чтобы подменю было открыто, но только те, которые относятся к категории, в которой вы находитесь. Например, если вы находитесь в категории "Женские штучки" или в любой ее подменю, то все ее подменю должны быть открыты.

Answer 1

[Евгений Петров]

Для этого нужно:
— либо корректировать шаблон (например, проставлением класса в нужном пункте меню)
— либо разбирать адресную строку на клиенте

Поскольку ясно, что ваш вопрос лежит во второй части ответа, то нужно иметь чёткое соответствие между частью адресной строки и элементом (атрибут или содержание). В вашем случае вы будете опираться на часть пути после /category/. Не забудьте только про decodeURIComponent().

А дальше вы проходите первый уровень меню в поисках того, кто содержат строку. Правда для проверки нужно или содержание привести к виду ссылки (дефисы вместо пробелов) или наоборот, что с учётом возможных родных дефисов будет затруднительно.

Нашли, проделали манипуляции (класс воткнули).

Comments

[blackbb]

Ну то что это делается либо в шаблоне либо с помощью javascript это я понял. Я не разбираюсь в javascript, поэтому и прошу помощи, может есть примеры такие. А по поводу корректировать шаблон, конкретней можно, какие стили классу прописать для этого и как правильней добавить сам класс. И еще я думал может можно стилями это все без джаваскрипта.

[Евгений Петров]

@blackbb вот смотрите jsfiddle.net/sag9suLr
Из вашего кода я выкинул лишнее для меня.
В реальности вы будете использовать location.href — смотрите камент в JS.

Ориентируемся на атрибут href у ссылки. На содержание не стоит — у вас есть пункт «Мода», но ведет он на ".../без-рубрики/". Очевидно, что на такой странице нас постигнет неудача, если сравнивать содержание ссылки и адресную строку.

И еще я думал может можно стилями это все без джаваскрипта

JS не умеет визуально оформлять элементы по отдельности и документ в целом. Этим занимается исключительно CSS (как вариант SVG, но там примерно поровну между фигурами и стилевой разметкой).

Зато JS умеет модифицировать DOM — как атрибуты, так и содержание CSS. Это мы и делаем, управляя атрибутами style, class и прочими.

ПыСы. Классов у вас полно, но нет деления пунктов меню на используемые в первом уровне и вложенных. Это неудобно.

[blackbb]

Спасибо большое за идею, то что нужно!

[blackbb]

Видимо я совсем тормоз, переделал ваш код под мое меню со всеми классами прямо в jsfiddle.net/, все работает. Вставляю скрипт на сайт, ничего не работает. Уже что только не делал ничего не выходит.

[Евгений Петров]

@blackbb говорит, что в 61-й строке на вашей странице, а именно в подключенном плагине SimpleModal 1.4.3 - jQuery Plugin
TypeError: $ is not a function
Учитесь пользоваться анализаторами

[blackbb]

Теперь такая Uncaught TypeError: undefined is not a function

[blackbb]

Исправил добавлением jQuery(document).ready(function($){, но код не срабатывает и анализатор ошибок не выдает. Я поместил код с файл /js/mycode.js

[Евгений Петров]

@blackbb я расскажу секрет отладки:
1. Техника сборки — от малого к большому
Берём пустую страницу и начинаем подключать содержание кусками. Пока не появится ошибка. Вуаля — виновник найден.
Проста в применении, понятна, легко контролируема и автоматизируема.

2. Техника перебора от большого к малому
Отключаем по одному компоненты и комментируем куски кода.
Конечный результат тот же.
Сложнее в применении, поскольку причина может оказаться в порядке подключения и взаимозависимости. В предыдущей технике это легко выясняется, а во второй может создать некоторые трудности.

[blackbb]

Отличный код у тебя, прям то что нужно. Я его установил, теперь он работает, но никак не могу сделать верстку, точнее подменю горизонтально, при моих манипуляциях с css код перестает работать. Помоги пожалуйста, очень тебя прошу!)

[Евгений Петров]

@blackbb
Левый отступ у списка в 20 пикселей из-за отрицательного отступа в блоке с классом row.

.menu{
	list-style:none;
	margin:0 0 0 20px;
	padding:0;
	font-size:0;
	text-align:justify;
}
.menu:after{
	content:"";
	display:inline-block;
	width:100%;
}
.menu > .menu-item{
	display:inline-block;
	position:relative;
	font-size:18px;
	text-align:left;
}

[blackbb]

Поменял, результат тот же (подменю вертикально).

[Евгений Петров]

@blackbb

.menu,
.sub-menu{
	list-style:none;
	margin:0;
	padding:0;
}
.menu{
	position:relative;
	margin:0 0 0 20px;
	font-size:0;
	text-align:justify;
}
.menu:after{
	content:"";
	display:inline-block;
	width:100%;
}
.menu > .menu-item{
	display:inline-block;
	font-size:18px;
	text-align:left;
}
.sub-menu{
	display:none;
	position:absolute;
	top:100%;
	right:0;
	left:0;
}
.menu-item.active .sub-menu{
	display:block;
}
.sub-menu > .menu-item{
	display:inline-block;
	font-size:18px;
}

[blackbb]

@Petroveg огромнейшее спасибо!!!!