@ssvv96

Как подчеркнуть активный пункт меню?

Добрый вечер. Помогите разобраться как как подчеркнуть текущий (не выделенный, а тот который соответствует текущему пути) пункт меню? заранее спасибо за подсказку

само меню:
<ul class="main-menu">
            <li><a href="/">Главная</a></li>
            <li><a href="/route/about/">О нас</a></li>
            <li><a href="/route/contacts/">Контакты</a></li>
            <li><a href="/route/news/">Новости о нашем проекте</a></li>
            <li><a href="/route/catalog/">Каталог выполненных проектов </a></li>
        </ul>


а это не сработало:
.main-menu li a:active {
    padding: 6px 10px;
    text-decoration: underline;
    display: block;
    color: #ffffff;
    background: url(i/fl-bg-hover.gif) bottom repeat-x #67bdff;
    font-size: 16px;
}
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
<ul class="main-menu">
<li><a class="main-menu__link"href="/">Главная</a></li>
<li><a class="main-menu__link" href="/route/about/">О нас</a></li>
<li><a class="main-menu__link" href="/route/contacts/">Контакты</a></li>
<li><a class="main-menu__link" href="/route/news/">Новости о нашем проекте</a></li>
<li><a class="main-menu__link" href="/route/catalog/">Каталог выполненных проектов </a></li>
</ul>


const mainMenuLink = document.querySelectorAll('.main-menu__link');
const activeClass = 'main-menu__link-active';

mainMenuLink.forEach(link => {
    if (link.href === document.location.href) {
        link.classList.add(activeClass);
    } else {
        link.classList.remove(activeClass);
    }
})


Или:

const mainMenuLink = document.querySelectorAll('.main-menu__link');
const activeClass = 'main-menu__link-active';

mainMenuLink.forEach(link => {
    if (link.pathname === window.location.pathname) {
        link.classList.add(activeClass);
    } else {
        link.classList.remove(activeClass);
    }
})


.main-menu__link-active {....}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
:active это состояние нажатия.

Для определения соответствия пути в ссылке и текущего урла вам потребуется js window.location.href
Ответ написан
@Froggyweb
Ну или сервер расставляет классы прямо в разметке
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы