Код (Text): <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2" class="menu-active"><a href="/">Главная</a></li> <li id="menu-item-18" class="menu-passive"><a href="/about/">О компании</a></li> <li id="menu-item-22" class="menu-passive"><a href="/services/">Услуги</a></li> <li id="menu-item-23" class="menu-passive"><a href="/prices/">Цены</a></li> <li id="menu-item-20" class="menu-passive"><a href="/portfolio/">Портфолио</a></li> <li id="menu-item-21" class="menu-passive"><a href="/projects/">Проекты</a></li> <li id="menu-item-19" class="menu-passive"><a href="/contacts/">Контакты</a></li> </ul> </div> Собственно, сверху мы видим код. Этот файл (menu.php) я заинклудил на всех страницах сайта. Как сделать изменение подсвечиваемого элемента в зависимости от нахождения на сайте? На / подсвечивается Главная На about подсвечивается О компании и тд
1) php тут не при чем. Это клиентопроблема. 2) В зависимости от того, какой пункт меню ативен, дописывайте к нему класс, типа "active", в котором определяйте новые стили, подсветку там, шрифт и тд.
@Fell-x27, ты не понял, перечитай еще раз. Подсветка уже сделана, я хочу, чтобы она была динамической и менялась в зависимости от нахождения на сайте
PHP: if ($_SERVER["REQUEST_URI"] == "/about") { $class = "class='active'"; } <li <?=$class?>></li> а класс active уже украшаем как надо.
ты должен на PHP определять какой пункт выбран и к нему добавлять нужный класс. обычно это можно добиться тем когда роутер и рендеринг меню работают вместе --- Добавлено --- Вот пример из Yii2 framework http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html
@SamyRed, точно! Это правильное решение! НО! Я не знаю, как засунуть его в моё меню, если можно, то я бы попросил вас показать на моём коде, что и куда... Буду очень признателен
PHP: <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2" class="<?php if ($_SERVER["REQUEST_URI"] == "/") echo "menu-active"; else echo "menu-passive"?>"><a href="/">Главная</a></li> <li id="menu-item-18" class="<?php if ($_SERVER["REQUEST_URI"] == "/about/") echo "menu-active"; else echo "menu-passive"?>"><a href="/about/">О компании</a></li> <li id="menu-item-22" class="<?php if ($_SERVER["REQUEST_URI"] == "/services/") echo "menu-active"; else echo "menu-passive"?>"><a href="/services/">Услуги</a></li> <li id="menu-item-23" class="<?php if ($_SERVER["REQUEST_URI"] == "/prices/") echo "menu-active"; else echo "menu-passive"?>"><a href="/prices/">Цены</a></li> <li id="menu-item-20" class="<?php if ($_SERVER["REQUEST_URI"] == "/portfolio/") echo "menu-active"; else echo "menu-passive"?>"><a href="/portfolio/">Портфолио</a></li> <li id="menu-item-21" class="<?php if ($_SERVER["REQUEST_URI"] == "/projects/") echo "menu-active"; else echo "menu-passive"?>"><a href="/projects/">Проекты</a></li> <li id="menu-item-19" class="<?php if ($_SERVER["REQUEST_URI"] == "/contacts") echo "menu-active"; else echo "menu-passive"?>"><a href="/contacts/">Контакты</a></li> </ul> </div> Это в целом немного ущербно, но как-то так.
"menu-passive" тут торчит как бревно в глазу. достаточно иметь только active.ну да ладно. если написать функцию-помошник, то будет коротко и наглядно. PHP: <?php function active($uri) { return $_SERVER["REQUEST_URI"] == $uri ? "menu-active" : "menu-passive"; } ... ... ... ?> <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2" class="<?= active("/") ?>"><a href="/">Главная</a></li> <li id="menu-item-18" class="<?= active("/about/") ?>"><a href="/about/">О компании</a></li> <li id="menu-item-22" class="<?= active("/services/") ?>"><a href="/services/">Услуги</a></li> ... --- Добавлено --- P.S. @cryptory ты похоже очень неленивый в каждой строке писать id и класс для неактивного состояния… это, блин, не всякий вытерпит.
Всё супер работает. НО! есть раздел УСЛУГИ, а в нем ещё подразделы 1.мою(путь/services/mou.php), 2.стираю (путь/services/stirau.php), 3 глажу (путь/services/glajy.php) и т.д. как тут быть? Если находится в "глажу", должен подсвечиваться активный раздел УСЛУГИ. помогите!
вместо $x == $y можно strpos($x, $y) === 0 (здесь три символа "=" !!!) --- Добавлено --- https://www.php.net/manual/en/function.strpos
Как вариант, см. выше. Только учтите, что приравнивать к нулю нужно при условии отсутствия вед. слэша в пути (иначе нужно приравнивать к единице, если в пути только один вед. слэш). Также, чтобы не было совсем топорно, ищите образец с трэйлинг слэшем (services/), причем узловой адрес без трэйлинг слэша (/services) под этот образец уже попадать не будет (если нужно, можете добавить к исходному пути трэйлинг слэш перед поиском). Ну и не забываем про др. естественный вариант выполнения этой операции: сначала выделяем первый компонент пути, потом сравниваем с образцом. Например, см. код в конце этой статьи (прежде всего последнюю строку).
@AceKupavna c тебя пиво PHP: <?php $url = 'http://mysite.ru/services/'; $url = parse_url($url); $path = $url['path']; $href = [ '/' => 'Главная', '/about/' => 'О компании', '/services/' => 'Услуги', '/prices/' => 'Цены', '/portfolio/' => 'Портфолио', '/projects/' => 'Проекты', '/contacts/' => 'Контакты', ]; $li = ''; foreach ($href as $key => $value) { $active = ($key === $path) ? 'menu-active' : 'menu-passive'; $li .= "<li class='{$active}'><a href='{$key}'>{$value}</a></li>"; } ?> <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"><?=$li?></ul> </div>
@Artur_hopf, там задача чуток сложнее. См. последние посты. --- Добавлено --- PHP: <ul class="menu"> <?php foreach ($site['menu'] as $id=>$name): ?> <li class="menu-item<?= $pa[0]===$id?' current-menu-item':'' ?>"><a href="/<?= $id ?>"><?= $name ?></a></li> <?php endforeach; ?> </ul> $pa[0] – это первый компонент пути. Т.к. тут нужен только он, то можно обойтись и без массива при его хранении. --- Добавлено --- Результат: http://workshop.pageshop.ru/ (пощелкайте по пунктам меню).
а шо? скрипт покурить ни как? Код (Text): <script type="text/javascript"> jQuery(document).ready(function($) { var url=document.location.href; $.each($("#menu a"),function(){ if(this.href==url){$(this).addClass('activeCSS');}; }); })(jQuery); </script> Код (Text): .activeCSS { Font-weight:bold; } классы (активы, пассивы) в коде снести....
@AceKupavna как то так наверно можно: PHP: <?php $url = 'http://mysite.ru/services/stirau.php'; $http = $_SERVER['SERVER_NAME']; $url = parse_url($url, PHP_URL_PATH); $path = explode("/", $url); $subsection = array_pop($path); $href = [ '' => [ 'name' => 'Главная' ], 'about' => [ 'name' => 'О компании' ], 'services' =>[ 'name' => 'Услуги', 'sub' => [ 'mou.php' => 'Мою', 'stirau.php' => 'Стираю', 'glajy.php' => 'Глажу' ] ], 'prices' => [ 'name' => 'Цены' ], 'portfolio' => [ 'name' => 'Портфолио' ], 'projects' => [ 'name' => 'Проекты' ], 'contacts' => [ 'name' => 'Контакты' ], ]; $li = ''; $section =''; foreach ($href as $key => $value) { $active = ($key === $path[1]) ? 'menu-active' : 'menu-passive'; $li .= "<li class='{$active}'><a href='{$http}/{$key}'>{$value['name']}</a></li>"; if($key === $path[1] && $key === 'services') { foreach($value['sub'] as $k => $item) { $act = ($k === $subsection) ? 'menu-active' : 'menu-passive'; $section .= "<li class='{$act}'><a href='{$http}/{$key}/{$k}'>{$item}</a></li>"; } } } ?> <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"><?=$li?></ul> </div> <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"><?=$section?></ul> </div>