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

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

10.03.2015, 12:03. Показов 4359. Ответов 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
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 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
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 12.03.2015, 10:50
Помогаю со студенческими работами здесь

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru