Сделать подсветку активного меню

@Евгений 86 · Регистрация: 21.03.2016

Студворк — интернет-сервис помощи студентам

Добрый день!
У меня выводится меню в цикле на каждую страницу ПУ(админки) и я хочу что бы когда я нахожусь в одном из разделов этого меню у меня оно подсвечивалось как активное. КАК это сделать? подскажите пожалуйста
вот тут я вывожу меню

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="top-menu">
<ul>
 
<?php 
 
$menu = mysql_query("SELECT * FROM menu", $link);
if(mysql_num_rows($menu) > 0)
{
$m = mysql_fetch_array($menu);
    do
     {
        echo '
<li><a class="hover_link"  href="'.$m["menu_link_admin"].'">'.$m["menu_title"].'</a></li>
        ';
    
    }
     while($m = mysql_fetch_array($menu));   
    }
 
 
?>
</ul>
     </div>

@svs171 · 30.10.2016, 12:57

Можно добавлять какой-нибудь класс active, например если

PHP
1
$m["menu_link_admin"]==$_SERVER['PHP_SELF']

@Евгений 86 · 30.10.2016, 13:07 **[ТС]**

не совсем понял и что дальше с этим делать? подскажите

@Fedor92 · 30.10.2016, 13:19

Евгений 86, вариантик на jquery, на случай, если никто больше ничего не предложит :

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Меню</title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <style>
    *{margin:0; padding:0; box-sizing:border-box}
    html, body{width:100%; height:100%; padding:10px}
    nav{width:700px; margin:auto}
    ul#menu{list-style:none}
    #menu>li{width:100px; display:inline-block; margin-left:35px}
    a{display:table-cell; width:100px; height:40px; vertical-align:middle; text-align:center; text-decoration:none; font:italic 14px/1.25 Tahoma; color:#333}
    .active{background:red}
    </style>
</head>
<body>
    <nav>
        <ul id="menu">
            <li><a class="link" href="#1">Описание</a></li>
            <li><a class="link" href="#2">Цены</a></li>
            <li><a class="link" href="#3">Где купить?</a></li>
            <li><a class="link" href="#4">О нас</a></li>
            <li><a class="link" href="#5">Контакты</a></li>
        </ul>
    </nav>
    <script>
        $(document).ready(function() {
                $('li').click(function () {
                    $('li').removeClass('active');
                    $(this).toggleClass('active');
            });
        })
    </script>
</body>
</html>

Можно в принципе на нативном js написать, чтобы не подключать библиотеку... На одном HTML/CSS чисто теоретически можно было бы реализовать с помощью псевдокласса :checked, но адекватнее на мой взгляд всё же на js...

@svs171 · 30.10.2016, 14:11

Евгений 86, вопрос как организована админка. Если такое сравнение прокатит, то просто меняете строчку

PHP
1
 echo '<li><a class="hover_link'.($m["menu_link_admin"]==$_SERVER['PHP_SELF']?' active':'').'"  href="'.$m["menu_link_admin"].'">'.$m["menu_title"].'</a></li>';

и в css прописываете нужную подсветку для класса active

Добавлено через 2 минуты
Fedor92, Ваш вариант не сработает, если по клику идет перерисовка страницы, т.е в href прописана отдельная страница для каждого пункта меню.

@Fedor92 · 30.10.2016, 14:30

Сообщение от svs171

Ваш вариант не сработает, если по клику идет перерисовка страницы, т.е в href прописана отдельная страница для каждого пункта меню.

А зачем в админке делать несколько страниц?

Всё делается элементарно табами... К тому же даже, если и так, то можно дописать ajax...

@svs171 · 30.10.2016, 14:37

Fedor92, почему "делать", может уже сделано. Админок есть много всяких разных. Какую использует ТС - не известно.

@Fedor92 · 30.10.2016, 14:40

Сообщение от svs171

Fedor92, почему "делать", может уже сделано. Админок есть много всяких разных. Какую использует ТС - не известно.

Об этом и речь... Много Вы видели админок, где при переходе к пунктам меню обновляется страница? Я например уже таких и не припомню, поэтому и предложил пример на jquery, могу ajax прицепить, если Вы настолько скептик...

@svs171 · 30.10.2016, 14:50

Сообщение от Fedor92

Много Вы видели админок, где при переходе к пунктам меню обновляется страница?

За последнюю четверть века - много, с несколькими и сейчас работаю, и скорость работы некоторых из них значительно выше тех, где страницы не обновляются.
Не суть, это вопрос вкуса и не имеет отношения к теме вопроса.

@Fedor92 · 30.10.2016, 14:58

Не по теме:

Сообщение от svs171

За последнюю четверть века - много, с несколькими и сейчас работаю, и скорость работы некоторых из них значительно выше тех, где страницы не обновляются.

Так и не понял, что подразумевалось под скоростью работы, ну да Бог с ним... Это действительно к сути вопроса отношения не имеет...

@miketomlin · 30.10.2016, 15:05

Евгений 86, вот гляньте: Выбор активной вкладки

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400
	30.10.2016, 13:07 [ТС]
	не совсем понял и что дальше с этим делать? подскажите 0

@svs171 119 / 116 / 63 Регистрация: 16.09.2016 Сообщений: 354
	30.10.2016, 14:37
	Fedor92, почему "делать", может уже сделано. Админок есть много всяких разных. Какую использует ТС - не известно. 0

@miketomlin 930 / 846 / 190 Регистрация: 28.11.2013 Сообщений: 3,621
	30.10.2016, 15:05
	Евгений 86, вот гляньте: Выбор активной вкладки 0