Как сделать "умное" меню для сайта или блога

Девушка смотрит сквозь сложенные рукиДанный пост посвящен весьма распространенному вопросу о том, как выделить ссылку или пункт меню, соответствующий текущей странице сайта. Разработки такого рода весьма популярны и широко применяются для улучшения навигации, показывая посетителю в каком разделе или на какой странице он находится в данный момент.
 В этой статье подробно рассмотрены простые решения как реализовать подсветку раздела или ссылки меню, открытой в браузере страницы сайта, используя для этого возможности 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:
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;
}
В данном случаи класс .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, при этом не важно какие еще свойства присутствуют в ссылке из адресной строки браузера. Это самый простой и очень удобный вариант.
Иногда адреса внутренних страниц в меню сайта записывают еще короче - без первого слеша ("/").
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');}
  });
});
  Вариант 2. Если ссылки записаны полностью.
$(function() {
 $('.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
Данный вариант наименее практичный в некоторых случаях, т.к. требует довольно большое количество переменных и условий, как при использования на платформе Blogger, где ссылки могут быть такого вида:
http://www.mysite.com/blog/2013/thispost.html?showComment=123456789#c987654321
 На этом пока что все, всем удачи в экспериментах и спасибо за внимание. Замечания, пожелания и предложение можно вносить в форму ниже
©http://magentawave.com

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

  1. До вашего много блога,я так и не доросла,но хочу вас поздравить со всеми наступающими Празниками! Здоровья и дачи во всём,уважаемый Мagentawave

    ОтветитьУдалить
    Ответы
    1. Allochka, спасибо вам огромное за теплые слова и поздравления! Я также поздравляю вас с наступающими праздниками и желаю всего только самого наилучшего.

      Ну а на счет умного блога, не расстраивайтесь, ведь тоже все не сразу понял и да и сейчас еще многого не знаю :)

      Удалить
  2. Анонимный05.02.2013, 16:05

    А как добавить jquery файл? как его назвать?

    ОтветитьУдалить
    Ответы
    1. Саму библиотеку можно взять с Google Hosted Libraries вставляем до </head> Насчет назвать, не совсем понял

      Удалить
    2. Анонимный29.07.2013, 16:52

      кстати менюшка не работает так как надо.. при переходе на стр2 должно и в меню менятся беграунд, так? что бы было видно где мы находимся, а у Вас только при наведении меняется..

      Удалить
    3. Все проверено неоднократно в различных брузерах и работает как надо: при наведении меняется цвет на розовый, текущая вкладка (соответствующая текущей странице) выделяется пурпурно-фиолетовым.
      Если у вас что-то не выделено укажите, пожалуйста ось и браузер (с версией).

      Удалить
  3. Анонимный03.03.2013, 11:51

    Как применить этот скрипт на блог?

    ОтветитьУдалить
    Ответы
    1. Что значит "применить на блог"? Также как и остальные скрипты.

      Удалить
  4. а если вместо "#" используется "/" например: "articles/hi-tech" - ваше меню будет работать?

    ОтветитьУдалить
    Ответы
    1. Естественно, будет, т.к. это обычная ссылка.

      Удалить
  5. Анонимный07.09.2013, 14:39

    Здравствуйте, подскажите как сделать вот такую менюшку??( она на странице)
    http://www.metlifealico.ru/ru/Individual/Find-Our-Products/index.html

    ОтветитьУдалить
    Ответы
    1. Если я правильно понял, то вас интересует скорее блок с вкладками, который размещен на странице. О нем уже давно все написано, очень простой в использовании вариант описан в этой статье - http://www.magentawave.com/2012/04/dynamic-pages-on-blogger.html

      Удалить
  6. Анонимный07.10.2013, 14:35

    У вас и правда демо не работает, но я скопировала ваш код, у меня все заработало. Видимо, в демо какая-то ошибка.

    ОтветитьУдалить
    Ответы
    1. Я повторюсь еще раз. Такого, что меню в демо не работает, а код из статьи работает - быть не может ибо на демонстрационной странице РАЗМЕЩЕН ЭТОТ ЖЕ КОД как скрипта так и стиля. . Все ПРОВЕРЕНО И НЕ ОДИН РАЗ ВО ВСЕХ БРАУЗЕРАХ (последних версий и чуть раньше).
      Поэтому, для полноты картины, если что-то работает не так как надо, укажите ось и браузер в котором смотрите демо-страницу.

      Удалить
  7. Анонимный10.11.2013, 13:42

    Круто, спс!

    ОтветитьУдалить
  8. Здравствуйте! Не могли бы дать скрипт, который будет работать если в меню есть ссылка -главная, типа - http//:site.ru.
    Спасибо за отличный материал для чайников, все очень подробно.

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

      Удалить

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

BestProject