Делаю сайт без движка. Изначально было 5 HTML-страниц. И в каждой странице к соответствующему пункту меню задавался класс .current. Но теперь количество страниц увеличилось до 20-30. И я решил создать файл header.php и в каждой странице вызвать этот хедер. И получается теперь что во всех 20-30 страницах активным остается только 1 пункт меню, которому задан класс .current. Можно ли сделать, что бы этот класс задавался автоматически к активному пункту меню? Заранее спасибо!
1 ответ
В PHP есть глобальная переменная $_SERVER['REQUEST_URI'], в котором URI страницы. Можно воспользоваться этим и подключить класс к меню. Рекомендую добавить в массив все пункты меню и отрисовывать через foreach при этом проверяя меню на активность.
$menu = array(
array('url'=>'/main.php','title'=>'Главное'),
array('url'=>'/about.php','title'=>'О сайте'),
array('url'=>'/articles.php','title'=>'Статьи'),
);
foreach($menu as $item)
{
$output .= "<a href='{$item['url']}' {($item['url']==$_SERVER['REQUEST_URI'])?'class=\'active\''}>{$item['title']}</a>";
}
Если хотите сделать через JavaScript, то придётся посложнее, надо будет поискать пункты меню, среди них выбрать того, чей document.location.pathname совпадает с elem.href, где elem пункт меню. И добавить присвоить класс к этому элементу через elem.className += " active"
Если используете jQuery
в своём проекте то будет чуть попроще
$(document).ready(function(){
$('menu a').each(function(){
if ($(this).attr('href')==document.location.pathname) $(this).addClass('active')
}
})
P.S.: Покажите код