Дополненный скрипт для вертикального аккордеон меню

Белка растянулась лежа на ветке Некоторое время назад я опубликовал статью про вертикальное аккордеон меню на CSS3 и jQuery, разработанное забугорными коллегами, я лишь немного дополнил тогда сам скрипт менюшки, для большего удобства. Но на волне предыдущей статьи о том как выделить в меню пункт с текущей страницей, решил еще немного дополнить скрипт и этой аккордеон менюшки в данном направлении. Тем более что такие просьбы поступали :)
 Собственно, тут я выложу только готовый скрипт и описание изменений, так как в коде и стилях самого меню ничего не меняем.
Аккордеон CSS3 и jQuery меню  Суть дополнений такая: чтобы при переходе посетителя по сайту, меню было открыто на соответствующем разделе и была выделен пункт с ссылкой текущей страницы, т.е. той, на которой находится посетитель в данный момент.
  Например: посетитель находится на странице "Профили", данная страница внесена в меню как ссылка в подменю раздела "Сфера". Значит когда посетитель на ней, то раздел меню "Сфера" открыт и пункт "Профили" выделен. При переходе на другую страницу (не зависимо от того через меню или просто через перелистывание страниц), если она внесена в какой-то из разделов, то будет открыт раздел, в котором эта страница находится и выделен соответствующий ей пункт. Если страница, на которой находится посетитель не внесена в меню, то оно будет находиться в исходном положении, т.е. закрыто/свернуто.
  Итак, исходя из того что статья с меню уже изучена, для внедрения данных улучшений требуется проделать следующие действия:
 1. Добавить в CSS дополнительный класс, который будет добавляться к пункту меню соответствующему текущей странице, с желаемыми свойствами.
.sub-menu li.current > a { background: #efefef; }
  Я оставил фон, который выделяет пункт при наведении, тут уже каждый сам добавит нужные ему свойства и подберет цвета.
 2. Заменить или дополнить jQuery скрипт меню. Варианта скрипта получилось два, по примеру предыдущей статьи.
 1. Если ссылки в меню записаны сокращенно, только как путь
 /folder/document1.html
Тогда скрипт будет по проще:
$(function() {
// определяем совпадения URL текущей страницы и ссылок меню
// присваиваем к совпавшим новый класс

var linkMenu = $('.accordion .sub-menu > li > a');
 linkMenu.each(function() {
  var link = $(this).attr('href'),
      pathname = window.location.pathname;

    if(pathname == link) {$(this).parent('li').addClass('current');}
 });
 
var accordion_head = $('.accordion > li > a'),
    accordion_body = $('.accordion li > .sub-menu'),
    accordion_link = $('.accordion li > .sub-menu > li.current'); //переменная текущего пункта меню
 
// открываем раздел где найдена текущая ссылка
// добавляем класс к заголовку открытого раздела


 accordion_link.each(function(){
    $(this).parent().slideToggle();
    $(this).parent().parent().children('a').addClass('active');
 });

 accordion_head.on('click', function(event) {
    event.preventDefault();
    if ($(this).attr('class') == 'active'){
        accordion_body.slideUp('normal')
        $(this).removeClass('active');
        return false;
       }
    if ($(this).attr('class') != 'active'){
        accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
       }
 });
});

  2. Если в меню ссылки записаны полностью и вам лень их менять
 http://www.site.com/folder/document1.html
У меня получился такой вариант скрипта:
$(function() {
// определяем совпадения URL текущей страницы и ссылок меню
// присваиваем к совпавшим новый класс

 var linkMenu = $('.accordion .sub-menu > li > a');
  linkMenu.each(function() {
    var position = window.location.href;
    var link = this.href;
    var linkHahs = window.location.hash;
    var linkSearch = window.location.search;
       if(position == link ||
          position == link + linkHahs ||
          position == link + linkSearch ||
          position == link + linkSearch + linkHahs)
         {
          $(this).parent('li').addClass('current');
         }
  });
 
 var accordion_head = $('.accordion > li > a'),
     accordion_body = $('.accordion li > .sub-menu'),
     accordion_link = $('.accordion li > .sub-menu > li.current'); //переменная текущего пункта меню
 
//открываем раздел где найдена текущая ссылка
//добавляем класс к заголовку открытого раздела


  accordion_link.each(function(){
   $(this).parent().slideToggle();
   $(this).parent().parent().children('a').addClass('active');
  });

  accordion_head.on('click', function(event) {
    event.preventDefault();
    if ($(this).attr('class') == 'active'){
        accordion_body.slideUp('normal')
        $(this).removeClass('active');
        return false;
       }
    if ($(this).attr('class') != 'active'){
        accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
       }
  });
});
Второй вариант кода рассчитан на сайт, например на Blogger-блог, где могут проскальзывать ссылки типа:
http://myblog.com/2010/01/blog-post_10.html?showComment=123456789#c987654321
 Это если вам лень урезать ссылки в менюшке чтобы воспользоваться вариантом 1

 Вот такие дополнения. Отзывы, замечания, рекомендации и корректировки принимаются.

©http://magentawave.com

79 комментариев:

  1. Анонимный16.01.13, 0:50

    У меня не работает цвет активной категории. Вы пробовали реализовать с первым кодом?

    ОтветитьУдалить
    Ответы
    1. Что значит - "не работает цвет" - не подсвечивает открытый раздел или не выделена ссылка текущей страницы?
      Когда я скрипт дополнял, ясное дело, пробовал и тестировал оба варианта, первый даже в данный момент установлен на другом блоге. И все прекрасно работает.

      Ссылку на сайт где не работает скиньте, а то что-то не могу подключится к нему по телепатическому каналу.

      Удалить
    2. Анонимный21.03.14, 17:11

      пропущена r в current у автора

      Удалить
  2. Можно это меню приминить к virtuemart2?

    ОтветитьУдалить
    Ответы
    1. Клинических испытаний на Жумле я не проводил, но думаю проблем быть не должно, Если что, отпишитесь для будущих соискателей :)

      Удалить
  3. добрый вечер, у меня скрипт открытия реализован немного по-другому, но смысл тот же, попытался доработать его по вашей статье, что-то не вышло
    помогите пожалуйста довести до ума, куда можно написать свой код?

    ОтветитьУдалить
    Ответы
    1. Данный скрипт сделан именно для данного меню (ссылка на его обзор вначале статьи), если меню другое, то и скрип должен быть другой.
      Код на jsfiddle, ссылку сюда. на счет решения не обещаю.

      Удалить
    2. Этот комментарий был удален администратором блога.

      Удалить
    3. Я же написал куда код скидывать и все-таки вы решили запостить эту простыню здесь.... Я удалил. Попытка №2. Код кидаем сюда - http://jsfiddle.net

      Удалить
    4. извините пожалуйста, я вас не понял, так как не был знаком с этой платформой.
      вот ссылка
      http://jsfiddle.net/KBYp5/

      Удалить
    5. Спасибо огромное!!!
      все заработало, вы - Специалист, и именно с большой буквы.

      функция alert мне пригодится в будущих терзаниях, это точно ))
      еще раз спасибо за помощь!!!

      Удалить
    6. До спеца, тем более с большой буквы, мне еще очень далеко, я токи учусь, но все равно приятно. Просто будьте внимательнее и все будет получатся.

      Удалить
  4. Анонимный12.03.13, 10:24

    Подскажите пожалуйста как сделать что бы пункты меню в которых нет выпадающего меню были кликабельны (активны)!? Заранее спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Предлагали так:
      if($(this).siblings('ul').length > 0){event.preventDefault();}

      Удалить
    2. Анонимный13.03.13, 1:48

      Что то не получается! Не подскажите куда именно вставлять этот код?

      Удалить
    3. Строку - event.preventDefault(); замените на предложенную выше.

      Удалить
    4. Анонимный14.03.13, 6:28

      Спасибо большое помогло!!!

      Удалить
  5. Алексей24.04.13, 22:53

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

    ОтветитьУдалить
    Ответы
    1. Он отображается, только цвет там, скажем так - "жидкий", т.е. почти сливается с основным. Вот в этой строке в CSS поменяйте и все должно быть карашо :)
      .sub-menu li.curent { background: #efefef; }

      Если не поможет, показывайте пример, бум думать.

      Удалить
  6. Алексей27.04.13, 0:20

    Спасибо большое за ответ.
    Цвет менять пробовал. Видимо где то ошибку допустил....
    Напишите, куда можно скинуть адрес сайта, в коментах не очень хочется выставлять.

    ОтветитьУдалить
    Ответы
    1. На почту кидайте, раздел верхнего меню "Присоединяйся" там есть ссыль на почтовый ящик

      Удалить
  7. не работает почемуто. Помогите пожалуйста!!!!
    http://akvaryum.ru

    ОтветитьУдалить
    Ответы
    1. Обратите внимание на то, как у вас записаны ссылки в пунктах меню, все дело в отсутствии слеша ( / ) в записи, поэтому скрипт не видит сходства. Чтобы не мучатся с его добавлением для каждой ссылки сделайте следующие:
      1. Найдите в скрипте строку:
      if(pathname == link) {$(this).parent('li').addClass('current');}
      2. Добавьте к варианту сравнения недостающий слеш:
      if(pathname == "/"+link) {$(this).parent('li').addClass('current');}
      Должно помочь

      Удалить
    2. Супер! СПАСИБО БОЛЬШОЕ! ВЫ НАСТОЯЩИЙ ВЕБМАСТЕР!

      Удалить
  8. Анонимный15.02.14, 16:17

    Дружище, не работает выделение ссылки открытой категории... Помоги)) .accordion заменен на .accord - везде, в коде, в css и скрипте. Так все работает, но не запоминает выделенную категорию(((( www.aquasanremo.ru

    ОтветитьУдалить
    Ответы
    1. В твоем случаи код должен быть такой http://jsfiddle.net/trh36/
      и почисти сами ссылки от лишних символов типа →

      Удалить
  9. Анонимный17.02.14, 20:20

    .sub-menu li.curent > a { background: #efefef; } не работает..... Не выделяется открытая категория меню

    ОтветитьУдалить
    Ответы
    1. Попробуйте менять фон не у ссылки, а у самого выбранного блока:
      .sub-menu li.curent { background: #efefef; }

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

      Удалить
    2. Анонимный18.03.14, 19:46

      Подскажите как зделать открытие ссылок более 2 или 3 вложений, у нас интернет-магазин, внедрили на навигацию по товару, на 2 ссылке меню закрывается приходиться открывать снова.

      Удалить
  10. Анонимный14.03.14, 20:59

    Подскажите пожалуйста , при переходе в категорию 2 уровня меню сворачивается,а так-же
    при переходе на другое под меню происходит дергание.

    ОтветитьУдалить
    Ответы
    1. Проверьте правильно ли и подключен ли фреймворк jQeury
      http://www.magentawave.com/2013/03/jquery.html

      Удалить
  11. как понять заменить или дополнить скрипт, ведь если прежний удаляешь- открывание не работает;
    почему в стилях вы всегда пишите curent с одной "r" ?

    ОтветитьУдалить
    Ответы
    1. Дополнить тем чего не хватает в оригинале (ссылка есть в статье) или заменить полностью. Скрипт неоднократно проверялся и используется другими пользователями если у вас что-то не работает, покажите пример или опишите проблему подробнее.
      Селекторы вы можете выбрать любые и записывать их, как вам угодно, орфография в данном случаи особой роли не играет (то что правильно с двумя, я знаю).

      Удалить
  12. Анонимный21.03.14, 17:10

    Долго думал почему не срабатывает)

    .sub-menu li.curent > a { background: #efefef; } - в "curent" пропущена одна r

    ОтветитьУдалить
    Ответы
    1. Спасибо поправил. Как это я так... :)

      Удалить
  13. Александр24.03.14, 19:00

    Приветствую, помогите пожалуйста. Сделал меню, как в первой статье, все получилось. А вот с активным пунктом ничего не работает, даже меню не раскрывается.

    ОтветитьУдалить
    Ответы
    1. У меня была допущена опечатка - пропущена буква в селекторе .current в скрипте с двумя "r" в CSS с одной. Уже поправил.

      Удалить
    2. К сожалению второй вариант не работает.

      Удалить
    3. Показывайте пример. И посмотрите общую статью по теме:
      http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html

      Удалить
  14. Анонимный15.04.14, 20:44

    Здравствуйте, есть вопрос, не работает выделение пункта меню с текущей страницей. все странички лежат в папке str и ссылки между ними указаны в формате "../str/....html", а с главной страницы, которая лежит в главной папке, ссылки без точек и слэша. Экспериментировал со строчкой "if(pathname == link) {$(this).parent('li').addClass('current');" , ничего не вышло, меню взять с вашего сайта)

    ОтветитьУдалить
    Ответы
    1. Прочтите пожалуйста основную статью http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html

      Удалить
  15. Анонимный16.04.14, 16:31

    http://jsfiddle.net/n6m6s/ не работает выделение пункта меню с текущей страницей

    ОтветитьУдалить
    Ответы
    1. Такое нужно смотреть на сайте, фидл здесь не помощник. Показывайте живой пример.

      Удалить
  16. Дмитрий08.05.14, 10:23

    Во 2-ом варианте ошибки!

    Вместо:
    var position = window.location.href,
    var link = this.href;
    linkHahs = window.location.hash,
    linkSearch = window.location.search;
    Должно быть:
    var position = window.location.href;
    var link = this.href;
    var linkHahs = window.location.hash;
    var linkSearch = window.location.search;

    ОтветитьУдалить
  17. Добрый день. А как сделать чтобы меню не закрывалось когда находишься в подразделе раздела меню? (конкретно раздел- это каталог, а подраздел - карточки товара).
    Заранее огромное спасибо!

    ОтветитьУдалить
  18. Анонимный24.10.14, 18:24

    Здравствуйте! Спасибо вам за труд! Не могли бы вы и мне подсказать как сделать меню не просто кликабельным, а еще и с автоматическим раскрытием подменю после перехода по ссылке? Спасибо!

    ОтветитьУдалить
  19. Анонимный25.12.14, 18:33

    Здравствуйте! Ситуация следующая. На сайте два меню (слева и справа) с разными ссылками. При клике на неактивный пункт меню сворачиваются активные как справа так и слева. Можно ли подправить код так чтобы при клике на неактивный пункт меню слева сворачивались активные пункты только слева? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Самый простой вариант в этом случаи просто по-разному обозначить блоки в этих меню, т.е. указать различные идентификаторы и дополнить скрипт.

      Удалить
    2. Анонимный05.01.15, 21:13

      Исходя из моей ситуации, именно этот вариант показался мне самым правильным изначально, но решил спросить, может есть какие то хитрые нюансы, которыми я не владею.
      В любом случае БОЛЬШОЕ СПАСИБО! за ответ и за меню вцелом.

      Удалить
  20. Здравствуйте, во-первых, респект, спасибо за менюшку, все работает отлично, вы молодчина. Во-вторых, есть вопрос следующего характера (не посчитайте за флуд, просто не знаю, где задать этот вопрос (пробовал на серче, но там все такие "умные" через губу не переплюнут), а судя по тому, как вы управляетесь с такими "плюшками", думаю, не затруднитесь ответить), как реализовать на сайте следующую фишку: допустим, на сайте есть 10 разделов одной тематики, но разной направленности (ну, например, сайт про автомобили, а разделы по маркам автомобилей), как в каждый раздел подключать нужные баннеры (рекламу партнерок), т.е. в раздел "BMW" подключать баннеры "купить BMW" или, допустим, "ремонт BMW", в раздел "AUDI" подключать то, что касается "AUDI" и т. д., ведь конверсия будет в разы больше, чем если баннеры будут показываться хаотично. Может быть следует создать на сайте своего рода библиотеку из нужный файлов рекламы или кода баннеров и указывать им на какие урлы они будут подключаться. Ну вот, как то так. Возможно ли это? Заранее благодарен за любой ответ.

    ОтветитьУдалить
  21. Павел01.02.15, 22:47

    Здравствуйте, классная менюшка. А как сделать трехуровневое меню? Не могли бы вы подсказать, что и где нужно изменить, очень нужно. Спасибо.

    ОтветитьУдалить
  22. Анонимный01.05.15, 8:20

    Здорово. А как сделать трехуровневое меню?

    ОтветитьУдалить
  23. Анонимный25.06.15, 13:32

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

    ОтветитьУдалить
    Ответы
    1. Не совсем понял вопрос. Собственно меню и так не закрывается, т.е. меню открывается на том пункте, который соответствует ссылке открытой страницы сайта, если она конечно же есть в меню, если ссылки на эту страницу нет в меню, то оно естественно останется закрытым.

      Удалить
  24. Уважаемый автор скрипта, можно ли сделать так чтобы ссылка открытой текущей страницы в подменю Раздела тоже была выделена цветом? А то получается, что раздел подсвечивает зеленым цветом, а на какой именно странице находишься - не ясно, особенно, если меню на сайте большое и многоуровневое.

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

      Удалить
    2. На основной сайт я это меню пока что еще не пускаю - "плохо" себя ведет. На данный момент тестирую его на тестовом сайте портянке, чтобы основной сайт не ломать экспериментами ))
      Как с вами можно связаться, ася или скайп? Объясню и покажу более детально.

      Удалить
    3. Все данные для связи есть в "подвале", ссылка "Контакты".

      Удалить
  25. Ничего не понимаю. Строка .sub-menu li.current > a { background: #efefef; } у меня стоит, но ссылки из раздела подменю все равно не подсвечиваются.
    Не понимаю, где я накосячила?

    ОтветитьУдалить
  26. Я, наверное, в предыдущих комментариях не совсем верно свой вопрос сформулировала. Мне бы хотелось, чтобы в меню при открытой страницы раздела подменю выделялось цветом само слово подменю, которое ведет на конкретную страницу, а не бежевая полоска, которая в подменю.
    Когда наводишь на подменю курсор мыши, слово из блока подменю становится зеленого цвета, можно ли сделать так, чтобы при открытой странице подменю слово подменю автоматически было зеленого цвета?
    Надеюсь, понятно объяснила?

    ОтветитьУдалить
    Ответы
    1. Если я правильно понял вам просто нужно изменить в CSS цвет для блока с добавочным классом. Если нет - то пример в студию пожалуйста.

      Удалить
    2. Так замудрено написали... Я в CSS вообще ни в зуб ногой ((
      Может быть так вам будет понятнее, что именно мне надо? Вот скриншот из вашего демо-шаблона, я на нем написала, что именно надо.
      http://i.piccy.info/i9/241d24c614400fbe017073c5f5ccc33d/1446110848/26078/965383/screen_menu.jpg

      Удалить
    3. .sub-menu li.current > a { color: green; }

      Удалить
    4. Да, так, только этот цвет green сильно ядрёный, мне нужен его родной цвет, нежно-зеленый, как в категориях меню, приятный для глаз.
      P.S. Не думала, что так быстро получу от вас ответ, поэтому успела уже написать вам на мейл и даже видео своей проблемы снять вместо скриншота ))

      Удалить
    5. Этот цвет, такой как в меню, есть в стилях самого меню там где :hover . Вот здесь можете выбрать любой другой
      http://www.magentawave.com/2012/02/table-html-colors.html

      Удалить
    6. Большое спасибо за помощь!

      Удалить
  27. Анонимный02.11.15, 18:31

    Уважаемый, Александр! Скажите, можно ли на сайте установить 2 таких меню, не будут ли они конфликтовать между собой?

    ОтветитьУдалить
    Ответы
    1. Официально, но приятно)) Думаю можно, я лично не пробовал. Попробуйте, потом расскажите и вместе попробуем решить проблемы если не получится.

      Удалить
  28. Александр, проверьте, у вас форма обратной связи корректно работает? А то к вам письма уходят, а ответа нет. Может вы их не получаете?

    ОтветитьУдалить
    Ответы
    1. Форма работает исправно, все письма приходят и я их по мере сил обрабатываю. Ваше получил.

      Удалить
  29. Здравствуйте!
    Поздравляю всех с Новым Годом!
    Установила на сайт ваше меню, только в этом меню оставила лишь категории, подкатегории выпадающие убрала вообще. В связи с этим появился вопрос, как сделать так, чтобы при выборе нужной категории она подсвечивалась зеленым цветом (на данный момент выбранная категория вообще никак не выделяется, она серая).
    В CSS добавлены вот эти пункты,
    .sub-menu li.current > a { background: #efefef; }
    .sub-menu li.current > a { color: #80b50d; }
    но они ничего не дают и работают лишь тогда, когда есть подкатегории в меню, но мне они (подкатегории) для данного сайта без надобности.

    ОтветитьУдалить
    Ответы
    1. И вас с Новым 2016 годом!
      Разобраться в сути вопроса вам поможет исходная статья
      http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html
      В данном случаи, необходимо в скрипте указать тот элемент, к которому необходимо добавлять дополнительный класс (current), т.е. выделить, а в CSS указать соответствующие значения свойств фона и цвета для добавочного класса.

      Удалить
  30. Всё работает. Немного запутано, т.к. есть исходная статья, скачиваешь, не работают активные ссылки и прочие полезные изменения, потом выясняется что есть вторая статья с исправлениями. Начинаешь разбираться, голова кругом идёт у новичка. Но со второй попытки получилось. Спасибо!

    ОтветитьУдалить
    Ответы
    1. И вам спасибо за содержательный комментарий :)

      Удалить
  31. Не знаю почему, но данное меню у меня почему-то не хочет корректно работать.
    Если установить меню и указать только HTML и CSS, то все работает нормально, вот только нужная категория не выделяется зеленым цветом.
    А если прописать скрипт, в то место, где HTML, то меню вообще перестает работать. В общем, работает оно у меня только без скрипта.
    Но проблема в том, что мне нужно чтобы при переходе по меню нужные категории выделялись цветом, а без скрипта это ведь никак нельзя реализовать или все-таки можно? Или может скрипт какой-то хитрый нужен?
    Надеюсь, что не откажите в помощи...

    ОтветитьУдалить
  32. Так мой комментарий и не появился...((

    ОтветитьУдалить
    Ответы
    1. Ваш комментарий появился, я не всегда могу вовремя публиковать и уж тем более отвечать на комменты, но посмотрите исходную статью про принцип работы
      http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html

      и да, без скрипта подсветка меню на определенной странице работать не будет.

      Удалить

Следующее Предыдущее

BestProject