Выделение текущего пункта меню на CSS
Начал делать меню на сайте, и столкнулся с проблемой, не могу понять, как посредством CSS можно выделить категорию меню в которой я сейчас нахожусь, к примеру, есть такой код меню:
.h-nav .h-nav li .h-nav a .h-nav a:hover, .h-nav a.is-active
Получается, что когда пользователь на главной, надпись в меню «Главная» выделена синим цветом, остальные пункты меняют цвет только при наведении курсором, вопрос состоит в том, как сделать, чтоб при переходе в другую категорию она становилась активной(выделялась синим) в то время как «главная» приобретала свой первостепенный вид? Я просмотрел кучу информации по этому поводу, и все предлагают реализацию посредством JS, что мне не подходит, существует ли решение на CSS?
Как сделать выделение активного пункта меню?
Имеется вот такое меню. Сделал уже состояние при hover’е, теперь необходимо сделать чтобы такое состояние оставалось при нахождении на странице этого пункта меню. Как это сделать?
- Вопрос задан более трёх лет назад
- 3855 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 4
php, js, html5, css
Тут вопрос в том каким образом подгружается контент. Если загрузка содержимого страницы происходит без перезагрузки страницы (динамически, например через ajax), то можно просто менять фон у кнопки, или вешать на неё дополнительный класс вроде:
.activeButton < background-color: yellow;А если происходит физический перевод по ссылке с перезагрузкой страницы, то нужно в каждый раз при загрузке новой страницы брать из адресной строки текущую страницу и уже через отдельную функцию отмечать нужный пункт меню (кнопку).
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Выделение активных пунктов меню
Задавала вопрос, но почему-то не работает… modx.ru/vopros-otvet/info/6017/
Как сделать чтобы выделялись активные меню только одного пункта, если это родитель, чтобы нижестоящие не выделялись?
Сейчас такой код чанка меню:
.here a:hover, .active a:hover < background: none; color: #353939 !important; font-weight: 700; >.here a, .menu a:hover < background: url(http://text-24.ru/css/img/menu.gif) 10px 0 repeat-x #f9f9f9; border: #d4d4d4 solid 1px; text-decoration: none; color: #000 !important; text-overflow: ellipsis; height: 100%; >Стили применяются ко всем страницам ветки:
Выделяется вся ветка Учителя4
Просьба ко всем знатокам помочь
- Теги:
- активный пункт меню
София
11.09.18 в 06:09
Комментарии (3)
София 11.09.2018 08:44 #
Разобралась вроде бы…
Нужно было поставить в конце &offset=`1`
София 11.09.2018 10:16 #
Нет, все равно не работает… Очистила кеш — и снова выделяются ВСЕ пункты меню…
Павел Романов 11.09.2018 11:39 #
у Вас класс here применяется ко всем ссылкам внутри элемента с этим классом.
Либо сделайте так:
.here > a
Либо поменяйте чанк и пропишите класс только для ссылки, а не li:
Ну и, соответственно, CSS:
.here:hover
Комментарий был изменён 11.09.2018 в 11:42
Для добавления комментариев вы должны авторизоваться или зарегистрироваться.
ТОП 10 сайтов в году
К сожалению, пока недостаточно данных. Пожалуйста, выберите другой год.
Как выделить активный пункт меню?
Подскажите как сделать так чтобы выделялась только одна кнопка изменю , а у остальных кнопок именялся цвет вот так ;
/* 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
- Вопрос задан более трёх лет назад
- 242 просмотра