С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.82/22: Рейтинг темы: голосов - 22, средняя оценка - 4.82
576 / 514 / 253
Регистрация: 26.09.2010
Сообщений: 2,603
1

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

10.03.2015, 12:03. Показов 4385. Ответов 6
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Доброго времени суток!
Народ помогите сделать подсветку активного пункта меню, пробовал через focus и activ но нечего не происходит вот моё меню
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11

<ul id='left_menu_personas_dati'>
    <li id='left_menu_persona'><a href='izvade_persona_pamatdati.php?personas_id_post=".$row['personas_id']."'>Persona</a></li>
    <li id='left_menu_aizturesana'><a href='izvade_persona_aizturesana.php?personas_id_post=".$row['personas_id']."'>Aizturēšana</a></li>
    <li id='left_menu_ievietosana'><a href='izvade_persona_ievietosana.php?personas_id_post=".$row['personas_id']."'>Ievietošana</a></li>
    <li id='left_menu_konvojesana'><a href='izvade_personas_konvojesana.php?personas_id_post=".$row['personas_id']."'>Konvojēšana</a></li>
    <li id='left_menu_atbrivosana'><a href='izvade_persona_atbrivosana.php?personas_id_post=".$row['personas_id']."'>Atbrīvošana</a></li>
    <li id='left_menu_dokumenti'><a href='izvade_persona_dokumenti.php?personas_id_post=".$row['personas_id']."'>Dokumenti</a></li>
    <li id='left_menu_berni'><a href='izvade_persona_berni.php?personas_id_post=".$row['personas_id']."'>Bērni</a></li>
    <li id='left_menu_mucenieki'><a href='izvade_persona_mucenieki.php?personas_id_post=".$row['personas_id']."'>Mucenieki</a></li>
    <li id='left_menu_foto'><a href='izvade_persona_foto.php?personas_id_post=".$row['personas_id']."'>Fotogrāfija</a></li>
</ul>
а вот стили
CSS
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
37

#left_menu_personas_dati{list-style-type: none; padding:5px; margin: auto;}
 
#left_menu_persona li{float:none; font:bold 13px Arial;}
#left_menu_persona a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/persona_off.png) no-repeat; text-decoration:none;}
#left_menu_persona a:hover{color:#fff; background: url(../images/persona_on.png) no-repeat;}
 
#left_menu_aizturesana li{float:none; font:bold 13px Arial;}
#left_menu_aizturesana a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/aizturesana_off.png) no-repeat; text-decoration:none;}
#left_menu_aizturesana a:hover{color:#fff; background: url(../images/aizturesana_on.png) no-repeat;}
 
#left_menu_ievietosana li{float:none; font:bold 13px Arial;}
#left_menu_ievietosana a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/ievietosana_off.png) no-repeat; text-decoration:none;}
#left_menu_ievietosana a:hover{color:#fff; background: url(../images/ievietosana_on.png) no-repeat;}
 
#left_menu_konvojesana li{float:none; font:bold 13px Arial;}
#left_menu_konvojesana a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/konvojesana_off.png) no-repeat; text-decoration:none;}
#left_menu_konvojesana a:hover{color:#fff; background: url(../images/konvojesana_on.png) no-repeat;}
 
#left_menu_atbrivosana li{float:none; font:bold 13px Arial;}
#left_menu_atbrivosana a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/atbrivosana_off.png) no-repeat; text-decoration:none;}
#left_menu_atbrivosana a:hover{color:#fff; background: url(../images/atbrivosana_on.png) no-repeat;}
 
#left_menu_dokumenti li{float:none; font:bold 13px Arial;}
#left_menu_dokumenti a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/dokumenti_off.png) no-repeat; text-decoration:none;}
#left_menu_dokumenti a:hover{color:#fff; background: url(../images/dokumenti_on.png) no-repeat;}
 
#left_menu_berni li{float:none; font:bold 13px Arial;}
#left_menu_berni a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/berni_off.png) no-repeat; text-decoration:none;}
#left_menu_berni a:hover{color:#fff; background: url(../images/berni_on.png) no-repeat;}
 
#left_menu_mucenieki li{float:none; font:bold 13px Arial;}
#left_menu_mucenieki a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/mucenieki_off.png) no-repeat; text-decoration:none;}
#left_menu_mucenieki a:hover{color:#fff; background: url(../images/mucenieki_on.png) no-repeat;}
 
#left_menu_foto li{float:none; font:bold 13px Arial;}
#left_menu_foto a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/fotografija_off.png) no-repeat; text-decoration:none;}
#left_menu_foto a:hover{color:#fff; background: url(../images/fotografija_on.png) no-repeat;}
при наведении на пункт меню картинка меняется, но подсветка не остаётся (должно активное остаться такое же как и в hover) не могу попять как это реализовать, если кому нетрудно напишите
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 10.03.2015, 12:03
Ответы с готовыми решениями:

выделение активного пункта меню
Есть данное меню. &lt;div id=&quot;menu&quot;&gt; &lt;ul&gt; &lt;li class=&quot;current&quot;&gt;&lt;a...

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

Выделение активного пункта меню
Вопрос простой. Как мне сделать активный пункт меню? Нужно это для класса top-menu. HTML и CSS...

Рамка для активного пункта меню
&lt;li class =&quot;lis1&quot;&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class =&quot;lis1&quot;&gt;&lt;a...

6
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
10.03.2015, 16:20 2
Нужно в css добавить класс актив для каждого элемента, и в коде вывода меню, нужно ставить класс актив с помощью php, для того элемента которому соответствует запрос из гет.
HTML5
1

<li id='left_menu_persona' <?php if (isset($_GET['personas_id_post'])) echo "class='active'"; ?>><a href='izvade_persona_pamatdati.php?personas_id_post=".$row['personas_id']."'>Persona</a></li>
CSS
1
2
3
4
5

#left_menu_persona li{float:none; font:bold 13px Arial;}
#left_menu_persona a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/persona_off.png) no-repeat; text-decoration:none;}
#left_menu_persona a:hover{color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona a:active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona .active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
0
576 / 514 / 253
Регистрация: 26.09.2010
Сообщений: 2,603
10.03.2015, 20:30  [ТС] 3
UchihaSV, странно но не работает, я тоже так пробовал только без #left_menu_persona .active {color:#fff; background: url(../images/persona_on.png) no-repeat;} но и Ваш вариант не работает
0
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
10.03.2015, 20:37 4
А когда вы нажимаете на кнопку, в исходном коде html, вообще добавляется class='active' к той кнопке которую вы прожали?
0
576 / 514 / 253
Регистрация: 26.09.2010
Сообщений: 2,603
10.03.2015, 22:54  [ТС] 5
UchihaSV, да появляеться


вот засада он везде прописан
так как в любом случае я передаю $_GET['personas_id_post']


PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

if ($_SESSION['personas_id_sessia'] != '') {$personas_id_post = $_SESSION['personas_id_sessia'];} else {
$personas_id_post = isset( $_REQUEST['personas_id_post'] ) ? (int) $_REQUEST['personas_id_post'] : 0;}
$rs = mysql_query("SELECT * FROM `personas_pamatdati` WHERE `personas_id`=".$personas_id_post, $db);
$row = mysql_fetch_array($rs);
$personas_id = $row['personas_id'];
 
?>
<ul id='left_menu_personas_dati'>
    <li id='left_menu_persona' <?php if (isset($_GET['persona_id_post'])) { echo "class='active'"; } ?>><a href='izvade_persona_pamatdati.php?personas_id_post=<?php echo $personas_id;?>' name='persona'>Persona</a></li>
    <li id='left_menu_aizturesana' <?php if (isset($_GET['personas_id_post'])) { echo "class='active'"; } ?>><a href='izvade_persona_aizturesana.php?personas_id_post=<?php echo $personas_id;?>'>Aizturēšana</a></li>
    <li id='left_menu_ievietosana' <?php if (isset($_GET['personas_id_post'])) { echo "class='active'"; } ?>><a href='izvade_persona_ievietosana.php?personas_id_post=<?php echo $personas_id;?>'>Ievietošana</a></li>
    <li id='left_menu_konvojesana' <?php if (isset($_GET['personas_id_post'])) { echo "class='active'"; } ?>><a href='izvade_personas_konvojesana.php?personas_id_post=<?php echo $personas_id;?>'>Konvojēšana</a></li>
    <li id='left_menu_atbrivosana'><a href='izvade_persona_atbrivosana.php?personas_id_post=<?php echo $personas_id;?>'>Atbrīvošana</a></li>
    <li id='left_menu_dokumenti'><a href='izvade_persona_dokumenti.php?personas_id_post=<?php echo $personas_id;?>'>Dokumenti</a></li>
    <li id='left_menu_berni'><a href='izvade_persona_berni.php?personas_id_post=<?php echo $personas_id;?>'>Bērni</a></li>
    <li id='left_menu_mucenieki'><a href='izvade_persona_mucenieki.php?personas_id_post=<?php echo $personas_id;?>'>Mucenieki</a></li>
    <li id='left_menu_foto'><a href='izvade_persona_foto.php?personas_id_post=<?php echo $personas_id;?>'>Fotogrāfija</a></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* left menu persona */
 
#left_menu_personas_dati{list-style-type: none; padding:5px; margin: auto;}
 
#left_menu_persona li{float:none; font:bold 13px Arial;}
#left_menu_persona a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/persona_off.png) no-repeat; text-decoration:none;}
#left_menu_persona a:hover{color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona a:active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona .active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
 
 
#left_menu_aizturesana li{float:none; font:bold 13px Arial;}
#left_menu_aizturesana a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/aizturesana_off.png) no-repeat; text-decoration:none;}
#left_menu_aizturesana a:hover{color:#fff; background: url(../images/aizturesana_on.png) no-repeat;}
#left_menu_aizturesana a:active{color:#fff; background: url(../images/aizturesana_on.png) no-repeat;}
#left_menu_aizturesana .active{color:#fff; background: url(../images/aizturesana_on.png) no-repeat;}
Добавлено через 6 минут
вот что пишет в SOURCE
HTML5
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

                            <!-- left menu sakums file -->
                            <ul id='left_menu_personas_dati'>
    <li id='left_menu_persona' class='active'>
        <a href='izvade_persona_pamatdati.php?personas_id_post=1' name='persona'>Persona</a>
    </li>
    <li id='left_menu_aizturesana' class='active'>
        <a href='izvade_persona_aizturesana.php?personas_id_post=1'>Aizturēšana</a>
    </li>
    <li id='left_menu_ievietosana' class='active'>
        <a href='izvade_persona_ievietosana.php?personas_id_post=1'>Ievietošana</a>
    </li>
    <li id='left_menu_konvojesana' class='active'>
        <a href='izvade_personas_konvojesana.php?personas_id_post=1'>Konvojēšana</a>
    </li>
    <li id='left_menu_atbrivosana' class='active'>
        <a href='izvade_persona_atbrivosana.php?personas_id_post=1'>Atbrīvošana</a>
    </li>
    <li id='left_menu_dokumenti' class='active'>
        <a href='izvade_persona_dokumenti.php?personas_id_post=1'>Dokumenti</a>
    </li>
    <li id='left_menu_berni' class='active'>
        <a href='izvade_persona_berni.php?personas_id_post=1'>Bērni</a>
    </li>
    <li id='left_menu_mucenieki' class='active'>
        <a href='izvade_persona_mucenieki.php?personas_id_post=1'>Mucenieki</a>
    </li>
    <li id='left_menu_foto' class='active'>
        <a href='izvade_persona_foto.php?personas_id_post=1'>Fotogrāfija</a>
    </li>
</ul>
0
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
11.03.2015, 00:41 6
Исправьте код меню на такой, где в strpos(), 1 параметром вы пишите название файла на которое ссылается каждая ссылка:
HTML5
1
2

<li id='left_menu_persona'><a href='izvade_persona_pamatdati.php?personas_id_post=<?php echo $personas_id;?>' name='persona' <?php if (strpos('izvade_persona_pamatdati.php',$_SERVER['REQUEST_URI']) !== FALSE) echo "class='active'"; ?>>Persona</a></li>
<li id='left_menu_aizturesana'><a href='izvade_persona_aizturesana.php?personas_id_post=<?php echo $personas_id;?>' <?php if (strpos('izvade_persona_aizturesana.php',$_SERVER['REQUEST_URI']) !== FALSE) echo "class='active'"; ?>>AizturД“ЕЎana</a></li>
Стили тоже исправьте как тут:
CSS
1
2
3
4
5

#left_menu_persona li{float:none; font:bold 13px Arial;}
#left_menu_persona a{color:#CCCCCC; display:block; width: 175px; height:49px; line-height:50px; padding-left:60px; background: url(../images/persona_off.png) no-repeat; text-decoration:none;}
#left_menu_persona a:hover{color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona a:active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
#left_menu_persona a.active {color:#fff; background: url(../images/persona_on.png) no-repeat;}
1
576 / 514 / 253
Регистрация: 26.09.2010
Сообщений: 2,603
12.03.2015, 10:50  [ТС] 7
UchihaSV, результат аналогичный (нет подсветки), но и класс activ не добавляется

Добавлено через 11 минут
UchihaSV, спасибо большое решил вот таким способом подправил ваш код
PHP/HTML
1

 <li id='left_menu_persona'><a href='izvade_persona_pamatdati.php?personas_id_post=<?php echo $personas_id;?>' <?php if (strpos('/izvade_persona_pamatdati.php?personas_id_post='.$personas_id,$_SERVER['REQUEST_URI']) !== FALSE) echo "class='active'"; ?>>Persona</a></li>
посмотрел что выводит $_SERVER['REQUEST_URI'] изменил strpos() и все заработало


да сегодня посмотрел функцию strpos(), у Вас она не верно написана надо поменять местами строку и подстроку
0
12.03.2015, 10:50
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 12.03.2015, 10:50
Помогаю со студенческими работами здесь

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

Выделение активного пункта меню. Нужен совет!
Доброго времени суток, форумчане! Я в принципе нуб в CSS, помогите решить задачу. Необходимо...

Подсветка текущего пункта меню
Всем привет. Уже 2 недели бьюсь над наверное для кого-то (но не для меня) простой проблемой -...

Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта
Нужно расположить открывающийся дочерний пункт меню (третьего уровня) его верхней границей по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Блоги программистов
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
Полезные поделки на Arduino, которые можно сделать самому
raxper 06.01.2025
Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .
Подборка решений задач на Python
IT_Exp 06.01.2025
Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллер­­ы
raxper 06.01.2025
Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .
Из чего собрать игровой компьютер
inter-admin 06.01.2025
Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .
Обновление сайта www.historian.b­y
Reglage 05.01.2025
Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .
Как использовать GraphQL в C# с HotChocolate
Programming 05.01.2025
GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .
Модель полного двоичного сумматора с помощью логических операций (python)
AlexSky-coder 04.01.2025
def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()
 Это мы не проходили, это нам не задавали...(аси­­­­­­­­­­­­­­­­­­­­­­­­­­х­р­о­н­­н­­­ы­­й счётчик с управляющим сигналом зад
Hrethgir 04.01.2025
Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .
Руководство по созданию бота для Телеграм на Python
IT_Exp 04.01.2025
Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru