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

Question

[Дмитрий Екотов]

Доброе время суток. Нужна ваша помощь коллеги.

Хотел себе разработать: адаптивное меню с активным пунктом меню при её посещении.

- Главная
- Книги
- Истории
- Профиль

При нахождении на главной странице сайта, нужно чтобы подсвечивалась - главная (она же с SVG) у пользователя при посещении главной страницы с телефона.

Решил поступить таким путем.

Попробовал написать так:

<div id="menu">
    <nav class="nav-menu">
       <a href="/" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Главная</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Книги</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Фильмы</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Истории</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Профиль</div>
       </a>
    </nav>
</div>

Первое время думал, можно реализовать только используя HTML & CSS, но похоже это не так.

Сам JavaScript

$(function () {
$('.nav-menu a').each(function () {
    let location = window.location.href;
    let link = this.href;
    if (location == link) {
        $(this).addClass('active');
    }
})
})

Но ничего не выходит. Изначально (как я думал) он должен был захватить тег (a) вместе с (svg) и (div). Тем самым покрасив - главную и SVG в один цвет, благодаря классу active. Но ничего не вышло. Только удалось окрасить (svg) иконку, точней, только он и окрашивается, на текст - главная, плевать хотел JS.

Не могу понять в чем моя проблема.

Также, хотел бы у вас узнать, как можно этот скрипт JS подключить грамотно внутри тега (head), чтобы он работал и моментально отображался, вовсе не пока прогрузится страница. Пробовал подключать, он просто не работает, как и Owl-carousel, только перед (body).

Если говорить в целом, то, просто хотел реализовать меню навигации как у ivi.ru под мобильные устройства и планшеты (320-1024px) и также как у неё активный пункт меню.



p.s буду очень рад, вашей помощи.

Answer 1

[Дмитрий Екотов]

Решение моей проблемы, было вполне легкое. Но из за плохого знания CSS, я сделал все не так.

Нужно было написать вместо:

.menu-item__link,
.active.menu-module__text {
    color: #fff;
}

Написать так:

.active .item-link__text {color:#fff;} /* Нужен был пробел перед active. Поэтому он не окрасил div внутри </a>*/

По итогу - сам JavaScript работает на ура, и правильно. Проблема была в CSS.

Также, рекомендую, использовать такой скрипт:

const currentLocation = location.href;
const menuItem = document.querySelectorAll('.menu-item__link');
const menuLenght = menuItem.length
for (let i = 0; i<menuLenght; i++) {
    if (menuItem[i].href === currentLocation) {
        menuItem[i].className = "active menu-item__link";
    }
}

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

Answer 2

[Николай Угольников]

Почему нельзя через CSS?

<div id="menu">
    <nav class="nav-menu">
       <a href="/" class="menu-item__link menu-item__link--current">
         <svg></svg>
         <div class="item-link__text">Главная</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Книги</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Фильмы</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Истории</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Профиль</div>
       </a>
    </nav>
</div>

.menu-item__link--current {
    position: relative;
}

.menu-item__link--current::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    filter: blur(px);
}
}

Comments

[Дмитрий Екотов]

Благодарю вас за ответ.

Сейчас попробовал сделать так. Получается так, что он не переходи к другому элементу при нажатии, только всегда на одном. Из то же, истории, когда можно просто написать класс active и прописать его в HTML. Но мне нужно чтобы он был активен на панели навигации меню, при посещении страницы из меню. На JS примерно написал как я думаю будет верно, но результат не тот, который я ожидал.

На CSS не думаю, что реально это реализовать. Я бы с радостью, тогда он отображался моментально бы, не через миллисекунды. Но не знаю как это можно реализовать.

[Ankhena]

Почему нельзя через CSS?

Потому что CSS без понятия какой урл у текущей страницы.

[Николай Угольников]

Дмитрий Екотов, а ну тогда да, на CSS реализовать нереально

[Сергей delphinpro]

Дмитрий Екотов, Если у вас обычные страницы, перезагружаемые при переходах по страницам, то обычно так и делается – на стороне сервера генерится разметка с уже вставленными классами. Если работает ajax загрузка, то обычно используется какой-то клиентский роутер, и ответственность перекладывается на него.