Выделение активного пункта меню

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

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

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

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

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

1 2 <script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.js»> </script>

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

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

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

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

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

[РЕШЕНО] Как выделить активный пункт меню?

799.00 руб
Скачать/Купить дополнение
+70 позиций модулей \ HYPER Positions — oc3x
Лендинг дизайн, оформление.. 70 модульных позиций в 24х блоках — oc-3x
для opencart 2.3х — тут
для opencart 2.0 — 2.1 — 2.2 — тут
В модуле никогда не было стучалок и прочей лапши — всем, кто скачал где то — где модуль неофициально представлен — мои поздравления с вирусами и свободным доступом к вашей базе данных
Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
Позаботьтесь о презентабельной подаче вашего сайта — это не только лицо вашей компании но и ваше лицо!
Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
Внедрены четыре вида блоков обшее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке ДЕМО с оформлением
ДЕМО без оформления
АДМИНКА demo\demo
все модульные позиции один из вариантов чем ни лендинг?))
Схемы настройки блоков
кликните по картинке и откройте в полном размере
Вывести можно хоть все позиции но лучше то что нужно!
Установка:
В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. Дать права на редактирование модуля Включить модуль в модулях В схемах выставить модули по вашему усмотрени. Ни какие файлы не затираются
—————
Возможно будет нужна адаптация под ваш шаблон нужно смотреть походу..
в любом случае если, что то не так пишите в тему поддержки — попробуем сделать
ВНИМАНИЕ!
Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
Поддержка и адаптация под прочие шаблоны возможна только на ветке 3x!
Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки — значит поддержка вам ненужна
Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
Спасибо вам за спасибо!)
Пользуйтесь на здоровье)
Прежде чем купить читайте описание!
Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
Добавил AWARO Добавлено 26.02.2019 Категория Модули Системные требования прямые руки Сайт разработчика https://awaro.ru Старая цена 999 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0 ocStore 3.0 OpenCart.Pro, ocShop Обращение к серверу разработчика Нет

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *