Активное выделение ссылки в меню
Не большая заметка по теме навигации на сайте. Столкнулся с такой проблемой, что при переходе в другой раздел сайта ссылка не активна и не видно, где ты сейчас находишься.
Показываю на своем примере с чем пришлось столкнуться и как я решил эту проблему.
Делал не большой сайт и там главное меню расположено слева от контента при переходе по ссылки она становиться активной. Но по умолчанию активна только главная страница.
Вот 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"
Все! )))
Есть еще один вариант.
Ваши комментарии
Комментарии могут оставлять только зарегистрированые пользователи!