Активный пункт меню через PHP
X
Заказать сайт
Заказать сайт

Активный пункт меню через PHP

3123213213

Приятно смотреть на сайты, в которых активная страница выделяется среди остальных в пункте меню или навигации. Реализовать данную возможность можно используя механизм jQuery или PHP скрипта.

Сделать меню с выделением активного пункта не так сложно, как кажется. Даже на jQuery это сделать немного сложнее, об этом вы можете прочитать в этой статье.

Предположим, что у нас есть такое меню:

<ul>
<li><a href="/">Главная</a></li>
<li><a href="/o-nas">О нас</a></li>
<li><a href="/contacti">Контакты</a></li>
</ul>

Чтобы добавить в него код, который бы сам определял активный пункт, добавим в пример php код:

<?php $url = $_SERVER["REQUEST_URI"];?>
<ul>
<li><a href="/" <?php if ($url == "/") {echo 'class="active"';}?>>Главная</a></li>
<li><a href="/o-nas" <?php if ($url == "/o-nas") {echo 'class="active"';}?>>О нас</a></li>
<li><a href="/contacti" <?php if ($url == "/contacti") {echo 'class="active"';}?>>Контакты</a></li>
</ul>

Разберем работу скрипта

Первая строка запоминает в переменную $url текущую ссылку открытой страницы сайта, причем без домена. Например, если ссылка страницы будет домен.ру/imgs/les/, то в $url будет /imgs/les/. Далее в каждом li a находится условие на проверку текущей страницы. Если где-то условие совпадает, то к ссылке добавляется класс active, на который можно сделать выделение через css стили.

Активный пункт можно назначить и на li тег, тогда условия надо ставить так: <li <?php if ($url == "/") {echo 'class="active"';}?>><a href="/">Главная</a></li>.

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

 

| | Активный пункт меню через PHP | Приятно смотреть на сайты, в которых активная страница выделяется среди остальных в пункте меню или навигации. Реализовать данную возможность можно ис | https://blogprogram.ru/wp-content/uploads/2016/09/3123213213-131x131.jpg