CSS.Окрасить выбранный пункт меню

@berkut05 · Регистрация: 15.09.2010

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

Как сделать в CSS так, чтоб при выборе пункта меню его фон окрашивался и оставался таким пока не выбран другой пункт меню.
Через hover не получается. Он позволяет только в момент нажатия окрасить его.

@vasvas7775 · 19.01.2011, 21:47

в css можно выделить при наведении или после нажатия, говорят что такую вещь надо делать на js

@wachburn · 19.01.2011, 22:24

:hover окрашивает не в момент нажатия, а в момент наведения. В момент нажатия надо использовать :active. Только я не сильно понял, что значит "пока не выбран другой пункт меню". Тебе нужно выделить текущую открытую страницу чтоли?

@vasvas7775 · 19.01.2011, 22:38

Он хочет сделать меню по принципу кнопок магнитафона, нажимаешь одну предыдущая выключается.

Добавлено через 12 минут
Кстати хороший вопрос, как заставить :active работать после перехода на другую страницу сайта, переоткрывается только content, а меню ссылка выделение после перехода потеряет.

@wachburn · 19.01.2011, 22:49

нужно каждой странице и ссылкам, ведущим на них, назначить свой id, например

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>Page</title>
</head>
<body id = "homePage">
    <div>
        <ul>
            <li><a href="#" id="homeLink">Home</a></li>
            <li><a href="#" id="downloadLink">Download</a></li>
        </ul>
    </div>
</body>
</html>

А в стилях прописать

CSS
1
2
3
4
5
#homePage #homeLink,
#downloadPage #downloadLink
{
    background:url(file.png);
}

В итоге получится, если выбрана страница homePage, то будет задействован стиль для ссылки homeLink, а селектор #downloadPage #downloadLink будет недействительный, т.к. такого просто нет на странице.

@Nazz · 19.01.2011, 23:26

jquery вам в руки)))

@berkut05 · 21.01.2011, 00:56 **[ТС]**

Спасибо всем. Видимо это делается через JS

@wachburn · 21.01.2011, 02:34

ты бы написал точнее что тебе нужно

@Anatolii1309 · 09.10.2013, 12:46

Вы еще в С++ залезайте.

CSS
1
2
3
#menu a.active {
  color: #FFF !important;
  }

цвет нужный ставишь и т. п. описывай

@TheBeatCoder · 11.10.2013, 03:05

Если нужно обойтись без JS, то можно было бы просто назначить активному элементу меню идентификатор-флаг и прописать ему нужные стили. Например, у нас есть что-то типа такого меню:

HTML5
1
2
3
4
5
6
<ul id="menu">
  <li>Main</li>
  <li>Gallery</li>
  <li>About</li>
  <li>Folio</li>
</ul>

Тогда, для того, чтобы пометить какой-либо элемент меню нам нужно назначить последнему (пускай это будет вкладка "About") идентификатор-флаг:

HTML5
1
<li id="active">About</li>

После этого нам остается прописать в стилях что-то типа такого:

CSS
1
2
3
4
5
6
ul#menu li#active {
  background-color: maroon;
  color: #fff; /* Таким образом активный элемент меню будет
  отличаться от других красно-коричневым фоном и белым
  цветом шрифтов */
}

При этом для каждого элемента меню нужен отдельный HTML-файл, в котором этот элемент будет помечен как активный (в противном случае нам пришлось бы использовать JS).

@dolte · 11.10.2013, 16:19

Отлавливаете активный пункт меню, использовать можно js.
Далее всё в css.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function () {                             // когда страница загружена
    $('.llmenu span a').each(function () {      // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном
 
        if(result != null) {                // если НЕ равно null
            $(this).addClass('current');    // добавляем класс
        }
    });
});

HTML5
1
2
3
4
5
6
7
8
<ul id="hmenu">
<li class="llmenu"><span class="lm1"><a href="/news/" title="Новости"></a></span></li>
<li class="llmenu"><span class="lm2"><a href="/about.html" title="О компании"></a></span></li>
<li class="llmenu"><span class="lm3"><a href="/doors/" title="Каталог"></a></span></li>
<li class="llmenu"><span class="lm4"><a href="/partners.html" title="Партнеры"></a></span></li>
<li class="llmenu"><span class="lm5"><a href="/servises.html" title="Услуги"></a></span></li>
<li class="llmenu"><span class="lm6"><a href="/feedback.html" title="Контактная информация"></a></span></li>
</ul>

@Amaterino · 12.06.2014, 01:46

dolte, спасибо работает! убрал только span из скрипта.

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

у меня 3 уровня:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>
    <li><a href="#">первый уровень</a>
    <ul>
         <li><a href="#">второй уровень</a>
            <ul>
                <li><a href="#">третий уровень</a></li>
                <li><a href="#">третий уровень</a></li>
                <li><a href="#">третий уровень</a></li>
            </ul>
         </li>
         <li><a href="#">второй уровень</a></li>
         <li><a href="#">второй уровень</a></li>
         <li><a href="#">второй уровень</a></li>
    </ul>
    </li>
    <li><a href="#">первый уровень</a></li>
    <li><a href="#">первый уровень</a></li>               
</ul>

Как в JS сказать, что нужно присводить этот же класс как минимум самомум верхнему (родительскому) <li>?

Добавлено через 20 минут
изменил последнюю строку скрипта вот так:

JavaScript
1
$(this).parents('li').addClass('selected');

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

@alexshab · 03.04.2015, 11:43

Я сделал через php.
С немного бОльшим функционалом
Задача состояла в том, что пункт меню должен бы гореть не только на одной странице, но и во вложениях и других любых необходимых страницах.

Получилось довольно симпатично. Ниже код и пример.

Сайт на движке джумла. Там для вставки php нужны теги {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
31
32
{source} <?php
$catid = JRequest::getInt( 'catid', 1, 'get' );
$articleid = JRequest::getInt( 'id', 1, 'get' );
/* echo $articleid, '  ', $catid; - эту строку можно включить, что бы посмотреть значения номера материала и категории для задания условия*/
?> {/source}
 
<ul id="navbar">
<li><a
{source} <?php if ($articleid=='132' || ($articleid=='99' && $catid=='1')){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera.html" title="Студия интерьера">Студия интерьера</a></li>
<li><a
{source} <?php if ($catid=='101' || ($articleid=='101' && $catid=='1')){ echo JText::_(' class="selected" ');} ?> {/source}
href="/stili-dizaiena/" title="Стили дизайна">Стили дизайна</a></li>
<li><a
{source} <?php if ($articleid=='126'){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera/podbor-mebeli.html" title="Подбор мебели">Подбор мебели</a></li>
<li><a
{source} <?php if ($articleid=='140' || $catid=='103' || ($articleid=='103' && $catid=='1')){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera/dizajn-proekt.html" title="Дизайн-проект">Дизайн-проект</a></li>
<li><a
{source} <?php if ($articleid=='142' || $catid=='102' || ($articleid=='102' && $catid=='1')){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera/pereplanirovka.html" title="Перепланировка">Перепланировка</a></li>
<li><a
{source} <?php if ($articleid=='131'){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera/evroremont.html" title="Евроремонт">Евроремонт</a></li>
<li><a
{source} <?php if ($articleid=='143'){ echo JText::_(' class="selected" ');} ?> {/source}
href="/studiya-interera/detali-interera.html" title="Детали интерьера">Детали интерьера</a></li>
<li><a
{source} <?php if ($catid=='88' || ($articleid=='88' && $catid=='1')){ echo JText::_(' class="selected" ');} ?> {/source}
href="/blog/" title="Блог дизайна и декора">Блог дизайна и декора</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
#navbar {
    padding: 0;
    list-style-type: none;
    width: 280px;
    font-size: 14px;
    }
#navbar li {
    border-bottom: 1px solid #ffffff;
    line-height: 40px;
    }
#navbar a {
    background-color: #f1f4f5;
    color: #4c4c4c;
    border-left: 4px solid #58aa2d; 
    padding: 0 15px;
    text-decoration: none;
    font-weight: normal;
    display: block;
    text-transform: uppercase;
 
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5 ease-out 0s;  
}
#navbar a:hover, #navbar a.selected {
    color: #000000;
    background-color: #dfdfdf;
    border-left: 4px solid #58ff2d;
}

Посмотреть можно здесь. Меню находится слева:
Стили дизайна

@vasvas7775 · 03.04.2015, 19:27

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

Сайт на движке джумла. Там для вставки php нужны теги {source}

зачем на Jomla писать php и определять на какой ты странице?
на Jomla нужно воспользоваться стандартным функционалом. создать меню, наполнить как надо, запихать куда надо, и когда мы находимся на какой-то странице этого меню к li ставится класс .current или .active и вуаля, осталось прописать стиль активному

@alexshab · 03.04.2015, 19:44

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

зачем на Jomla писать php и определять на какой ты странице?

в джумле нет функционала, который позволяет присвоить одному пункту меню одновременно разные материалы и блоги. А в моем варианте это реализовано. Если тебе это не нужно, то это не значит что ни кому не пригодится.

@vasvas7775 · 03.04.2015, 19:49

зачем?

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

пункту меню одновременно разные материалы и блоги.

пункт меню должен быть уникальным

@Serega187 · 03.04.2015, 19:56

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

HTML5
1
2
3
4
5
6
7
<nav>
  <ul>
     <li><a href="/">Виды верстки</a></li>
     <li><a href="prices.php">Цены на верстку</a></li>
     <li><a href="contacts.php">Контакты</a></li>
  </ul>
</nav>

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
    /*     Меню     */
nav{
outline:0px solid #cc0000;
padding:0px 0 15px 0;
}
nav ul{
outline:0px solid #cc0000;
font:12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
list-style:none;
}
nav ul li{
display:inline-block;
color:#b3c3c9;
}
nav ul li a{
color:inherit;
text-decoration:none;
padding:0 15px 0 0;
}
nav ul li a:hover{
color:#32bcde;
}
.onTop{
color:#32bcde !important;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function()
      {
        $("nav ul li a").each(function()
          {
            if(this.href.replace(/#.*$/, '') == location.href.replace(/#.*$/, ''))
              $(this).parent().addClass('onTop');
            else
              $(this).parent().removeClass('onTop');
          }
        );
        /**/if(!$('.onTop').size()) {$("nav a:first").parent().addClass('onTop')}
      }
    );

@alexshab · 03.04.2015, 20:00

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

пункт меню должен быть уникальным

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@berkut05 1 / 1 / 1 Регистрация: 15.09.2010 Сообщений: 155

	CSS.Окрасить выбранный пункт меню 19.01.2011, 21:10. Показов 29853. Ответов 17 Метки нет (Все метки) Как сделать в CSS так, чтоб при выборе пункта меню его фон окрашивался и оставался таким пока не выбран другой пункт меню. Через hover не получается. Он позволяет только в момент нажатия окрасить его. 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	19.01.2011, 21:47
	в css можно выделить при наведении или после нажатия, говорят что такую вещь надо делать на js 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 22:24
	:hover окрашивает не в момент нажатия, а в момент наведения. В момент нажатия надо использовать :active. Только я не сильно понял, что значит "пока не выбран другой пункт меню". Тебе нужно выделить текущую открытую страницу чтоли? 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	19.01.2011, 22:38
	Он хочет сделать меню по принципу кнопок магнитафона, нажимаешь одну предыдущая выключается. Добавлено через 12 минут Кстати хороший вопрос, как заставить :active работать после перехода на другую страницу сайта, переоткрывается только content, а меню ссылка выделение после перехода потеряет. 0

@Nazz 898 / 729 / 80 Регистрация: 12.03.2009 Сообщений: 2,804 Записей в блоге: 2
	19.01.2011, 23:26
	jquery вам в руки))) 0

@berkut05 1 / 1 / 1 Регистрация: 15.09.2010 Сообщений: 155
	21.01.2011, 00:56 [ТС]
	Спасибо всем. Видимо это делается через JS 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	21.01.2011, 02:34
	ты бы написал точнее что тебе нужно 0