Убрать активность ссылки в одном пункте меню

Рейтинг: 0Ответов: 2Опубликовано: 02.07.2023

Помогите, пожалуйста. Суть задачи, сделать так, чтобы при наведении на слово МЕНЮ выпадал список, но нажать на само слово МЕНЮ было нельзя(убрать кликабельность), но при этом у пункта ДОСТАВКА кликабельность должна быть сохранена. Прилагаю код Ссылка на песочницу

<div class="b-nav d-none d-md-block">
<div class="container">
    <div class="b-nav__bar_icon_wrapper b-nav__link_wrapper">
        <a href="#" class="b-nav__bar_icon i-nav__bar_icon hidden"><span class="material-icons">menu</span></a>
        <div class="b-nav__submenu b-nav__submenu--dropdown i-nav__dropdown"></div>
    </div>
    <div class="i-nav b-nav__links">
        <div class="i-nav__link b-nav__link_wrapper">
            <a href="/category/menyu/" class="b-nav__link">
                Меню<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path></svg>
            </a>
            <div class="b-nav__submenu">
                <a href="/category/menyu/nori-maki/" class="b-nav__submenu_link">Нори маки</a><a href="/category/menyu/ura-maki/" class="b-nav__submenu_link">Ура маки</a>
                <a href="/category/menyu/tempura-rolly/" class="b-nav__submenu_link">Темпура роллы</a><a href="/category/menyu/sety/" class="b-nav__submenu_link">Сеты</a>
                <a href="/category/menyu/zapechennye-rolly/" class="b-nav__submenu_link">Запеченные роллы</a><a href="/category/menyu/sushi/" class="b-nav__submenu_link">Суши</a>
                <a href="/category/menyu/zakus/" class="b-nav__submenu_link">Закуски</a><a href="/category/menyu/sashimi/" class="b-nav__submenu_link">Сашими</a><a href="/category/menyu/poke/" class="b-nav__submenu_link">Поке</a>
                <a href="/category/menyu/mini-rolly/" class="b-nav__submenu_link">Мини роллы</a><a href="/category/menyu/supy/" class="b-nav__submenu_link">Супы</a>
                <a href="/category/menyu/goryachie-blyuda/" class="b-nav__submenu_link">Горячие блюда</a><a href="/category/menyu/napitki/" class="b-nav__submenu_link">Напитки</a>
                <a href="/category/menyu/sousy/" class="b-nav__submenu_link">Соусы</a><a href="/category/menyu/dopolnitelno/" class="b-nav__submenu_link">Дополнительно</a>
            </div>
        </div>
        <div class="i-nav__link b-nav__link_wrapper"><a href="/category/dostavka/" class="b-nav__link">Доставка</a></div>
    </div>
</div>

Ответы

▲ 0

Ссылке со словом "меню" присвойте класс disabled. В CSS пропишите: a.disabled {pointer-events: none;cursor: default; color: red;}

▲ 0

Заменить

<a href="/category/menyu/" class="b-nav__link">
                Меню<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path></svg>
            </a>

на

<a href="#" class="b-nav__link">
                Меню<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path></svg>
            </a>