Форум Сайтостроение Веб-строительство

Текуший пункт меню и разные родители

KianoT
На сайте с 04.04.2012
Offline
95
KianoT
736

Всем привет!

Помогите пожалуйста решить одну задачку.

Есть горизонтальное, открывающиеся меню на сайте.

Главная | Продукция | Контакты | и т.д.

Понятно, что если наводим курсором на Продукция, то открывается меню.

В открывшемся меню Продукция ссылки на разделы, к примеру(автомобильная тематика): Автошины и Антенны

Автошины имеют категорию родителя (http://site.ru/product/avtoshiny/)

Антенны имеют уже другую категорию родителя (http://site.ru/komplect/antenny/)

Родительская категория Продукция (http://site.ru/product/)

Ниже html-код меню:


<div id="headmenu">
<ul><li><a href="http://site.ru/product">Продукция</a>
<ul>
<li><a href="http://site.ru/product/avtoshiny/">Автошины</a></li>
<li><a href="http://site.ru/komplect/antenny/">Антенны</a></li>
</ul>
</ul></li>
</div>

Теперь переходим к сути задачи, которая заключается в JS-коде, который навешивает подсветку текущего пункта меню, при чём помимо текущего пункта меню, где находится посетитель нужно подсветить и родительский пункт меню, а это во всех случаях Продукция, при том, что по url не совпадает с родительским url.

Ниже работающий js-код:


<script type="text/javascript">
$(function () { // когда страница загружена
$('#headmenu a').each(function () { // проходим по нужным нам ссылками
var location = window.location.href // переменная с адресом страницы
var link = this.href // переменная с url ссылки
var result = location.match(link); // результат возвращает объект если совпадение найдено и null при обратном

if(result != null) { // если НЕ равно null
$(this).addClass('active'); // добавляем класс
}
});
});
</script>

Код рабочий и подсвечивает родителя и текущий пункт меню, если совпадает родительский и текущий раздел, т.е. находясь на странице Автошины, в меню подсвечивает, как Продукция, так и Автошины, а вот находясь на Антенны, Продукция не подсвечивается, только Антенны.

Ребята подскажите пожалуйста, что подправить в js коде, чтобы он навешивал подсветку, даже если родительский раздел на совпадает.Заранее весьма и весьма благодарен за подсказку!!!

p/s/ пример меню, если со слов не понятно рассказал hxxp://flotenk.ru/products/kns/kns_flotenk/

Станислав
На сайте с 27.12.2009
Offline
237
Станислав
#1

не проще ли к ссылкам прилепить доп. параметр и уже красить по нему?

Ну что то вроде того

<div id="headmenu">
<ul><li data-url="product"><a href="http://site.ru/product">Продукция</a>
<ul>
<li data-url="product"><a href="http://site.ru/product/avtoshiny/">Автошины</a></li>
<li data-url="product"><a href="http://site.ru/komplect/antenny/">Антенны</a></li>
</ul>
</ul></li>
</div>

И не нужно будет с ссылками работать

Мы там, где рады нас видеть.
KianoT
На сайте с 04.04.2012
Offline
95
KianoT
#2

Ms-Dred, благодарю за ответ!

Не подскажете, как в js прописать, чтобы подсветка текущего пункта меню и родителя через data-url="product"

В JS совсем не силён

Станислав
На сайте с 27.12.2009
Offline
237
Станислав
#3

Можно и ID и класс вместо data указать, а так как то так 


$('#headmenu').find('data-url="product"').find('a').addClass('active');
Jor
На сайте с 23.06.2012
Offline
42
Jor
#4

У вас сайт на голом HTML?

На JS только костылей наделаете, вроде такого 🙅 

$("#headmenu a[href*='" + window.location.pathname + "']")

	.addClass('active')

	.parents().eq(2)

	.find('a:first')

	.addClass('active');
KianoT
На сайте с 04.04.2012
Offline
95
KianoT
#5

Во!Ближе к делу!

Пока подсвечивание(а точнее подчёркивание) происходит у родителя Продукция и всех пунктов меню(антенны и автошины) по вашему примеру, а нужно как вы правильно понял только у текущего+родитель.

Может в js не правильно прописал.Сделал кстати классом.

<script type="text/javascript">
$(function () { // когда страница загружена
$('#headmenu').find('.line-block').find('a').addClass('active').each(function () { // проходим по нужным нам ссылками
var location = window.location.href // переменная с адресом страницы
var link = this.href // переменная с url ссылки
var result = location.match(link); // результат возвращает объект если совпадение найдено и null при обратном

if(result != null) { // если НЕ равно null
$(this).addClass('active'); // добавляем класс
}
});
});
</script>

<div id="headmenu">
<ul><li class="line-block"><a href="http://site.ru/product">Продукция</a>
<ul>
<li class="line-block"><a href="http://site.ru/product/avtoshiny/">Автошины</a></li>
<li class="line-block"><a href="http://site.ru/komplect/antenny/">Антенны</a></li>
</ul>
</ul></li>
</div>



---------- Добавлено 30.12.2014 в 04:50 ----------

Jor:
У вас сайт на голом HTML?

Верно, HTML\CSS\JS

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий