Не большая заметка по теме навигации на сайте. Столкнулся с такой проблемой, что при переходе в другой раздел сайта ссылка не активна и не видно, где ты сейчас находишься.

Показываю на своем примере с чем пришлось столкнуться и как я решил эту проблему.

Делал не большой сайт и там главное меню расположено слева от контента при переходе по ссылки она становиться активной. Но по умолчанию активна только главная страница.

 

 

 

Вот html код этой навигации.

<div class="tm-left-inner-container">
    <ul class="nav nav-stacked templatemo-nav">
        <li><a href="index.html" class="active"><i class="fa fa-home fa-medium"></i>Homepage</a></li>
        <li><a href="products.html"><i class="fa fa-shopping-cart fa-medium"></i>Products</a></li>
        <li><a href="services.html"><i class="fa fa-send-o fa-medium"></i>Services</a></li>
        <li><a href="testimonials.html"><i class="fa fa-comments-o fa-medium"></i>Testimonials</a></li>
        <li><a href="about.html"><i class="fa fa-gears fa-medium"></i>About Us</a></li>
        <li><a href="contact.html"><i class="fa fa-envelope-o fa-medium"></i>Contact</a></li>
    </ul>
</div>

Как видим ссылка на главную страницу имеет класс active. Если этот класс проставить всем ссылкам, то получится, что все они будут активны куда бы ты не перешел.

Я решил эту проблему так.

        <div class="tm-left-inner-container">
            <ul class="nav nav-stacked templatemo-nav">
                <li><a href="/" class="{% if request.path == '/' %}active{% endif %}"><i class="fa fa-home fa-medium"></i>Главная</a></li>
                <li><a href="{% url 'products' %}" class="{% if request.path == '/products/' %}active{% endif %}"><i class="fa fa-shopping-cart fa-medium"></i>Продукция</a></li>
                <li><a href="{% url 'services' %}" class="{% if request.path == '/services/' %}active{% endif %}"><i class="fa fa-send-o fa-medium"></i>Услуги</a></li>
                <li><a href="{% url 'testimonials' %}" class="{% if request.path == '/testimonials/' %}active{% endif %}"><i class="fa fa-comments-o fa-medium"></i>Отзывы</a></li>
                <li><a href="{% url 'about' %}" class="{% if request.path == '/about/' %}active{% endif %}"><i class="fa fa-gears fa-medium"></i>О нас</a></li>
                <li><a href="{% url 'contact' %}" class="{% if request.path == '/contact/' %}active{% endif %}"><i class="fa fa-envelope-o fa-medium"></i>Контакты</a></li>
            </ul>
        </div>

При генерации страницы проверяю совпадает ли адрес с url в ссылке и если совпадает добавляю класс "active"

Все! )))

Есть еще один вариант.

Комментарии могут оставлять только зарегистрированые пользователи!