Класс Link
Давайте сделаем класс, который будет создавать HTML ссылку. Назовем его Link . Вот так мы будем пользоваться нашим классом:
Сделаем так, чтобы даже если атрибут href не задан, то по умолчанию он становился пустыми кавычками:
Самостоятельно реализуйте описанный класс Link .
С помощью этого класса создайте меню из 5 ссылок. Пусть первая ссылка ведет на страницу /1.php , вторая — на страницу /2.php и так далее.
Разместите созданную менюшку в отдельном файле, например, в menu.php .
Создайте страницы, на которые ведут ссылки вашей менюшки. Добавьте в ним какой-нибудь текст.
Подключите инклудом к тексту каждой страницы вашу менюшку из файла. Убедитесь, что ссылки из этой менюшки будут работать корректно.
Активация ссылок
После выполнения задач у вас должна получится менюшка. Давайте сделаем так, чтобы в этой менюшке выделялась каким-то образом та ссылка, на странице которой мы находимся.
Такая ссылка обычно называется и ее выделение происходит путем добавления ей CSS класса active (общепринятое название).
Добавленный к ссылке класс active каким-то образом выделяет ее — подчеркивает, красит в красный цвет и тому подобное: все это регулируется CSS стилями для этого класса.
Итак, давайте сделаем так, чтобы ссылки автоматически активировались (добавляли себе CSS класс active ), если их href совпадает с урлом сайта.
URL сайта можно достать вот так:
Чтобы прочитать href нашей ссылки, используем геттер getAttr , унаследованный от родительского класса Tag . Вот так:
Чтобы добавить нашей ссылке CSS класс active , используем метод addClass , также унаследованный от родителя. Вот так:
Соберем все вместе и напишем вспомогательный метод activateSelf , который будет проверять, совпадает ли href ссылки и URI , и активировать ее, если это так:
Осталось придумать в каком месте вызывать созданный нами метод. В конструкторе класса Link этого делать нельзя, так как в момент вызова конструктора href ссылки еще не задан (конструктор же вызывается в самом начале, а потом методы цепочки, в том числе setAttr , который и задает href ссылки).
После таких рассуждений становится очевидным, что метод activateSelf следует вызвать в момент вывода ссылки на экран, то есть в методе show , с помощью которого скорее всего и будет формироваться ссылка.
Однако, представляется возможным то, что при использовании нашего класса кто-то будет применять метод open и метод close отдельно.
Хотя описанное выше и маловероятно, тем не менее вызовем метод activateSelf в методе open , переопределив тем самым метод родителя:
setAttr(‘href’, »); parent::__construct(‘a’); > // Переопределяем метод родителя: public function open() < $this->activateSelf(); // вызываем активацию return parent::open(); // вызываем метод родителя > private function activateSelf() < if ($this->getAttr(‘href’) === $_SERVER[‘REQUEST_URI’]) < $this->addClass(‘active’); > > > ?>
Так как метод show использует внутри себя метод open , то изменения для метода show произойдут автоматически. Можем теперь проверить работу нашего класса:
Итак, теперь ссылки активируют сами себя. Это реально круто! При этом нам понадобилось совсем мало кода, чтобы реализовать такое поведение. Все потому, что у нас есть базовый класс Tag , который прячет внутри себя много универсального кода для манипуляций с тегами.
Реализуя новые классы на основе класса Tag мы не держим в голове детали реализации этого класса Tag . И вообще не видим код этого класса — он где-то в другом файле (если, конечно же, вы его туда вынесли) и не мешает нам работать. Мы просто знаем, какие методы предоставляет этот класс своим потомкам — и пользуемся ими.
Поэтому классы-потомки и получаются такими маленькими и изящными.
На самом деле наш код класса Link еще более крут, чем кажется. Дело в том, что наши ссылки могут иметь и другие — постоянные — классы. При этом наша активация никак не будет мешать этим классам — они будут оставаться, просто к ним будет добавляться еще и класс active .
Все потому, что так работает метод addClass — он добавляет новый класс к уже существующим классам.
Добавьте в ваш класс Link активацию ссылок.
Проверьте работу активации ссылок на менюшке, которую вы создали в предыдущих задачах. Характерно, что правки в саму менюшку вносить не надо — создание ссылок никак не поменялось, просто ссылки теперь активируют сами себя. Попереходите по ссылкам меню и убедитесь в том, что соответствующие ссылки активируются.
Не очень хорошо то, что название класса active жестко зашито в коде (вдруг мы захотим поменять его на другое). Вынесите его в константу класса (константу используем для того, чтобы в процессе работы скрипта случайно не изменить наш CSS класс).
Как добавить класс active в html меню на php
Если вам захочется оформить навигационное меню таким образом чтобы при открытии какой то конкретной странички меню этой странички как то подсветилось (выделилось), то тут понятное дело решение может быть только с помощью стилей – CSS. Но как же таблица стилей поймет, какая страничка у нас сейчас открыта? Давайте разберемся. И так, если мне не изменяет память, то решить этот вопрос можно двумя методами. О первом я прочел у гуру верстки Эрика Мэера. В его способе нет надобности в программировании. Там суть заключается в том, что каждой страничке присваивается свой id для тега body, например
Теперь глянем как добавить класс active в меню средствами PHP. Этот вариант я считаю самым удобным и простым. И так, наверняка меню у вас в ваши странички подключается includ-ом во все ваши странички. Тогда остается перед include завести какую-нибудь переменную – метку, которая и будет тем флажком указывающем на определенную страничку:
Тогда подключаемый файл с меню – menu.php будет выглядеть следующим образом:
Т.е. как мы видим, тут идет проверка в сокращенной записи условия соответствия. Если есть совпадение, то к ссылке добавляется иначе ничего не приписывается. Вроде все просто и логично.
Еще в процессе написания заметки нашел альтернативный метод на php:
Здесь, как я понимаю меню формируется динамически. В GET параметре [‘menu’] мы передаем id меню, и в цикле проверяем совпадение с id лежащем в массиве $result. Т.е. в ассоциативном массиве $result лежат названия и ссылки нашего меню, например $result[1] = (id=>1, name=>’About’), $result[2] = (id=>2, name=>’News’) и так далее. Если id совпали то при формировании меню, для данного id присвоится класс active.
И напоследок вариант на jQuery:
Здесь все просто. Пробегаемся по ссылкам меню, и читаем их атрибут href, который затем сравнивается с частью URL. Например смотрим что ссылка в меню About, берем /about, добавляем его к конец URL site.ru/about и проверяем с помощью window.location.href есть ли совпадение. Если есть то добавляется класс active. Вообщем тоже вариант довольно простой.
Таким образом, перед вами несколько вариантов ответов на вопрос как добавить класс active в html меню на php и также на jQuery. Думаю наверняка есть еще варианты, и я буду признателен если кто-то поделится своим вариантом.
Класс active в меню на php, присваивание класса при клике
Занимаясь натягиванием шаблона на сайт появилась у меня задача , чтобы при клике на меню добавлялся к нему класс ACTIVE. Но вот не задача в html версии все работало, а в на сайте php нет из-за того что страница перезагружалась. Погуглив это дело я пришел к выводу что решении не так уж и много. И так всего варианта 3.
Вариант 1. Скрипт на php И так у каждого раздела есть свое меню. Допустим у нас будет 3 ссылки — Главная Новости и о Сайте у которых названия / или index , news, about. Тогда наше подключенное меню будет выглядеть следующим образом
Тут ничего сложного если в параметре глобального массива $_GET[‘page’] будет содержаться какое либо из параметров то добавляется класс active. Вариант 2. Массив и Цикл Следующий вариант похожий на первый только с массивом.
Массив $result в котором забиты название меню и их id. Для каждой ссылки создается ссылка с id меню, далее проверяется совпадает содержание глобального массива $_GET[‘menu’] и id какой либо ссылки. Если параметры совпали то добавляется класс active. Единственное НО в этом скрипте что если вы тока зашли на сайте и глобального массива еще не существует то класс active не добавится к ссылке Главная. Но это решается путем добавления доп условия при котором если массив не существует то добавлять класс к ссылки с (Условный Id ссылки ГЛАВНАЯ, у вас она может быть любая другая, но как правило ссылки Главная первая в списке и нулевая по индексу) Вариант 3. JavaSctipt (Jquery библиотека) В этом варианте JS проверяет параметр href у вашего меню и адресом вашего сайта и сравнивает его с текущем адресом открытой страницы. Если параметры совпадают то добавляется класс ACTIVE к текущей ссылке.
Пример у вас ссылка вида НОВОСТИ. Скрипт проверяет href параметр добавляя адрес получается site.ru/news и сравнивает адрес в браузере если все ок то добавляет. Опять же таки скрипт не универсален т.к. при каждой смене доменного имени придется лезть и менять адрес сайта. Не каждый этим будет заниматься. До опять если ссылка не имеет не какого адреса кроме домена не будет подствечиваться Главная. я скрипт немного переделал в JS я не силен поэтому сделал пару if
$('document').ready(function() < $('.buttons li a').each(function() < if (location.protocol+"//"+location.hostname+'/'+$(this).attr('href') == window.location.href) < $(this).addClass('active'); >if (location.protocol+"//"+location.hostname+$(this).attr('href') == window.location.href) < $(this).addClass('active'); >>); >); В этом же скрипте уже ничего менять не надо ссылки универсальны под ссылки из примера. Единственное что параметр href ссылки на главную будет ‘/'(слешем).
Последний вариант который пришел мне во время написания этой статьи это сделать ваш сайт при помощи JQuery. Загрузку данных без перезагрузки страниц.
How to Dynamic Navigation with Active Class in PHP?
In this post, we will learn how to dynamic navigation with active class in PHP. I explained simply how to add a dynamic active class on a selected page in PHP. Here you will learn how to implement PHP dynamic navigation with an active class example. This tutorial will give you a simple example of how to add an active class dynamically in PHP.
I will give you a simple example of how to dynamically add active classes to nav with PHP.
So let’s see bellow example:
body <
font-family: ‘Heebo’, sans-serif;
>
.solo-main <
background-color: #222222;
>
.solo-title <
font-size: 29px;
>
.solo-nav ul li a <
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
>
.solo-nav ul li a.active <
background-color: #ff9800;
color: white;
>
img <
background-color: white;
height: 45px;
>
» href=»home.php»>HOME
» href=»blog.php»>BLOG
» href=»contact-us.php»>CONTACT US
body <
font-family: ‘Heebo’, sans-serif;
>
.solo-main <
background-color: #222222;
>
.solo-title <
font-size: 29px;
>
.solo-nav ul li a <
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
>
.solo-nav ul li a.active <
background-color: #ff9800;
color: white;
>
img <
background-color: white;
height: 45px;
>
» href=»home.php»>HOME
» href=»blog.php»>BLOG
» href=»contact-us.php»>CONTACT US
contact-us.php
body <
font-family: ‘Heebo’, sans-serif;
>
.solo-main <
background-color: #222222;
>
.solo-title <
font-size: 29px;
>
.solo-nav ul li a <
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
>
.solo-nav ul li a.active <
background-color: #ff9800;
color: white;
>
img <
background-color: white;
height: 45px;
>
» href=»home.php»>HOME
» href=»blog.php»>BLOG
» href=»contact-us.php»>CONTACT US
✌️ Like this article? Follow me on Twitter and Facebook. You can also subscribe to RSS Feed.