Текуший пункт меню и разные родители
Всем привет!
Помогите пожалуйста решить одну задачку.Пересмотрел вроде все темы по данному вопросу, но не нашёл вопрос про разные "родители" в структуре меню. Есть горизонтальное, открывающиеся меню на сайте. Главная | Продукция | Контакты | и т.д. Понятно, что если наводим курсором на Продукция, то открывается меню. В открывшемся меню Продукция ссылки на разделы, к примеру(автомобильная тематика): Автошины и Антенны Автошины имеют категорию родителя (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/ |
Это силами движка сайта делается. Движок прекрасно знает все хитросплетения страниц и легко подсветит нужный пункт без всяких js. Если движок не совсем гавно конечно. Если самопис - можно доработать.
А на js - не надежно и глючно. |
danik.js, сайт без cms.
Хотелось бы конечно доработать JS-код. До этого начал делать на php, но всё же решил c помощью JS решить эту задачу, но знаний по JS не хватает. danik.js, может у Вас есть варианты доработки JS-кода? |
Цитата:
|
danik.js,
Сайт не на голом html и на каждой странице нет возможности прописывать класс к каждому пункту меню, сам давно не занимаюсь такой ерундой) У определённых разделов сайта есть свой шаблон, например у главной(page.tpl.php), у страницы Продукция (page2.tpl.php) и т.д. Отдельные фрагменты сайта подгружаются так же на php тэгом <? ?>(текст для страниц, меню в отдельных случаях и т.д.).Само горизонтальное меню, которое хочу оживить с помощью JS, прописано в каждом шаблоне(всего 5 шаблонов) в виде обычного html. Странно конечно, я думал, что JS с такими задачами, как я написал в первом сообщение, щёлкает на раз-два, особенно если знать сам язык. Я не знаю там...может по классам команды передавать, если конкретно с передачей url такая загвоздка?В смысле сразу в html прописать класс ссылке Продукция и с помощью JS данный класс связывать с классом .active |
Kiano,
танцы с бубнами ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() { // когда страница загружена
$('#headmenu a').each(function(i, el) {
$("+ul a", el).each(function(indx, element) {
// проходим по нужным нам ссылками
var location = "http://site.ru/komplect/antenny/" // переменная с адресом страницы window.location.href
var link = element.href // переменная с url ссылки
var result = location.match(link); // результат возвращает объект если совпадение найдено и null при обратном
if (result != null) { // если НЕ равно null
$(element).addClass('active'); // добавляем класс
$(el).addClass('active'); // добавляем класс
}
});
});
});
</script>
</head>
<body> <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>
</li></ul>
</div>
</body>
</html>
|
Kiano, то есть у тебя иерархия меню не совпадает с иерархией сегментов в url'е? Антенны находятся в Продукция, но в ссылке не prоduct, а komplect? А зачем? SEO-причуды?
|
рони, спасибо за код, но он рабочий только если находишься на странице, которая прописана в var location, на другой странице класс active не подставляется.
|
Цитата:
|
Цитата:
Цитата:
С точки зрения SEO это наоборот не правильно, лучше если иерархия будет соблюдена и вся продукция лежала в папке продукция (/product/), ну и при доработки интерфейса, всплывает проблема о которой написано в первом сообщение. Вчера в ручную прописал активный класс к ссылке Продукция, а JS динамично добавляет класс к текущей ссылке. Хорошо, что страницы с продукцией имеют свой отдельный шаблон(page2.tpl.php). Если кто подскажет код под задачу, которая в первом сообщение, то тоже будет очень хорошо, заберу на сайт!А то это задача касается не только категории с продукцией, есть ещё другие категории с информацией, статьями, сертификатами и т.д., при изменениях придётся изменять иерархию сайта, что не очень хорошо, т.к. будет ставиться 301 редирект, что ведёт к потере веса страниц, тем самым позиций в поисковых системах + ожидание склейщика поисковых систем. |
| Часовой пояс GMT +3, время: 02:34. |