Активный пункт меню
Блог
Делимся с Вами своими знаниями и новостями
13.04.2013

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

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

Активный пункт меню – весьма востребованное свойство для любого сайта. И в этой статье мы рассмотрим, как можно силами CSS и небольшого кода JavaScript сделать такое весьма значимое решение на Вашем сайте.

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

Когда-то давным давно я сам задавался этой проблемой, пока не пришел к выводу, что бесполезно искать какие-то сторонние решения и решил создать свой скрипт, который легок для понимания любому мало-мальски подготовленному программисту в JavaScript, легко встраивается в любой шаблон, дизайн, в любую систему управления сайтом, хоть Joomla, хоть WordPress или иные. Итак, представляю Вашему вниманию активный пункт меню CSS и JavaScript.

Для начала подключаем между тегами <head> и </head> JQuery библиотеку, вот код.

Чтобы более наглядно продемонстрировать Вам всю возможность и порядок действий для начала создайте любое меню между тегами <body></body>, например, вот такое.

Как мы видим из примера это у нас обычное меню, которому мы присвоили класс menu – учтите, Вы можете присваивать такой класс, который Вы считаете нужным, чтобы у Вас не было проблем с одинаковыми классами меню, настоятельно рекомендую использовать уникальные названия классов.

И вот, мы установили такое меню. Теперь наша задача сделать так, можно сказать, представить в голове, а потом кодом, как нам нужно, чтобы выглядел активный пункт меню при нахождении на соответствующей странице. Для этого мы будем использовать CSS и давайте придумаем класс для нашего активного пункта меню и назовем его active. Учтите, Вы можете назвать его как Вашей душе угодно. Вот примерный код.

Заметьте, все, что Вы пишите в CSS, должно относится к нашему пункту меню,  который мы хотим сделать активным. Теперь же нам необходимо сделать маленький скрипт, который бы определял, на какой мы находимся странице, а затем при условии, что эта страница равна нашей запрошенной – присваивал нужному нам пункту меню свой класс active. И наш пункт меню бы окрасился в нужным нам цвет, поменял бы шрифт, или сменил background. Ниже код, не забудьте, вставляем его между тегами <head></head>

Теперь я хотел немного пояснить вышепредставленный код и что он делает. Итак, это JavaScript код и он начинает функцию, которая сначала берет данные из нашего меню, а именно из нашего тега <a> нашего меню. Функция берет из адресной строки адрес, на котором мы сейчас находимся и присваивает его переменной location. Затем берет атрибут ссылки у нашего тега <a> и присваивает это значение переменной link, затем сравнивает эти две переменные, и если они равны, то есть мы находимся в данный момент именно на нужной нам странице, то с помощью функции addClass мы даем нашей ссылки новый класс active, стили оформления которого мы указали в CSS. Все, теперь все будет работать и Вы с легкостью сможете указывать любое меню с постоянной ссылкой.

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

Метки: ,

Комментарии:

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




Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.
Онлайн заявка


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.