Если вам захочется оформить навигационное меню таким образом чтобы при открытии какой то конкретной странички меню этой странички как то подсветилось (выделилось), то тут понятное дело решение может быть только с помощью стилей – CSS. Но как же таблица стилей поймет, какая страничка у нас сейчас открыта? Давайте разберемся. И так, если мне не изменяет память, то решить этот вопрос можно двумя методами. О первом я прочел у гуру верстки Эрика Мэера. В его способе нет надобности в программировании. Там суть заключается в том, что каждой страничке присваивается свой id для тега body, например <body id=’news’> или <body id=’articles’> и так далее. Подробнее из книжки гляну.
Теперь глянем как добавить класс active в меню средствами PHP. Этот вариант я считаю самым удобным и простым. И так, наверняка меню у вас в ваши странички подключается includ-ом во все ваши странички. Тогда остается перед include завести какую-нибудь переменную – метку, которая и будет тем флажком указывающем на определенную страничку:
<html>
<head></head>
<body>
<?php $page = 'news'; include('navigation.php'); ?>
</body>
</html>
Тогда подключаемый файл с меню – menu.php будет выглядеть следующим образом:
<div id="nav">
<ul>
<li>
<a <?php echo ($page == 'news') ? "class='active'" : ""; ?>
href="index1.php">Новости</a>
</li>
<li>
<a <?php echo ($page == 'articles') ? "class='active'" : ""; ?>
href="index2.php">Статьи</a>
</li>
<li>
<a <?php echo ($page == 'about') ? "class='active'" : ""; ?>
href="index3.php">О нас</a>
</li>
</ul>
</div>
Т.е. как мы видим, тут идет проверка в сокращенной записи условия соответствия. Если есть совпадение, то к ссылке добавляется class=’active’, иначе ничего не приписывается. Вроде все просто и логично.
Еще в процессе написания заметки нашел альтернативный метод на php:
<?php foreach($result as $item): ?>
<a href="/link.php?menu=<?php echo $item['id']; ?>"
<?php if($_GET['menu'] == $item['id']) { echo "class='active'";} ?>>
<?php echo $item['name']; ?></a>
<?php endforeach; ?>
Здесь, как я понимаю меню формируется динамически. В GET параметре ['menu'] мы передаем id меню, и в цикле проверяем совпадение с id лежащем в массиве $result. Т.е. в ассоциативном массиве $result лежат названия и ссылки нашего меню, например $result[1] = (id=>1, name=>’About’), $result[2] = (id=>2, name=>’News’) и так далее. Если id совпали то при формировании меню, для данного id присвоится класс active.
И напоследок вариант на jQuery:
<script type="text/javascript">
$('document').ready(function() {
$('.menu a').each(function() {
if ('http://site.ru'+$(this).attr('href') == window.location.href)
{
$(this).addClass('active');
}
});
});
</script>
Здесь все просто. Пробегаемся по ссылкам меню, и читаем их атрибут href, который затем сравнивается с частью URL. Например смотрим что ссылка в меню <a href=”/about”>About</a>, берем /about, добавляем его к конец URL site.ru/about и проверяем с помощью window.location.href есть ли совпадение. Если есть то добавляется класс active. Вообщем тоже вариант довольно простой.
Таким образом, перед вами несколько вариантов ответов на вопрос как добавить класс active в html меню на php и также на jQuery. Думаю наверняка есть еще варианты, и я буду признателен если кто-то поделится своим вариантом.
Покупай дешевые, со скидкой 5 евро! видеокарты, компьютерное и другое оборудование