перелинковка

Отслеживание внутренней навигации

Выявление активной вкладки навигации на многостраничном сайте является важной частью написания качественного продукта

В навигации вашего сайта может  быть как простое меню, без выпадающего списка, так и с ним. Мы рассмотрим скрипты для обоих случаев. Эти скрипты можно использовать как для главной навигации так и для навигации в сайдбаре.

Начнем с простого варианта без выпадающего списка, в таком случае ваша разметка будет выглядеть примерно следующим образом

<ul id="menu-services-menu" class="menu rt-mega-menu-transition-slide">
    <li id="menu-item-528"><a href="/demontazh-promyshlennykh-zdaniy">Демонтаж промышленных зданий</a></li>
    <li id="menu-item-530"><a href="/demontazh-betonnykh-konstruktsij">Демонтаж бетонных конструкций</a></li>
    <li id="menu-item-529"><a href="/demontazh-zavodov">Демонтаж заводов</a></li>
    <li id="menu-item-2372"><a href="/demontazh-vnutri-zdaniya">Демонтаж внутри здания</a></li>
    <li id="menu-item-2381"><a href="/demontazh-angarov">Демонтаж ангаров</a></li>
    <li id="menu-item-2382"><a href="/demontazh-mostov">Демонтаж мостов</a></li>
    <li id="menu-item-2382"><a href="/demontazh-rezervuarov">Демонтаж резервуаров</a></li>
    <li id="menu-item-2382"><a href="/likvidatsiya-zdanij"> Ликвидация зданий</a></li>
    <li id="menu-item-2382"><a href="/redevelopment">Рециклинг</a></li>
</ul>

Для такого варианта нам потребуется следующий скрипт

<script>
    jQuery(document).ready(function($) {
        $.each($('#menu-services-menu  li  a'), function(index, value) {
            if (value == window.location.href.toLowerCase()) {
                $(this).closest("li").addClass('active');
            }
        });
    })
</script>

Функцией “.each()” мы вытягиваем все <a> с их значением href и каждая итерация сохраняется в переменную value. После этого мы ищем такое значение, которое совпадает с url текущей страницы. Текущую страницу мы узнаем через window.location.href, функция .toLowerCase() требуется для приведения строки в нижний регистр. При нахождении совпадения, уже на ваше усмотрение и ваш дизайн вы можете добавлять класс activ к самому тегу <а>:

$(this).addClass('active');

либо к его родительскому элементу <li>:

$(this).closest("li").addClass('active');

Далее рассмотрим вариант сложного меню, к примеру:

<ul id="menu-header-menu">
    <li id="menu-item-169" class="menu-item">
        <a href="/" class="">Главная</a>
    </li>
    <li id="menu-item-150" class="menu-item menu-item-has-children">
        <a href="#">Наши услуги</a>
        <ul class="rt-sub-menu">
            <li id="menu-item-528" class="menu-item sub"><a href="/demontazh-promyshlennykh-zdaniy">Демонтаж промышленных зданий</a></li>
            <li id="menu-item-530" class="menu-item sub"><a href="/demontazh-betonnykh-konstruktsij">Демонтаж бетонных конструкций</a></li>
            <li id="menu-item-529" class="menu-item sub"><a href="/demontazh-zavodov">Демонтаж заводов</a></li>
            <li id="menu-item-2372" class="menu-item sub"><a href="/demontazh-vnutri-zdaniya">Демонтаж внутри здания</a></li>
            <li id="menu-item-2381" class="menu-item sub"><a href="/demontazh-angarov">Демонтаж ангаров</a></li>
            <li id="menu-item-2382" class="menu-item sub"><a href="/demontazh-mostov">Демонтаж мостов</a></li>
            <li id="menu-item-2382" class="menu-item sub"><a href="/demontazh-rezervuarov">Демонтаж резервуаров</a></li>
            <li id="menu-item-2382" class="menu-item sub"><a href="/likvidatsiya-zdanij"> Ликвидация зданий</a></li>
            <li id="menu-item-2382" class="menu-item sub"><a href="/redevelopment">Рециклинг</a></li>
        </ul>
    </li>
</ul>

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

<script>
    $.each($('#menu-header-menu >  li  a'), function(index, value) {
        if (value == window.location.href.toLowerCase()) {
            if ($(this).closest("ul").hasClass('rt-sub-menu')) {
                $('#menu-header-menu >  li  a').removeClass('active');
                $(this).closest("ul").siblings("a").addClass('active');
            } else {
                $('#menu-header-menu >  li  a').removeClass('active');
                $(this).addClass('active');
            }
        }
    });
</script>

В этом случае мы все также проходимся по всем тегам <a> и ищем совпадение с текущей страницей. При нахождении совпадения мы проверяем является ли текущая ссылка подменю:

if ($(this).closest("ul").hasClass('rt-sub-menu'))

Если да, то после этого так само в зависимости от нашего дизайна мы ищем  его главный <a> или <li>

$(this).closest("ul").siblings("a").addClass('active');

Функция .siblings() определяет элементы, которые лежат на одном уровне DOM, как в нашем примере:

<li id="menu-item-150" class="menu-item menu-item-has-children">
        <a href="#">Наши услуги</a>
        <ul class="rt-sub-menu">
            <li id="menu-item-528" class="menu-item sub"><a href="/demontazh-promyshlennykh-zdaniy">Демонтаж промышленных зданий</a></li>
            <li id="menu-item-530" class="menu-item sub"><a href="/demontazh-betonnykh-konstruktsij">Демонтаж бетонных конструкций</a></li>
        </ul>
    </li>

Иначе вы просто ищете дальше родительский <li>

Если текущая ссылка не является под меню то будет выполняться инструкция else главного скрипта

else {
                $(this).addClass('active');
            }

 

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *