Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2015, 20:55
Аватар для Kiano
Интересующийся
Отправить личное сообщение для Kiano Посмотреть профиль Найти все сообщения от Kiano
 
Регистрация: 09.06.2014
Сообщений: 28

Текуший пункт меню и разные родители
Всем привет!
Помогите пожалуйста решить одну задачку.Пересмотрел вроде все темы по данному вопросу, но не нашёл вопрос про разные "родители" в структуре меню.

Есть горизонтальное, открывающиеся меню на сайте.
Главная | Продукция | Контакты | и т.д.

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

Автошины имеют категорию родителя (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/
Ответить с цитированием
  #2 (permalink)  
Старый 06.01.2015, 21:42
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Это силами движка сайта делается. Движок прекрасно знает все хитросплетения страниц и легко подсветит нужный пункт без всяких js. Если движок не совсем гавно конечно. Если самопис - можно доработать.

А на js - не надежно и глючно.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 06.01.2015, 21:56
Аватар для Kiano
Интересующийся
Отправить личное сообщение для Kiano Посмотреть профиль Найти все сообщения от Kiano
 
Регистрация: 09.06.2014
Сообщений: 28

danik.js, сайт без cms.
Хотелось бы конечно доработать JS-код.
До этого начал делать на php, но всё же решил c помощью JS решить эту задачу, но знаний по JS не хватает.
danik.js, может у Вас есть варианты доработки JS-кода?
Ответить с цитированием
  #4 (permalink)  
Старый 06.01.2015, 22:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Kiano
danik.js, может у Вас есть варианты доработки JS-кода?
Нет, такой ерундой не занимался никогда. Если сайт на статичных файлах, то почему сразу бы не прописать активный класс нужному пункту в каждом файле? Вобще - неужели удобно работать с голым html? А как вносить изменения, допустим в общую шапку/футер страниц?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 06.01.2015, 22:33
Аватар для Kiano
Интересующийся
Отправить личное сообщение для Kiano Посмотреть профиль Найти все сообщения от Kiano
 
Регистрация: 09.06.2014
Сообщений: 28

danik.js,
Сайт не на голом html и на каждой странице нет возможности прописывать класс к каждому пункту меню, сам давно не занимаюсь такой ерундой)
У определённых разделов сайта есть свой шаблон, например у главной(page.tpl.php), у страницы Продукция (page2.tpl.php) и т.д.

Отдельные фрагменты сайта подгружаются так же на php тэгом <? ?>(текст для страниц, меню в отдельных случаях и т.д.).Само горизонтальное меню, которое хочу оживить с помощью JS, прописано в каждом шаблоне(всего 5 шаблонов) в виде обычного html.

Странно конечно, я думал, что JS с такими задачами, как я написал в первом сообщение, щёлкает на раз-два, особенно если знать сам язык.

Я не знаю там...может по классам команды передавать, если конкретно с передачей url такая загвоздка?В смысле сразу в html прописать класс ссылке Продукция и с помощью JS данный класс связывать с классом .active
Ответить с цитированием
  #6 (permalink)  
Старый 07.01.2015, 09:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.01.2015, 13:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Kiano, то есть у тебя иерархия меню не совпадает с иерархией сегментов в url'е? Антенны находятся в Продукция, но в ссылке не prоduct, а komplect? А зачем? SEO-причуды?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 07.01.2015, 21:45
Аватар для Kiano
Интересующийся
Отправить личное сообщение для Kiano Посмотреть профиль Найти все сообщения от Kiano
 
Регистрация: 09.06.2014
Сообщений: 28

рони, спасибо за код, но он рабочий только если находишься на странице, которая прописана в var location, на другой странице класс active не подставляется.
Ответить с цитированием
  #9 (permalink)  
Старый 07.01.2015, 21:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от Kiano
которая прописана в var location, на другой странице класс active не подставляется.
а что там прописано у вас???
Ответить с цитированием
  #10 (permalink)  
Старый 07.01.2015, 21:59
Аватар для Kiano
Интересующийся
Отправить личное сообщение для Kiano Посмотреть профиль Найти все сообщения от Kiano
 
Регистрация: 09.06.2014
Сообщений: 28

Сообщение от danik.js Посмотреть сообщение
Kiano, то есть у тебя иерархия меню не совпадает с иерархией сегментов в url'е? Антенны находятся в Продукция, но в ссылке не prоduct, а komplect?
Да, всё верно.

Сообщение от danik.js Посмотреть сообщение
А зачем? SEO-причуды?
К сожалению разработчик на старт-апе раскидывал категории и не соблюдал правильную иерархию.
С точки зрения SEO это наоборот не правильно, лучше если иерархия будет соблюдена и вся продукция лежала в папке продукция (/product/), ну и при доработки интерфейса, всплывает проблема о которой написано в первом сообщение.

Вчера в ручную прописал активный класс к ссылке Продукция, а JS динамично добавляет класс к текущей ссылке.
Хорошо, что страницы с продукцией имеют свой отдельный шаблон(page2.tpl.php).

Если кто подскажет код под задачу, которая в первом сообщение, то тоже будет очень хорошо, заберу на сайт!А то это задача касается не только категории с продукцией, есть ещё другие категории с информацией, статьями, сертификатами и т.д., при изменениях придётся изменять иерархию сайта, что не очень хорошо, т.к. будет ставиться 301 редирект, что ведёт к потере веса страниц, тем самым позиций в поисковых системах + ожидание склейщика поисковых систем.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Как выделить активный пункт меню в моём случаи? может кто помочь? nStyle jQuery 10 11.03.2012 01:51
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Меню на дивах Golovastik (X)HTML/CSS 38 13.09.2010 09:10
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05