Выбранный пункт меню html

Выделяем активный пункт меню на jQuery

На различных CMS есть стандартные инструменты (настройки, плагины), и с их помощью можно реализовать подсветку пункта в меню, в котором находится пользователь.

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

Для решения задачи, как вы поняли, мы используем jQuery, и реализация будет выглядеть следующим образом.

Предположим, что у нас имеется такое меню:

Что нам необходимо сделать? Сверить текущий URL с URL, указанными в меню, и в случае совпадения присвоить класс соответствующему пункту.

Готовый скрипт для данного примера будет выглядеть следующим образом:

«active» здесь – класс активного пункта меню. Далее, применяя стили, выделяете активный пункт, например, с помощью цвета:

 .navigation li.active a { color: green; >

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

Источник

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

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

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

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

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

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

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

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

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

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

Источник

Подсветка активного пункта меню с помощью jQuery

Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле.

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

Осталось стилизовать активный пункт меню

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

Первый вариант отлично работает для одноуровнего меню. Но если путь будет например такой:

/blog/coding/2019-01-19-podsvetka-aktivnogo-punkta-menyu-s-pomoshhyu-jquery.html

То первый вариант нам не подойдёт. Чтобы реализовать подсветку для вложенного активного пункта меню нужно использовать следующий jQuery код

$(".main-menu a").each(function () < if ((window.location.pathname.indexOf($(this).attr("href"))) >-1) < $(this).addClass("active"); >>);

Активный пункт меню с помощью JavaScript

Чтобы найти активный пункт меню на чистом JavaScript, воспользуйтесь следующим кодом:

document.querySelectorAll(".menu a").forEach((el) => < if (window.location.pathname.indexOf(el.getAttribute("href")) >-1) < el.classList.add("active"); >>);

Подсветка активного пункта меню при скролле

Теперь реализуем подсветку текущего пункта меню при прокрутке страницы.

Стили для активного пункта меню при нажатии и прокрутке:

Обратите внимание, должен быть подключен jQuery.

jQuery(($) => < const section = $(".section"); const nav = $(".menu"); const navHeight = nav.outerHeight(); // получаем высоту навигации // поворот экрана window.addEventListener("orientationchange", () =>< navHeight = nav.outerHeight(); >, false); $(window).on("scroll", () => < const position = $(this).scrollTop(); section.each(function () < const top = $(this).offset().top - navHeight - 5, bottom = top + $(this).outerHeight(); if (position >= top && position >); >); nav.find("a").on("click", function () < const $("html, body").animate(< scrollTop: $(id).offset().top - navHeight >, 487); return false; >); >);

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Источник

Как сделать активным пункт меню?

Как сделать, что бы при переходе на второй уровень, третий и т.д. предыдущие ссылки оставались активными.

Ответ написан более трёх лет назад
1 комментарий