Цвет активных ссылок в меню

Tchorteg · April 4, 2011

День добрый. В шаблоне меню на сайте есть динамическое меню и есть ссылка которая написана в ручную в шаблоне. Но на них не работает стиль для активных ссылок.

#header .phone a:hover ,
#header .phone a.active ,
#header .nav li a:hover ,
#header .nav li a.active {
	text-decoration:none;
	color:#b9ae80;
}

А это код из шаблона:

		<div id="header">
<?$APPLICATION->IncludeComponent("menu", "top_default", array(
	"ROOT_MENU_TYPE" => "top",
	"MENU_CACHE_TYPE" => "A",
	"MENU_CACHE_TIME" => "36000000",
	"MENU_CACHE_USE_GROUPS" => "N",
	"MENU_CACHE_GET_VARS" => array(
	),
	"MAX_LEVEL" => "1",
	"CHILD_MENU_TYPE" => "top",
	"USE_EXT" => "N",
	"DELAY" => "N",
	"ALLOW_MULTI_SELECT" => "N"
	),
	false
);?>
			<em class="phone">546546546546546 <a href="/contact/">контакты</a></em>
			<strong class="slogan"><span>Слонган</span> В ИННОВАЦИЯХ</strong>
		</div>

Помогите пожалуйста разобраться.

swetlana · April 4, 2011

пока что не видно ни одной причины, чтобы этот стиль применился.

Если он для класса active, то он и должен применяться к <a class="active">. Тут же ссылка без класса.

Или я чего не так понимаю?

Tchorteg · April 4, 2011

пока что не видно ни одной причины, чтобы этот стиль применился.
Если он для класса active, то он и должен применяться к <a class="active">. Тут же ссылка без класса.
Или я чего не так понимаю?

Ну а если поставить вот так:

a:active {
	text-decoration:none;
	color:#b9ae80;
}

Разве он не должен автоматом выделять активные ссылки?

Searcher · April 4, 2011

А что вы подразумеваете под активной ссылкой? Подозреваю, что вы хотите выделить ссылку соответствующую текущей странице... Так?

swetlana · April 4, 2011

да.

С момента, когда ссылка нажата, до момента, когда браузер сменит текущую страницу новой, будет применён этот стиль.

Tchorteg · April 4, 2011

да.
С момента, когда ссылка нажата, до момента, когда браузер сменит текущую страницу новой, будет применён этот стиль.

Ну вот он и не работает. Вставил его в body стиль, тоесть самый верхний. и ему всеравно, ссылки как были белые по умолчание (активные и не активные) так и остались.

swetlana · April 4, 2011

покажите страницу

Tchorteg · April 4, 2011

покажите страницу

Сайт на локалхосте.

Searcher · April 4, 2011

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

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

Tchorteg · April 4, 2011

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

#header {
	height:186px;
	position:relative;
}
#header a:active {
	text-decoration:none;
	color:#b9ae80;
}

<body>
	<div id="wrapper">
		<!-- header -->
		<div id="header">
<?$APPLICATION->IncludeComponent("menu", "top_default", array(
	"ROOT_MENU_TYPE" => "top",
	"MENU_CACHE_TYPE" => "A",
	"MENU_CACHE_TIME" => "36000000",
	"MENU_CACHE_USE_GROUPS" => "N",
	"MENU_CACHE_GET_VARS" => array(
	),
	"MAX_LEVEL" => "1",
	"CHILD_MENU_TYPE" => "top",
	"USE_EXT" => "N",
	"DELAY" => "N",
	"ALLOW_MULTI_SELECT" => "N"
	),
	false
);?>
			<em class="phone">gdfgdfgd <a href="/contact/">контакты</a></em>
		</div>

cssview · April 4, 2011

Все у тебя правильно показывает. Псевдоклас :active - определяет активную ссылку по нажатию на неё. А если Ты хочешь подсвечивать активную ссылку открытого документа то ИМХО js в помощь.

Edited April 4, 2011 by cssview

Searcher · April 4, 2011

Все работает как надо. hover срабатывает. В разных броузерах немного по-разному, но это уже особенности конкретных броузеров. Нужен полный код и не php, а результат, который получает броузер. Возможно там еще какие-то стили что-то перекрывают. И в каком броузере смотрите, кстати?

Хотя я сильно подозреваю, что от active вы ждете не то, для чего это предназначено...

Tchorteg · April 4, 2011

Не работает подсветка активной ссылки.

Смотрю в Firefox 3, Firefox 4, Google Chrome, Opera 10.10, Opera 10.60.

Выдаю код в хтмл:

<body> 
<div id="panel"></div> 
	<div id="wrapper"> 
		<!-- header --> 
		<div id="header"> 
			<h1><a href="/">Unisoft</a></h1> 

<ul class="nav"> 

			<li><a href="/1/" class="selected">1</a></li> 

			<li><a href="/2/">о 2</a></li> 

			<li><a href="/3/">3</a></li> 

			<li><a href="/4/">4</a></li> 

			<li><a href="/it_5/">-5</a></li> 

			<li><a href="/_6/">6</a></li> 


</ul> 
			<em class="phone">(пав <a href="/contact/">контакты</a></em> 
		</div>

swetlana · April 4, 2011

Для восстановления картины можно ещё показать нам содержимое файлика SITE_TEMPLATE_PATH/components/bitrix/menu/top_default/template.php

Хотя подозреваю, что там всё в порядке, а проблема строго та, которую излагает Searcher.

Ну и есть ещё одна проблема, из которой следует возникшая у вас проблема.

Ссылка на контакты должна быть в меню. То есть, в .top_default.menu.php, а не здесь.

cssview · April 4, 2011

Не работает подсветка активной ссылки.

Смотрю в Firefox 3, Firefox 4, Google Chrome, Opera 10.10, Opera 10.60.

Выдаю код в хтмл:

<body> 
<div id="panel"></div> 
	<div id="wrapper"> 
		<!-- header --> 
		<div id="header"> 
			<h1><a href="/">Unisoft</a></h1> 

<ul class="nav"> 

			<li><a href="/1/" class="selected">1</a></li> 

			<li><a href="/2/">о 2</a></li> 

			<li><a href="/3/">3</a></li> 

			<li><a href="/4/">4</a></li> 

			<li><a href="/it_5/">-5</a></li> 

			<li><a href="/_6/">6</a></li> 


</ul> 
			<em class="phone">(пав <a href="/contact/">контакты</a></em> 
		</div>

Что ты понимаешь под активной ссылкой?

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

Edited April 4, 2011 by cssview

swetlana · April 4, 2011

вообще, до сих пор не понятно, в чём именно проблема.

Если не срабатывает :active, то смотрите, не перезадан ли он с большей специфичностью например.

Если вы находитесь по адресу /contacts/, и ссылке не назначается класс selected или active — тут проблема та, которая описана выше. Ссылка зря вынесена из меню.

Tchorteg · April 4, 2011

Если вы находитесь по адресу /contacts/, и ссылке не назначается класс selected или active — тут проблема та, которая описана выше. Ссылка зря вынесена из меню.

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

Могу показать файлик шаблона менюшки но там стилей нет которые могли бы портить жизнь.

swetlana · April 4, 2011

уже не надо.

готовый html лучше.

Прошу ответить прямо:

под активной ссылкой вы подразумеваете ту, соответствующая которой страница сейчас открыта?

Варианты ответов: да/нет.

Tchorteg · April 4, 2011

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

Да.

swetlana · April 4, 2011

тогда и ответ очевиден.

Вы определяете стиль для класса active, а ждёте, что он применится к элементам с классом selected.

Это ожидание ничуть не оправдано и в корне ошибочно.

Tchorteg · April 4, 2011

тогда и ответ очевиден.
Вы определяете стиль для класса active, а ждёте, что он применится к элементам с классом selected.
Это ожидание ничуть не оправдано и в корне ошибочно.

Вот я дурень Щас только сам заметил даже то что я скидывал на форум, там класс селектед.

Спасибо Светлана.

Sign In

Цвет активных ссылок в меню

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information