Собственно, тут я выложу только готовый скрипт и описание изменений, так как в коде и стилях самого меню ничего не меняем.
Суть дополнений такая: чтобы при переходе посетителя по сайту, меню было открыто на соответствующем разделе и была выделен пункт с ссылкой текущей страницы, т.е. той, на которой находится посетитель в данный момент.
Например: посетитель находится на странице "Профили", данная страница внесена в меню как ссылка в подменю раздела "Сфера". Значит когда посетитель на ней, то раздел меню "Сфера" открыт и пункт "Профили" выделен. При переходе на другую страницу (не зависимо от того через меню или просто через перелистывание страниц), если она внесена в какой-то из разделов, то будет открыт раздел, в котором эта страница находится и выделен соответствующий ей пункт. Если страница, на которой находится посетитель не внесена в меню, то оно будет находиться в исходном положении, т.е. закрыто/свернуто.
Итак, исходя из того что статья с меню уже изучена, для внедрения данных улучшений требуется проделать следующие действия:
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');
}
});
});
// определяем совпадения 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');
}
});
});
// определяем совпадения 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
У меня не работает цвет активной категории. Вы пробовали реализовать с первым кодом?
ОтветитьУдалитьЧто значит - "не работает цвет" - не подсвечивает открытый раздел или не выделена ссылка текущей страницы?
УдалитьКогда я скрипт дополнял, ясное дело, пробовал и тестировал оба варианта, первый даже в данный момент установлен на другом блоге. И все прекрасно работает.
Ссылку на сайт где не работает скиньте, а то что-то не могу подключится к нему по телепатическому каналу.
пропущена r в current у автора
УдалитьМожно это меню приминить к virtuemart2?
ОтветитьУдалитьКлинических испытаний на Жумле я не проводил, но думаю проблем быть не должно, Если что, отпишитесь для будущих соискателей :)
Удалитьдобрый вечер, у меня скрипт открытия реализован немного по-другому, но смысл тот же, попытался доработать его по вашей статье, что-то не вышло
ОтветитьУдалитьпомогите пожалуйста довести до ума, куда можно написать свой код?
Данный скрипт сделан именно для данного меню (ссылка на его обзор вначале статьи), если меню другое, то и скрип должен быть другой.
УдалитьКод на jsfiddle, ссылку сюда. на счет решения не обещаю.
Этот комментарий был удален администратором блога.
УдалитьЯ же написал куда код скидывать и все-таки вы решили запостить эту простыню здесь.... Я удалил. Попытка №2. Код кидаем сюда - http://jsfiddle.net
Удалитьизвините пожалуйста, я вас не понял, так как не был знаком с этой платформой.
Удалитьвот ссылка
http://jsfiddle.net/KBYp5/
http://jsfiddle.net/DvYXX/
УдалитьСпасибо огромное!!!
Удалитьвсе заработало, вы - Специалист, и именно с большой буквы.
функция alert мне пригодится в будущих терзаниях, это точно ))
еще раз спасибо за помощь!!!
До спеца, тем более с большой буквы, мне еще очень далеко, я токи учусь, но все равно приятно. Просто будьте внимательнее и все будет получатся.
УдалитьПодскажите пожалуйста как сделать что бы пункты меню в которых нет выпадающего меню были кликабельны (активны)!? Заранее спасибо!!!
ОтветитьУдалитьПредлагали так:
Удалитьif($(this).siblings('ul').length > 0){event.preventDefault();}
Что то не получается! Не подскажите куда именно вставлять этот код?
УдалитьСтроку - event.preventDefault(); замените на предложенную выше.
УдалитьСпасибо большое помогло!!!
УдалитьЗдравствуйте.
ОтветитьУдалитьСпасибо огромное за Ваш труд, очень интересное меню.
Все получилось, единственное, не отображается выделенным подпункт меню. Помогите плиз, сам ни как не могу понять, где ошибка....
Он отображается, только цвет там, скажем так - "жидкий", т.е. почти сливается с основным. Вот в этой строке в CSS поменяйте и все должно быть карашо :)
Удалить.sub-menu li.curent { background: #efefef; }
Если не поможет, показывайте пример, бум думать.
Спасибо большое за ответ.
ОтветитьУдалитьЦвет менять пробовал. Видимо где то ошибку допустил....
Напишите, куда можно скинуть адрес сайта, в коментах не очень хочется выставлять.
На почту кидайте, раздел верхнего меню "Присоединяйся" там есть ссыль на почтовый ящик
Удалитьне работает почемуто. Помогите пожалуйста!!!!
ОтветитьУдалитьhttp://akvaryum.ru
Обратите внимание на то, как у вас записаны ссылки в пунктах меню, все дело в отсутствии слеша ( / ) в записи, поэтому скрипт не видит сходства. Чтобы не мучатся с его добавлением для каждой ссылки сделайте следующие:
Удалить1. Найдите в скрипте строку:
if(pathname == link) {$(this).parent('li').addClass('current');}
2. Добавьте к варианту сравнения недостающий слеш:
if(pathname == "/"+link) {$(this).parent('li').addClass('current');}
Должно помочь
Супер! СПАСИБО БОЛЬШОЕ! ВЫ НАСТОЯЩИЙ ВЕБМАСТЕР!
УдалитьДружище, не работает выделение ссылки открытой категории... Помоги)) .accordion заменен на .accord - везде, в коде, в css и скрипте. Так все работает, но не запоминает выделенную категорию(((( www.aquasanremo.ru
ОтветитьУдалитьВ твоем случаи код должен быть такой http://jsfiddle.net/trh36/
Удалитьи почисти сами ссылки от лишних символов типа →
.sub-menu li.curent > a { background: #efefef; } не работает..... Не выделяется открытая категория меню
ОтветитьУдалитьПопробуйте менять фон не у ссылки, а у самого выбранного блока:
Удалить.sub-menu li.curent { background: #efefef; }
Такие вещи индивидуальны, и зависят от уже имеющихся общих стилевых правил. Суть заключается в механизме присвоения дополнительного класса к нужному(соответствующему) элементу, что дает возможность манипулировать его видом с помощью CSS, дальше зависит все от вашей фантазии.
Подскажите как зделать открытие ссылок более 2 или 3 вложений, у нас интернет-магазин, внедрили на навигацию по товару, на 2 ссылке меню закрывается приходиться открывать снова.
УдалитьПодскажите пожалуйста , при переходе в категорию 2 уровня меню сворачивается,а так-же
ОтветитьУдалитьпри переходе на другое под меню происходит дергание.
Проверьте правильно ли и подключен ли фреймворк jQeury
Удалитьhttp://www.magentawave.com/2013/03/jquery.html
как понять заменить или дополнить скрипт, ведь если прежний удаляешь- открывание не работает;
ОтветитьУдалитьпочему в стилях вы всегда пишите curent с одной "r" ?
Дополнить тем чего не хватает в оригинале (ссылка есть в статье) или заменить полностью. Скрипт неоднократно проверялся и используется другими пользователями если у вас что-то не работает, покажите пример или опишите проблему подробнее.
УдалитьСелекторы вы можете выбрать любые и записывать их, как вам угодно, орфография в данном случаи особой роли не играет (то что правильно с двумя, я знаю).
Долго думал почему не срабатывает)
ОтветитьУдалить.sub-menu li.curent > a { background: #efefef; } - в "curent" пропущена одна r
Спасибо поправил. Как это я так... :)
УдалитьПриветствую, помогите пожалуйста. Сделал меню, как в первой статье, все получилось. А вот с активным пунктом ничего не работает, даже меню не раскрывается.
ОтветитьУдалитьУ меня была допущена опечатка - пропущена буква в селекторе .current в скрипте с двумя "r" в CSS с одной. Уже поправил.
УдалитьК сожалению второй вариант не работает.
УдалитьПоказывайте пример. И посмотрите общую статью по теме:
Удалитьhttp://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html
Здравствуйте, есть вопрос, не работает выделение пункта меню с текущей страницей. все странички лежат в папке str и ссылки между ними указаны в формате "../str/....html", а с главной страницы, которая лежит в главной папке, ссылки без точек и слэша. Экспериментировал со строчкой "if(pathname == link) {$(this).parent('li').addClass('current');" , ничего не вышло, меню взять с вашего сайта)
ОтветитьУдалитьПрочтите пожалуйста основную статью http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html
Удалитьhttp://jsfiddle.net/n6m6s/ не работает выделение пункта меню с текущей страницей
ОтветитьУдалитьТакое нужно смотреть на сайте, фидл здесь не помощник. Показывайте живой пример.
УдалитьВо 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;
Да, спасибо. Поправил.
УдалитьДобрый день. А как сделать чтобы меню не закрывалось когда находишься в подразделе раздела меню? (конкретно раздел- это каталог, а подраздел - карточки товара).
ОтветитьУдалитьЗаранее огромное спасибо!
Здравствуйте! Спасибо вам за труд! Не могли бы вы и мне подсказать как сделать меню не просто кликабельным, а еще и с автоматическим раскрытием подменю после перехода по ссылке? Спасибо!
ОтветитьУдалитьЗдравствуйте! Ситуация следующая. На сайте два меню (слева и справа) с разными ссылками. При клике на неактивный пункт меню сворачиваются активные как справа так и слева. Можно ли подправить код так чтобы при клике на неактивный пункт меню слева сворачивались активные пункты только слева? Спасибо!
ОтветитьУдалитьСамый простой вариант в этом случаи просто по-разному обозначить блоки в этих меню, т.е. указать различные идентификаторы и дополнить скрипт.
УдалитьИсходя из моей ситуации, именно этот вариант показался мне самым правильным изначально, но решил спросить, может есть какие то хитрые нюансы, которыми я не владею.
УдалитьВ любом случае БОЛЬШОЕ СПАСИБО! за ответ и за меню вцелом.
Здравствуйте, во-первых, респект, спасибо за менюшку, все работает отлично, вы молодчина. Во-вторых, есть вопрос следующего характера (не посчитайте за флуд, просто не знаю, где задать этот вопрос (пробовал на серче, но там все такие "умные" через губу не переплюнут), а судя по тому, как вы управляетесь с такими "плюшками", думаю, не затруднитесь ответить), как реализовать на сайте следующую фишку: допустим, на сайте есть 10 разделов одной тематики, но разной направленности (ну, например, сайт про автомобили, а разделы по маркам автомобилей), как в каждый раздел подключать нужные баннеры (рекламу партнерок), т.е. в раздел "BMW" подключать баннеры "купить BMW" или, допустим, "ремонт BMW", в раздел "AUDI" подключать то, что касается "AUDI" и т. д., ведь конверсия будет в разы больше, чем если баннеры будут показываться хаотично. Может быть следует создать на сайте своего рода библиотеку из нужный файлов рекламы или кода баннеров и указывать им на какие урлы они будут подключаться. Ну вот, как то так. Возможно ли это? Заранее благодарен за любой ответ.
ОтветитьУдалитьЗдравствуйте, классная менюшка. А как сделать трехуровневое меню? Не могли бы вы подсказать, что и где нужно изменить, очень нужно. Спасибо.
ОтветитьУдалитьЗдорово. А как сделать трехуровневое меню?
ОтветитьУдалитьКрасивое меню. Спасибо.
ОтветитьУдалитьСкажите, пожалуйста, как сделать так, чтобы при переходе с одной страницы сайта на другую меню не закрывалось?
Допустим, открыла я интересующий меня пункт меню, перешла по ссылке нужной, а меню при переходе осталось открытым.
Не совсем понял вопрос. Собственно меню и так не закрывается, т.е. меню открывается на том пункте, который соответствует ссылке открытой страницы сайта, если она конечно же есть в меню, если ссылки на эту страницу нет в меню, то оно естественно останется закрытым.
УдалитьУважаемый автор скрипта, можно ли сделать так чтобы ссылка открытой текущей страницы в подменю Раздела тоже была выделена цветом? А то получается, что раздел подсвечивает зеленым цветом, а на какой именно странице находишься - не ясно, особенно, если меню на сайте большое и многоуровневое.
ОтветитьУдалитьЯ несколько раз проверял этот пример и все работало как надо, т.е. открывается раздел, подсвечивается пункт с ссылкой на текущую страницу, однако у других бывают проблемы, поэтому показывайте живой пример (на сайте), буду посмотреть.
УдалитьНа основной сайт я это меню пока что еще не пускаю - "плохо" себя ведет. На данный момент тестирую его на тестовом сайте портянке, чтобы основной сайт не ломать экспериментами ))
УдалитьКак с вами можно связаться, ася или скайп? Объясню и покажу более детально.
Все данные для связи есть в "подвале", ссылка "Контакты".
УдалитьНичего не понимаю. Строка .sub-menu li.current > a { background: #efefef; } у меня стоит, но ссылки из раздела подменю все равно не подсвечиваются.
ОтветитьУдалитьНе понимаю, где я накосячила?
Я, наверное, в предыдущих комментариях не совсем верно свой вопрос сформулировала. Мне бы хотелось, чтобы в меню при открытой страницы раздела подменю выделялось цветом само слово подменю, которое ведет на конкретную страницу, а не бежевая полоска, которая в подменю.
ОтветитьУдалитьКогда наводишь на подменю курсор мыши, слово из блока подменю становится зеленого цвета, можно ли сделать так, чтобы при открытой странице подменю слово подменю автоматически было зеленого цвета?
Надеюсь, понятно объяснила?
Если я правильно понял вам просто нужно изменить в CSS цвет для блока с добавочным классом. Если нет - то пример в студию пожалуйста.
УдалитьТак замудрено написали... Я в CSS вообще ни в зуб ногой ((
УдалитьМожет быть так вам будет понятнее, что именно мне надо? Вот скриншот из вашего демо-шаблона, я на нем написала, что именно надо.
http://i.piccy.info/i9/241d24c614400fbe017073c5f5ccc33d/1446110848/26078/965383/screen_menu.jpg
.sub-menu li.current > a { color: green; }
УдалитьДа, так, только этот цвет green сильно ядрёный, мне нужен его родной цвет, нежно-зеленый, как в категориях меню, приятный для глаз.
УдалитьP.S. Не думала, что так быстро получу от вас ответ, поэтому успела уже написать вам на мейл и даже видео своей проблемы снять вместо скриншота ))
Этот цвет, такой как в меню, есть в стилях самого меню там где :hover . Вот здесь можете выбрать любой другой
Удалитьhttp://www.magentawave.com/2012/02/table-html-colors.html
Большое спасибо за помощь!
УдалитьУважаемый, Александр! Скажите, можно ли на сайте установить 2 таких меню, не будут ли они конфликтовать между собой?
ОтветитьУдалитьОфициально, но приятно)) Думаю можно, я лично не пробовал. Попробуйте, потом расскажите и вместе попробуем решить проблемы если не получится.
УдалитьАлександр, проверьте, у вас форма обратной связи корректно работает? А то к вам письма уходят, а ответа нет. Может вы их не получаете?
ОтветитьУдалитьФорма работает исправно, все письма приходят и я их по мере сил обрабатываю. Ваше получил.
УдалитьЗдравствуйте!
ОтветитьУдалитьПоздравляю всех с Новым Годом!
Установила на сайт ваше меню, только в этом меню оставила лишь категории, подкатегории выпадающие убрала вообще. В связи с этим появился вопрос, как сделать так, чтобы при выборе нужной категории она подсвечивалась зеленым цветом (на данный момент выбранная категория вообще никак не выделяется, она серая).
В CSS добавлены вот эти пункты,
.sub-menu li.current > a { background: #efefef; }
.sub-menu li.current > a { color: #80b50d; }
но они ничего не дают и работают лишь тогда, когда есть подкатегории в меню, но мне они (подкатегории) для данного сайта без надобности.
И вас с Новым 2016 годом!
УдалитьРазобраться в сути вопроса вам поможет исходная статья
http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html
В данном случаи, необходимо в скрипте указать тот элемент, к которому необходимо добавлять дополнительный класс (current), т.е. выделить, а в CSS указать соответствующие значения свойств фона и цвета для добавочного класса.
И вам спасибо за содержательный комментарий :)
ОтветитьУдалитьНе знаю почему, но данное меню у меня почему-то не хочет корректно работать.
ОтветитьУдалитьЕсли установить меню и указать только HTML и CSS, то все работает нормально, вот только нужная категория не выделяется зеленым цветом.
А если прописать скрипт, в то место, где HTML, то меню вообще перестает работать. В общем, работает оно у меня только без скрипта.
Но проблема в том, что мне нужно чтобы при переходе по меню нужные категории выделялись цветом, а без скрипта это ведь никак нельзя реализовать или все-таки можно? Или может скрипт какой-то хитрый нужен?
Надеюсь, что не откажите в помощи...
Так мой комментарий и не появился...((
ОтветитьУдалитьВаш комментарий появился, я не всегда могу вовремя публиковать и уж тем более отвечать на комменты, но посмотрите исходную статью про принцип работы
Удалитьhttp://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html
и да, без скрипта подсветка меню на определенной странице работать не будет.
Добрый день, Александр.
ОтветитьУдалитьВот пытаюсь тоже сделать меню на сайт. http://jsfiddle.net/schibalov/v8rat9s3/. На сайте gtrad.ucoz.net работает не совсем корректно. Что не так?
Во-первых: на фидле не подключен jQuery, надо подключить, соответственно и на основном сайте тоже, для корректной работы меню. Во-вторых: на основном сайте не увидел меню вообще, поэтому не могу сказать где проблема.
Удалить