За последние 24 часа нас посетили 56556 программистов и 1685 роботов. Сейчас ищут 1267 программистов ...

Подсветка активного пункта меню на PHP

Тема в разделе "Сделайте за меня", создана пользователем cryptory, 22 янв 2017.

  1. cryptory

    cryptory Новичок

    С нами с:
    21 янв 2017
    Сообщения:
    21
    Симпатии:
    0
    Код (Text):
    1. <div class="menu-main-menu-container">
    2. <ul id="menu-main-menu" class="menu">
    3. <li id="menu-item-2" class="menu-active"><a href="/">Главная</a></li>
    4. <li id="menu-item-18" class="menu-passive"><a href="/about/">О компании</a></li>
    5. <li id="menu-item-22" class="menu-passive"><a href="/services/">Услуги</a></li>
    6. <li id="menu-item-23" class="menu-passive"><a href="/prices/">Цены</a></li>
    7. <li id="menu-item-20" class="menu-passive"><a href="/portfolio/">Портфолио</a></li>
    8. <li id="menu-item-21" class="menu-passive"><a href="/projects/">Проекты</a></li>
    9. <li id="menu-item-19" class="menu-passive"><a href="/contacts/">Контакты</a></li>
    10. </ul>
    11. </div>    
    Собственно, сверху мы видим код.
    Этот файл (menu.php) я заинклудил на всех страницах сайта.
    Как сделать изменение подсвечиваемого элемента в зависимости от нахождения на сайте?
    На / подсвечивается Главная
    На about подсвечивается О компании и тд
     
    #1 cryptory, 22 янв 2017
    Последнее редактирование: 22 янв 2017
  2. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    1) php тут не при чем. Это клиентопроблема.
    2) В зависимости от того, какой пункт меню ативен, дописывайте к нему класс, типа "active", в котором определяйте новые стили, подсветку там, шрифт и тд.
     
  3. cryptory

    cryptory Новичок

    С нами с:
    21 янв 2017
    Сообщения:
    21
    Симпатии:
    0
    @Fell-x27, ты не понял, перечитай еще раз.
    Подсветка уже сделана, я хочу, чтобы она была динамической и менялась в зависимости от нахождения на сайте
     
  4. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    PHP:
    1. if ($_SERVER["REQUEST_URI"] == "/about") {
    2. $class = "class='active'";
    3. }
    4. <li <?=$class?>></li>
    а класс active уже украшаем как надо.
     
    #4 SamyRed, 22 янв 2017
    Последнее редактирование модератором: 22 янв 2017
    cryptory нравится это.
  5. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    ты должен на PHP определять какой пункт выбран и к нему добавлять нужный класс.
    обычно это можно добиться тем когда роутер и рендеринг меню работают вместе
    --- Добавлено ---
    Вот пример из Yii2 framework http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html
     
    cryptory нравится это.
  6. cryptory

    cryptory Новичок

    С нами с:
    21 янв 2017
    Сообщения:
    21
    Симпатии:
    0
    @SamyRed, точно! Это правильное решение! НО! Я не знаю, как засунуть его в моё меню, если можно, то я бы попросил вас показать на моём коде, что и куда...
    Буду очень признателен:)
     
  7. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Могу перенести тему в раздел "сделайте за меня"
     
    cryptory нравится это.
  8. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    PHP:
    1. <div class="menu-main-menu-container">
    2.   <ul id="menu-main-menu" class="menu">
    3.       <li id="menu-item-2" class="<?php if ($_SERVER["REQUEST_URI"] == "/") echo "menu-active"; else echo "menu-passive"?>"><a href="/">Главная</a></li>
    4.       <li id="menu-item-18" class="<?php if ($_SERVER["REQUEST_URI"] == "/about/") echo "menu-active"; else echo "menu-passive"?>"><a href="/about/">О компании</a></li>
    5.       <li  id="menu-item-22" class="<?php if ($_SERVER["REQUEST_URI"] == "/services/") echo "menu-active"; else echo "menu-passive"?>"><a href="/services/">Услуги</a></li>
    6.       <li id="menu-item-23" class="<?php if ($_SERVER["REQUEST_URI"] == "/prices/") echo "menu-active"; else echo "menu-passive"?>"><a href="/prices/">Цены</a></li>
    7.       <li id="menu-item-20" class="<?php if ($_SERVER["REQUEST_URI"] == "/portfolio/") echo "menu-active"; else echo "menu-passive"?>"><a href="/portfolio/">Портфолио</a></li>
    8.       <li id="menu-item-21" class="<?php if ($_SERVER["REQUEST_URI"] == "/projects/") echo "menu-active"; else echo "menu-passive"?>"><a href="/projects/">Проекты</a></li>
    9.       <li id="menu-item-19" class="<?php if ($_SERVER["REQUEST_URI"] == "/contacts") echo "menu-active"; else echo "menu-passive"?>"><a href="/contacts/">Контакты</a></li>
    10.   </ul>
    11. </div>
    Это в целом немного ущербно, но как-то так.
     
    cryptory нравится это.
  9. cryptory

    cryptory Новичок

    С нами с:
    21 янв 2017
    Сообщения:
    21
    Симпатии:
    0
  10. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Что именно не работает? Я же не ванга?
     
  11. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    "menu-passive" тут торчит как бревно в глазу. достаточно иметь только active.ну да ладно.

    если написать функцию-помошник, то будет коротко и наглядно.
    PHP:
    1. <?php
    2. function active($uri)
    3. {
    4.   return $_SERVER["REQUEST_URI"] == $uri ? "menu-active" : "menu-passive";
    5. }
    6. ...
    7. ...
    8. ...
    9. ?>
    10. <div class="menu-main-menu-container">
    11.   <ul id="menu-main-menu" class="menu">
    12.       <li id="menu-item-2" class="<?= active("/") ?>"><a href="/">Главная</a></li>
    13.       <li id="menu-item-18" class="<?= active("/about/") ?>"><a href="/about/">О компании</a></li>
    14.       <li  id="menu-item-22" class="<?= active("/services/") ?>"><a href="/services/">Услуги</a></li>
    15. ...
    --- Добавлено ---
    P.S. @cryptory ты похоже очень неленивый :) в каждой строке писать id и класс для неактивного состояния… это, блин, не всякий вытерпит.
     
  12. AceKupavna

    AceKupavna Новичок

    С нами с:
    29 авг 2019
    Сообщения:
    5
    Симпатии:
    0
    Всё супер работает. НО!
    есть раздел УСЛУГИ, а в нем ещё подразделы
    1.мою(путь/services/mou.php),
    2.стираю (путь/services/stirau.php),
    3 глажу (путь/services/glajy.php)
    и т.д.

    как тут быть? Если находится в "глажу", должен подсвечиваться активный раздел УСЛУГИ. помогите!
     
  13. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.859
    Симпатии:
    656
    @AceKupavna, учитывайте не весь урл, а только первый компонент пути ;)
     
    #13 miketomlin, 29 авг 2019
    Последнее редактирование: 29 авг 2019
    artoodetoo нравится это.
  14. AceKupavna

    AceKupavna Новичок

    С нами с:
    29 авг 2019
    Сообщения:
    5
    Симпатии:
    0
    а на примере можете написать. для меня и таких же как я тупеньких.
     
  15. AceKupavna

    AceKupavna Новичок

    С нами с:
    29 авг 2019
    Сообщения:
    5
    Симпатии:
    0
    подскажите плиз!
     
  16. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
  17. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.859
    Симпатии:
    656
    Как вариант, см. выше. Только учтите, что приравнивать к нулю нужно при условии отсутствия вед. слэша в пути (иначе нужно приравнивать к единице, если в пути только один вед. слэш). Также, чтобы не было совсем топорно, ищите образец с трэйлинг слэшем (services/), причем узловой адрес без трэйлинг слэша (/services) под этот образец уже попадать не будет (если нужно, можете добавить к исходному пути трэйлинг слэш перед поиском).

    Ну и не забываем про др. естественный вариант выполнения этой операции: сначала выделяем первый компонент пути, потом сравниваем с образцом. Например, см. код в конце этой статьи (прежде всего последнюю строку).
     
  18. AceKupavna

    AceKupavna Новичок

    С нами с:
    29 авг 2019
    Сообщения:
    5
    Симпатии:
    0
    не чего не понял!
    а пример можно
     
  19. Artur_hopf

    Artur_hopf Старожил

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @AceKupavna c тебя пиво
    PHP:
    1. <?php
    2. $url = 'http://mysite.ru/services/';
    3.  
    4. $url = parse_url($url);
    5.  
    6. $path = $url['path'];
    7.  
    8. $href = [
    9.     '/' => 'Главная',
    10.     '/about/' => 'О компании',
    11.     '/services/' => 'Услуги',
    12.     '/prices/' => 'Цены',
    13.     '/portfolio/' => 'Портфолио',
    14.     '/projects/' => 'Проекты',
    15.     '/contacts/' => 'Контакты',
    16. ];
    17.  
    18. $li = '';
    19.  
    20. foreach ($href as $key => $value)
    21. {
    22.     $active = ($key === $path) ? 'menu-active' : 'menu-passive';
    23.     $li .= "<li class='{$active}'><a href='{$key}'>{$value}</a></li>";
    24. }
    25. ?>
    26.  
    27. <div class="menu-main-menu-container">
    28.     <ul id="menu-main-menu" class="menu"><?=$li?></ul>
    29. </div>    
     
  20. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.859
    Симпатии:
    656
    @Artur_hopf, там задача чуток сложнее. См. последние посты.
    --- Добавлено ---
    PHP:
    1.                         <ul class="menu">
    2. <?php foreach ($site['menu'] as $id=>$name): ?>
    3.                             <li class="menu-item<?= $pa[0]===$id?' current-menu-item':'' ?>"><a href="/<?= $id ?>"><?= $name ?></a></li>
    4. <?php endforeach; ?>
    5.                         </ul>
    $pa[0] – это первый компонент пути. Т.к. тут нужен только он, то можно обойтись и без массива при его хранении.
    --- Добавлено ---
    Результат: http://workshop.pageshop.ru/ (пощелкайте по пунктам меню).
     
  21. paschaopencart

    paschaopencart Активный пользователь

    С нами с:
    18 май 2018
    Сообщения:
    118
    Симпатии:
    16
    Адрес:
    Урал
    а шо? скрипт покурить ни как?

    Код (Text):
    1. <script type="text/javascript">
    2. jQuery(document).ready(function($) {
    3. var url=document.location.href;
    4. $.each($("#menu a"),function(){
    5. if(this.href==url){$(this).addClass('activeCSS');};
    6. });
    7. })(jQuery);
    8. </script>
    Код (Text):
    1. .activeCSS {
    2. Font-weight:bold;
    3. }
    классы (активы, пассивы) в коде снести....
     
  22. AceKupavna

    AceKupavna Новичок

    С нами с:
    29 авг 2019
    Сообщения:
    5
    Симпатии:
    0
    нудно что бы и под меню то же было акивным
     
  23. Artur_hopf

    Artur_hopf Старожил

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @AceKupavna как то так наверно можно:

    PHP:
    1. <?php
    2. $url = 'http://mysite.ru/services/stirau.php';
    3. $http = $_SERVER['SERVER_NAME'];
    4.  
    5. $url = parse_url($url, PHP_URL_PATH);
    6. $path = explode("/", $url);
    7.  
    8. $subsection = array_pop($path);
    9.  
    10. $href = [
    11.     '' => [
    12.         'name' => 'Главная'
    13.     ],
    14.     'about' => [
    15.         'name' => 'О компании'
    16.     ],
    17.     'services' =>[
    18.         'name' => 'Услуги',
    19.         'sub' => [
    20.             'mou.php' => 'Мою',
    21.             'stirau.php' => 'Стираю',
    22.             'glajy.php' => 'Глажу'
    23.         ]
    24.     ],
    25.     'prices' => [
    26.         'name' => 'Цены'
    27.     ],
    28.     'portfolio' => [
    29.         'name' => 'Портфолио'
    30.     ],
    31.     'projects' => [
    32.         'name' => 'Проекты'
    33.     ],
    34.     'contacts' => [
    35.         'name' => 'Контакты'
    36.     ],
    37. ];
    38.  
    39. $li = '';
    40. $section ='';
    41. foreach ($href as $key => $value)
    42. {
    43.     $active = ($key === $path[1]) ? 'menu-active' : 'menu-passive';
    44.     $li .= "<li class='{$active}'><a href='{$http}/{$key}'>{$value['name']}</a></li>";
    45.    
    46.     if($key === $path[1] && $key === 'services')
    47.     {
    48.         foreach($value['sub'] as $k => $item)
    49.         {
    50.             $act = ($k === $subsection) ? 'menu-active' : 'menu-passive';
    51.             $section .= "<li class='{$act}'><a href='{$http}/{$key}/{$k}'>{$item}</a></li>";
    52.         }
    53.     }
    54.  
    55. }
    56. ?>
    57.  
    58. <div class="menu-main-menu-container">
    59.     <ul id="menu-main-menu" class="menu"><?=$li?></ul>
    60. </div>
    61.  
    62. <div class="menu-main-menu-container">
    63.     <ul id="menu-main-menu" class="menu"><?=$section?></ul>
    64. </div>    
     
    Valick нравится это.