Как сделать фон для текущего пункта меню?

@sinlerks · Регистрация: 22.02.2013

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

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

@Excubitor · 14.05.2014, 04:46

sinlerks, Это не html... я этого добивался с помощью js, но может можно еще и с помощью php, но точно не html или css.

@James Swift · 14.05.2014, 05:29

В css к выбранному классу дописать вот это: :active {}
Допустим если меню состоит из:

HTML5
1
2
3
4
<ul class="menu">
<li>Страница 1</li>
<li>Страница 2</li>
</ul>

в css:

CSS
1
2
3
4
5
6
7
8
9
10
# menu ul {
background:url([COLOR="DarkRed"]URL[/COLOR]);
color:#A9A9A9;
font-size:14px;
}
#menu ul li:active {
background:url([COLOR="RoyalBlue"]URL[/COLOR]);
color:#B22222;
font-size:20px;
}

После этого, когда ты будешь находится на странице тот пункт меню будет иметь бирюзовый фон и размер шрифта 20px ну и цвет красный =D

@Excubitor · 14.05.2014, 05:33

Сообщение от James Swift

В css к выбранному классу дописать вот это: :active {}

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

@James Swift · 14.05.2014, 05:33

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

Надо поэкспериментировать

попробуй, попробуй

@almaz1994 · 14.05.2014, 20:30

Сообщение от James Swift

попробуй, попробуй

active же в момент нажатия только срабатывает, нет?

Добавлено через 42 секунды
В движках обычно для активного пункта меню присваивается дополнительный класс или айди. Для него прописываешь стили. Если обычная хтмл - тогда сложно, в JS скорее всего.

@James Swift · 14.05.2014, 20:42

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

active же в момент нажатия только срабатывает, нет?

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

@Excubitor · 15.05.2014, 01:09

Сообщение от James Swift

но припоминаю, что вроде бы как актив работает именно над этим

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

@Academik · 15.05.2014, 02:38

James Swift, ТС прав, псевдокласс :active распространяется на момент клика.
Excubitor, Через css никак. Тут обсуждалось Подсветка текущего пункта меню и еще много где. Поиск по форуму рулит.

@Excubitor · 15.05.2014, 02:42

Mr Coder, Ну как бы я и так знаю, как это сделать. Я говорил именно о том, что с помощью css это сделать не возможно.

@Academik · 15.05.2014, 02:43

Excubitor, перепутал адресат, хотел тс направить сообщение)

@N1LEX · 15.05.2014, 17:48

<div id="menu">
<ul>
<li><a href="index.html">главная</a></li>
<li><a href="motox.html">мотоциклы</a></li>
li<a href="fints.html">трюки</a>/li
<li><a href="sportsmens.html"class="active">спо ртсмены</a></li>
<li><a href="/">пункт меню</a></li>
</ul>
</div>

В данный момент мы находимся на странице "Спортсмены", этой странице мы присваиваем класс active,

В CSS:

.active{background:url(....);}

@Excubitor · 15.05.2014, 17:52

N1LEX, но класс задавать требуется с помощью js

@N1LEX · 15.05.2014, 17:55

Можно на всех страницах указать этот класс вот как у меня: http://176.116.210.243/1/fmx/index.html

@Excubitor · 15.05.2014, 18:16

N1LEX, Да где же он у всех задан? Только у текущего пункта есть класс active. А вычислить где в данный момент находится пользователь можно только с помощью js.

@N1LEX · 15.05.2014, 18:20

Вы на других страницах не смотрели?

@Excubitor · 15.05.2014, 18:22

Это вы не туда смотрите. В единый момент класс active существует только у одной ссылки, у других нет. При смене страницы, класс убирается у предыдущей ссылки и дается текущей. Это достигается только с помощью js.

@N1LEX · 15.05.2014, 18:25

HTML5
1
2
3
4
5
<li><a href="index.html" class="active">главная</a></li>
            <li><a href="motox.html">мотоциклы</a></li>
            <li><a href="fints.html">трюки</a></li>
            <li><a href="sportsmens.html">спортсмены</a></li>
            <li><a href="/">пункт меню</a></li>

HTML5
1
2
3
4
5
            <li><a href="index.html">главная</a></li>
            <li><a href="motox.html" class="active">мотоциклы</a></li>
            <li><a href="fints.html">трюки</a></li>
            <li><a href="sportsmens.html">спортсмены</a></li>
            <li><a href="/">пункт меню</a></li>

HTML5
1
2
3
4
5
<li><a href="index.html">главная</a></li>
            <li><a href="motox.html" >мотоциклы</a></li>
            <li><a href="fints.html" class="active">трюки</a></li>
            <li><a href="sportsmens.html">спортсмены</a></li>
            <li><a href="/">пункт меню</a></li>

HTML5
1
2
3
4
5
<li><a href="index.html">главная</a></li>
            <li><a href="motox.html">мотоциклы</a></li>
            <li><a href="fints.html">трюки</a></li>
            <li><a href="sportsmens.html" class="active">спортсмены</a></li>
            <li><a href="/">пункт меню</a></li>

Вот меню на каждой всех страниц, если мы переходим на эту страницу активируется класс

@Excubitor · 15.05.2014, 18:28

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

@James Swift · 15.05.2014, 18:35

говорил же что можно =D

Новые блоги и статьи Все статьи Все блоги /
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 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@sinlerks 0 / 0 / 0 Регистрация: 22.02.2013 Сообщений: 22

	Как сделать фон для текущего пункта меню? 13.05.2014, 23:47. Показов 7142. Ответов 23 Метки нет (Все метки) Как сделать фон для текущего пункта меню, т.е. для пункта, на странице которого я нахожусь (не активного, а именно текущего) ?? помогите пожалуйста... 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	14.05.2014, 04:46
	sinlerks, Это не html... я этого добивался с помощью js, но может можно еще и с помощью php, но точно не html или css. 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	15.05.2014, 02:38
	James Swift, ТС прав, псевдокласс :active распространяется на момент клика. Excubitor, Через css никак. Тут обсуждалось Подсветка текущего пункта меню и еще много где. Поиск по форуму рулит. 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	15.05.2014, 02:42
	Mr Coder, Ну как бы я и так знаю, как это сделать. Я говорил именно о том, что с помощью css это сделать не возможно. 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	15.05.2014, 02:43
	Excubitor, перепутал адресат, хотел тс направить сообщение) 0

@N1LEX 1 / 1 / 2 Регистрация: 27.05.2013 Сообщений: 39
	15.05.2014, 17:48
	<div id="menu"> <ul> <li><a href="index.html">главная</a></li> <li><a href="motox.html">мотоциклы</a></li> li<a href="fints.html">трюки</a>/li <li><a href="sportsmens.html"class="active">спо ртсмены</a></li> <li><a href="/">пункт меню</a></li> </ul> </div> В данный момент мы находимся на странице "Спортсмены", этой странице мы присваиваем класс active, В CSS: .active{background:url(....);} 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	15.05.2014, 17:52
	N1LEX, но класс задавать требуется с помощью js 0

@N1LEX 1 / 1 / 2 Регистрация: 27.05.2013 Сообщений: 39
	15.05.2014, 17:55
	Можно на всех страницах указать этот класс вот как у меня: http://176.116.210.243/1/fmx/index.html 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	15.05.2014, 18:16
	N1LEX, Да где же он у всех задан? Только у текущего пункта есть класс active. А вычислить где в данный момент находится пользователь можно только с помощью js. 0

@N1LEX 1 / 1 / 2 Регистрация: 27.05.2013 Сообщений: 39
	15.05.2014, 18:20
	Вы на других страницах не смотрели? 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	15.05.2014, 18:22
	Это вы не туда смотрите. В единый момент класс active существует только у одной ссылки, у других нет. При смене страницы, класс убирается у предыдущей ссылки и дается текущей. Это достигается только с помощью js. 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	15.05.2014, 18:28
	N1LEX, я уже раз в четвертый говорю, что изначально класса нет ни у одной страницы, и дается только, когда на нее переходят. Ну вот как бы вы иначе достигли этого? 0

@James Swift 38 / 37 / 0 Регистрация: 28.01.2013 Сообщений: 237 Записей в блоге: 1
	15.05.2014, 18:35
	говорил же что можно =D 0