Активный пункт меню

Активный пункт меню — весьма востребованное свойство для любого сайта. И в этой статье мы рассмотрим, как можно силами 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. Все, теперь все будет работать и Вы с легкостью сможете указывать любое меню с постоянной ссылкой.

Учтите, что у Вас могут возникнуть вопросы — Вы всегда сможете оставить свои комментарии под этой статьей. Удачи в написании отличных менюшек.

Метки: CSS, JavaScript

Civilization 5 сценарии прохождение — Эпоха Ренессанса

Довольно лжи («Пекло», гер. режим)

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.

Последнее в блоге

Активный пункт меню

Рубрики

Свяжитесь с нами уже сейчас