Курсы javascript
Нужна помощь!
Необходимо выделить активный пункт меню и его последний родительский пункт меню.
Например: перейдя по ссылке «страница 1», нужно добавить класс active активному пункту меню «страница 1» и его последнему родительскому пункт меню «подкатегория 1».
категория 1 подкатегория 1 страница 1
Есть вот такой код, но он добавляет класс active всем родительским пунктам меню.
$(function () < var location = window.location.href; $('.menu span').each(function () < var link = $(this).find('a').attr('href'); if (location.indexOf(link) !== -1) < $(this).addClass('active'); >>); >);
Выделение текущего пункта меню на CSS
Начал делать меню на сайте, и столкнулся с проблемой, не могу понять, как посредством CSS можно выделить категорию меню в которой я сейчас нахожусь, к примеру, есть такой код меню:
.h-nav .h-nav li .h-nav a .h-nav a:hover, .h-nav a.is-active
Получается, что когда пользователь на главной, надпись в меню «Главная» выделена синим цветом, остальные пункты меняют цвет только при наведении курсором, вопрос состоит в том, как сделать, чтоб при переходе в другую категорию она становилась активной(выделялась синим) в то время как «главная» приобретала свой первостепенный вид? Я просмотрел кучу информации по этому поводу, и все предлагают реализацию посредством JS, что мне не подходит, существует ли решение на CSS?
Как выделить активный пункт меню?
Подскажите как сделать так чтобы выделялась только одна кнопка изменю , а у остальных кнопок именялся цвет вот так ;
/* menu styles */ .menu < background-color: #2F4F4F; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24); >.menu__list < text-align: center; padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; >.menu__link < display: block; padding: 0.7rem 0rem; will-change: color; transition: color .25s ease-out; font-weight: 0; color: #fff; text-decoration: none; text-transform: uppercase; >/* наложение рамки */ .menu__link:focus < outline: 5px solid #98FB98; display: block; >@media (min-width: 601px) < .menu__list< display: flex; >.menu__group < flex-grow: 1; >.menu__link < position: relative; overflow: hidden; >/* фон полоски подсветки */ .menu__link:before, .menu__link:after < content: ""; width: 0; height: 5px; background-color: #008000; will-change: width; transition: width .05s ease-out; position: absolute; bottom: 0; >.menu__link:before < left: 50%; transform: translateX( -50%); >.menu__link:after < right: 50%; transform: translateX(50%); >.menu__link:hover:before, .menu__link:hover:after < width: 100%; transition-duration: .0s; >> /* hover effect */ .menu:hover .menu__link:not(:hover) < color: #000000; >/* Patreon */ .patreon < width: 0%; padding-top: 70px; padding-bottom: 230px; text-align: center; background-color: #800000; position: absolute; top: 0; left: 0; >.patreon__container < padding-left: 0px; padding-right: 0px; >.patreon__link
- Вопрос задан более трёх лет назад
- 237 просмотров
Активный пункт меню при помощи кода
Код позволяет вручную задать активный пункт меню. С его помощью можно сделать несколько пунктов активными. Чтобы код работал правильно, создайте в меню пункт с адресом, например, /page, и замените в коде /link на /page (или на ту ссылку, котороя задана у вас).
script> $(document).ready(function( ) < $('a[href="/link"]').addClass('t-active').css('font-weight','700'); >); script>