Активный пункт меню
Активный пункт меню — весьма востребованное свойство для любого сайта. И в этой статье мы рассмотрим, как можно силами CSS и небольшого кода JavaScript сделать такое весьма значимое решение на Вашем сайте.
Уверен, Вы не раз сталкивались с подобного рода визуальными эффектами на сайтах и хотели бы реализовать данную возможность у Вас на сайте. Нет проблем, эта статья поможет воплотить Вашу мечту в реальность.
Когда-то давным давно я сам задавался этой проблемой, пока не пришел к выводу, что бесполезно искать какие-то сторонние решения и решил создать свой скрипт, который легок для понимания любому мало-мальски подготовленному программисту в JavaScript, легко встраивается в любой шаблон, дизайн, в любую систему управления сайтом, хоть Joomla, хоть WordPress или иные. Итак, представляю Вашему вниманию активный пункт меню CSS и JavaScript.
Для начала подключаем между тегами <head> и </head> JQuery библиотеку, вот код.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>Чтобы более наглядно продемонстрировать Вам всю возможность и порядок действий для начала создайте любое меню между тегами <body></body>, например, вот такое.
<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. Учтите, Вы можете назвать его как Вашей душе угодно. Вот примерный код.
.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. И наш пункт меню бы окрасился в нужным нам цвет, поменял бы шрифт, или сменил background. Ниже код, не забудьте, вставляем его между тегами <head></head>
$(function () {
$('.menu a').each(function () {
var location = window.location.href;
var link = this.href;
if(location == link) {
$(this).addClass('active');
}
});
});Теперь я хотел немного пояснить вышепредставленный код и что он делает. Итак, это JavaScript код и он начинает функцию, которая сначала берет данные из нашего меню, а именно из нашего тега <a> нашего меню. Функция берет из адресной строки адрес, на котором мы сейчас находимся и присваивает его переменной location. Затем берет атрибут ссылки у нашего тега <a> и присваивает это значение переменной link, затем сравнивает эти две переменные, и если они равны, то есть мы находимся в данный момент именно на нужной нам странице, то с помощью функции addClass мы даем нашей ссылки новый класс active, стили оформления которого мы указали в CSS. Все, теперь все будет работать и Вы с легкостью сможете указывать любое меню с постоянной ссылкой.
Учтите, что у Вас могут возникнуть вопросы — Вы всегда сможете оставить свои комментарии под этой статьей. Удачи в написании отличных менюшек.
Свяжитесь с нами уже сейчас
- +7 (906) 272-38-19
Telegram / WhatsApp - info@cruelten.ru
- Cruelten
- Cruelten
Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.
