В этой статье подробно рассмотрены простые решения как реализовать подсветку раздела или ссылки меню, открытой в браузере страницы сайта, используя для этого возможности jQuery.
Суть реализации подобного улучшения очень простая: средствами JavaScript, в нашем случаи, с помощью jQuery, получить ссылку из адресной строки браузера, сравнить ее с ссылками в меню сайта и в случаи совпадения, добавить или изменить указанному тегу стилевые свойства, выделив его.
DEMO
Для демонстрации используется самое простое меню, но оно может быть и сложнее, в зависимости от ваших потребностей, HTML код его выглядит так:
<ul class="my-menu">
<li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
</ul>
К нему прилагается вот такой CSS: <li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
</ul>
ul.my-menu,
ul.my-menu li {
list-style: none;
padding: 0;
margin: 0;
outline: none;
}
ul.my-menu li {
float: left;
margin: 1px;
}
ul.my-menu li a {
display: block;
background: #a849a3;
height: 100%;
text-decoration: none;
color: #fff;
padding: 30px 15px;
}
ul.my-menu li:hover a {
background: #e570e7;
}
/*добавочный класс для текущего(выбранного) пункта*/
ul.my-menu li a.current {
background: #B271E8;
}
ul.my-menu li {
list-style: none;
padding: 0;
margin: 0;
outline: none;
}
ul.my-menu li {
float: left;
margin: 1px;
}
ul.my-menu li a {
display: block;
background: #a849a3;
height: 100%;
text-decoration: none;
color: #fff;
padding: 30px 15px;
}
ul.my-menu li:hover a {
background: #e570e7;
}
/*добавочный класс для текущего(выбранного) пункта*/
ul.my-menu li a.current {
background: #B271E8;
}
В данном случаи класс .current, используется в качестве добавочного селектора, который будет прикреплен к соответствующему условиям пункту меню и изменит или дополнит его стилевые свойства.
В примере, он меняет цвет фона ссылки.
Работа обработчика подразумевает манипуляции со свойствами объекта location, (Подробнее), поэтому запись скрипта зависит от того, как именно указаны ссылки в разделах меню -В примере, он меняет цвет фона ссылки.
- сокращенно, без домена сайта:
/blog/2013/thispost.html
- или полностью:http://www.mysite.com/blog/2013/thispost.html
Также необходимо учитывать структуру ссылок и в зависимости от этого, использовать соответствующие свойства объекта location.Для использования jQuery, не забываем подключить этот фреймворк к сайту, если этого еще не сделано.
Вариант 1. Если ссылки записаны сокращенно (используется на DEMO странице).$(function() {
$('.my-menu a').each(function() {
var pathname = window.location.pathname; //получаем необходимое свойство текущей ссылки
var thislink = $(this).attr('href'); //получаем значение атрибута href для ссылок меню
//если значения идентичный - присваиваем новый класс
if(thislink == pathname){$(this).addClass('current');}
});
});
В данном случаи, благодаря короткой записи ссылок, сравнивается лишь одно свойство - pathname, при этом не важно какие еще свойства присутствуют в ссылке из адресной строки браузера. Это самый простой и очень удобный вариант.$('.my-menu a').each(function() {
var pathname = window.location.pathname; //получаем необходимое свойство текущей ссылки
var thislink = $(this).attr('href'); //получаем значение атрибута href для ссылок меню
//если значения идентичный - присваиваем новый класс
if(thislink == pathname){$(this).addClass('current');}
});
});
Иногда адреса внутренних страниц в меню сайта записывают еще короче - без первого слеша ("/").
Вариант 2. Если ссылки записаны полностью.blog/2013/thispost.html
В таком случаи, чтобы скрипт работал, необходимо добавить недостающий символ, записав его в коде скрипта:$(function() {
$('.my-menu a').each(function() {
var pathname = window.location.pathname;
var thislink = $(this).attr('href');
if("/" + thislink == pathname){$(this).addClass('current');}
});
});
$('.my-menu a').each(function() {
var pathname = window.location.pathname;
var thislink = $(this).attr('href');
if("/" + thislink == pathname){$(this).addClass('current');}
});
});
$(function() {
$('.my-menu a').each(function() {
var thisTab = window.location.href;
var thislink = $(this).attr('href');
if(thisTab == thislink){$(this).addClass('current');}
});
});
$('.my-menu a').each(function() {
var thisTab = window.location.href;
var thislink = $(this).attr('href');
if(thisTab == thislink){$(this).addClass('current');}
});
});
Данный вариант предусматривает полную идентичность сравниваемых ссылок.
Например: если посетитель перешел на страницу, кликнув с главной по срезу "Читать дальше", тогда ссылка в адресной строке будет иметь вид:
Поэтому в скрипт необходимо добавить новую переменную для этого свойства и дополнительное условие для сравнения:
На этом пока что все, всем удачи в экспериментах и спасибо за внимание. Замечания, пожелания и предложение можно вносить в форму ниже Например: если посетитель перешел на страницу, кликнув с главной по срезу "Читать дальше", тогда ссылка в адресной строке будет иметь вид:
http://www.mysite.com/blog/2013/thispost.html#more
т.е. отличаться от той которая записана в атрибуте href тега <a> раздела меню и скрипт не выделит его. Поэтому в скрипт необходимо добавить новую переменную для этого свойства и дополнительное условие для сравнения:
$(function() {
$('.my-menu a').each(function() {
var thisTab = window.location.href;
var thisTabHahs = window.location.hash; //получаем якорь ссылки (если есть)
var thislink = $(this).attr('href');
if(thisTab == thislink || thisTab == thislink + thisTabHahs){$(this).addClass('current');}
});
});
Дословно, в данном случаи, условие звучит так: если ссылка из адресной строки идентична ссылке из меню или ссылка из адресной строки идентична ссылке из меню с добавленным к ней текущем якорем - добавить класс .current$('.my-menu a').each(function() {
var thisTab = window.location.href;
var thisTabHahs = window.location.hash; //получаем якорь ссылки (если есть)
var thislink = $(this).attr('href');
if(thisTab == thislink || thisTab == thislink + thisTabHahs){$(this).addClass('current');}
});
});
Данный вариант наименее практичный в некоторых случаях, т.к. требует довольно большое количество переменных и условий, как при использования на платформе Blogger, где ссылки могут быть такого вида:
http://www.mysite.com/blog/2013/thispost.html?showComment=123456789#c987654321
©http://magentawave.com
До вашего много блога,я так и не доросла,но хочу вас поздравить со всеми наступающими Празниками! Здоровья и дачи во всём,уважаемый Мagentawave
ОтветитьУдалитьAllochka, спасибо вам огромное за теплые слова и поздравления! Я также поздравляю вас с наступающими праздниками и желаю всего только самого наилучшего.
УдалитьНу а на счет умного блога, не расстраивайтесь, ведь тоже все не сразу понял и да и сейчас еще многого не знаю :)
А как добавить jquery файл? как его назвать?
ОтветитьУдалитьСаму библиотеку можно взять с Google Hosted Libraries вставляем до </head> Насчет назвать, не совсем понял
Удалитькстати менюшка не работает так как надо.. при переходе на стр2 должно и в меню менятся беграунд, так? что бы было видно где мы находимся, а у Вас только при наведении меняется..
УдалитьВсе проверено неоднократно в различных брузерах и работает как надо: при наведении меняется цвет на розовый, текущая вкладка (соответствующая текущей странице) выделяется пурпурно-фиолетовым.
УдалитьЕсли у вас что-то не выделено укажите, пожалуйста ось и браузер (с версией).
Как применить этот скрипт на блог?
ОтветитьУдалитьЧто значит "применить на блог"? Также как и остальные скрипты.
Удалитьа если вместо "#" используется "/" например: "articles/hi-tech" - ваше меню будет работать?
ОтветитьУдалитьЕстественно, будет, т.к. это обычная ссылка.
УдалитьЗдравствуйте, подскажите как сделать вот такую менюшку??( она на странице)
ОтветитьУдалитьhttp://www.metlifealico.ru/ru/Individual/Find-Our-Products/index.html
Если я правильно понял, то вас интересует скорее блок с вкладками, который размещен на странице. О нем уже давно все написано, очень простой в использовании вариант описан в этой статье - http://www.magentawave.com/2012/04/dynamic-pages-on-blogger.html
УдалитьУ вас и правда демо не работает, но я скопировала ваш код, у меня все заработало. Видимо, в демо какая-то ошибка.
ОтветитьУдалитьЯ повторюсь еще раз. Такого, что меню в демо не работает, а код из статьи работает - быть не может ибо на демонстрационной странице РАЗМЕЩЕН ЭТОТ ЖЕ КОД как скрипта так и стиля. . Все ПРОВЕРЕНО И НЕ ОДИН РАЗ ВО ВСЕХ БРАУЗЕРАХ (последних версий и чуть раньше).
УдалитьПоэтому, для полноты картины, если что-то работает не так как надо, укажите ось и браузер в котором смотрите демо-страницу.
Круто, спс!
ОтветитьУдалитьНе работает
ОтветитьУдалитьЧто именно не работает и где?
УдалитьЗдравствуйте! Не могли бы дать скрипт, который будет работать если в меню есть ссылка -главная, типа - http//:site.ru.
ОтветитьУдалитьСпасибо за отличный материал для чайников, все очень подробно.
Вроде бы вариант 2 должен подсвечивать такую ссылку, т.к. там сравнивается полностью ссылка в меню и в строке браузера.
Удалить