16 270 Ваш сайт может быть продуман до мелочей, но если Вы не стали уделять внимание максимально удобному оформлению меню, то сайт едва ли можно назвать комфортным. Итак, для того чтобы оформить активный пункт меню, обратимся за помощью к CSS и одному простому коду JavaScript. С ними можно легко и просто сделать меню более удобным в использовании.
По сути, подсветка активного пункта в меню встречается практически на любом сайте. Возможно, пользователь и не обращает на эту деталь никакого внимания ровно до того момента, пока не наткнется на меню без подсветки. В этом случае быстро сосредоточить внимание на нужном пункте становится сложнее.
К всеобщему удивлению стоит отметить, что найти готовое стороннее решение оказалось не так просто. В связи с чем был написан небольшой код JavaScript. Преимущества этого кода заключаются в его простоте — он доступен каждому, кто знаком с основами JavaScript. Во-вторых, код можно достаточно легко встроить в любой шаблон вне зависимости от того, какая система управления у Вашего сайта — WordPress, Joomla или прочие.
С чего начать?
Первым делом необходимо подключить JQuery библиотеку. Сделаем это с помощью этого кода (вставлять между <head> и </head>):
|
1 2 |
<script type="text/javascript" src="<a href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"> </script> |
Понять суть процесса будет легче, если Вы самостоятельно создадите какое-либо меню между <body></body>. Например:
|
1 2 3 4 5 6 7 |
<ul class="menu"> <li> <a href="#" >1</a></li> <li><a href="#">1</a></li> <li><a href="#" >1</a></li> <li><a href="#" >1</a></li> <li><a href="#" >1</a></li> </ul> |
В этом образце приводится самое простое меню. В данном случае ему был присвоен класс “menu”, но по сути можно задать любой класс. Присвоив различные классы, Вы убережете себя от путаницы в дальнейшем, и работать станет гораздо удобнее.
Теперь у нас есть меню. На следующем этапе необходимо четко понять, какого результата мы хотим добиться – как именно будет представлен активный пункт меню в тот момент, когда пользователь находится на данной странице. Тут обратимся к CSS: присвоим новый класс непосредственно активному пункту меню. Допустим, имя класса будет active ( опять же, вы вольны в выборе имени класса). Код должен выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 |
.active { font-family: Trajan Pro, Times New Roman; color: #ffffff; font-variant: small-caps; font-size:16px; padding-left:7px; word-spacing: 1px; } |
Не забывайте, что указанные в CSS параметры обязательно относятся к активному пункту меню.
Следующим шагом станет скрипт: его задача — определить, какая страница активна у пользователя. Далее, если данная страница соответствует запрошенной, необходимо присвоить заданному пункту его класс active. Соответственно, пункт изменит цвет, шрифт и задний фон. Код необходимо заключать в теги <head></head>:
|
1 2 3 4 5 6 7 8 9 |
$(function () { $('.menu a').each(function () { var location = window.location.href; var link = this.href; if(location == link) { $(this).addClass('active'); } }); }); |
Как уже было сказано выше, это — JavaScript код. Он выполняет следующее: вызванная функция загружает данные из меню, а именно — из тега. Адрес страницы, на которой находится пользователь, функция присваивает переменной location. Далее функция обращается к атрибуту ссылки под тегом, которой присваивает значение переменной link. Если пользователь находится на нужной странице, эти функции будут равны. Тогда функция addClass даст возможность присвоить ссылке новый класс active. А сам стиль уже был ранее прописан в CSS.
Так можно сделать любое меню с активной ссылкой. В целом, на этом задача считается выполненной.
Полезная статья :)
Хороший скрипт. Работает на WP. Но есть недостаток — не работает , если страница разбита на несколько частей. На первой части работает, на остальных нет.
А может можно доработать?