Як зробити активним пункт меню в DLE
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 15-01-2015, 16:45 1 482 0
Виявляється в DLE дуже просто зробити активним пункт меню на тій сторінці де перебуває користувач.
Отже, замість того щоб вручну привласнювати до певного пункту меню клас active, стандартним методом робиться так:
<li [category=1]class="activlink"[/category]>
- за нас з цим завданням відмінно впорається невеликий код на Jquery, підключений до вашого сайту. Він сам визначить на якій сторінці зараз знаходиться користувач і привласнить клас на льоту.
Для цього нам необхідно в головний файл шаблону (main.tpl в папці / templates /) помістити між <head> </ head> цей код:
<script type="text/jаvascript">
$(document).ready(function(){
var link = window.location.pathname;
$('.navigation li a[href="'+link+'"]').parent().addClass('active');
});
</script>
Де ".navigation" прописаний з класу вашого списку меню, який знаходиться в тілі вашого шаблону:
<ul class ="navigation">
<li><a href="/neews/">Новости</a></li>
<li><a href="/Sobytiia/">События</a></li>
<li><a href="/Proisshestvia/">Происшествия</a></li>
<li><a href="/Fakty/">Факты</a></li>
<li><a href="/Skandaly/">Скандалы</a></li>
</ul>
При необхідності можете замінити це значення, якщо воно у вас позначено якось по іншому, головне щоб воно було однаковим в коді і в вашому списку меню.
Тепер, щоб все це запрацювало і якимось чарівним чином підсвічувало нам активний пункт меню на тій сторінці, де перебуває користувач, додаємо в нашу таблицю стилів CSS цю строку:
.navigation li.active {background:#CCC}
або
.navigation li.active a {color:#b00000;}
Стилі прописуєте на свій розсуд, вище наведений приклад вказаний лише для наочності. Ось власне і все, слідкуйте за оновленнями на моєму блозі.
