css-меню

virus-07 · June 8, 2010

Намаялся, не могу понять: что текстовое, что на спрайтах меню, делаю разные стили для 1 пункта: обычное, hover и active. Срабатывают первые два, active стиль игнорируется.

Подскажите пож-та, как должен выглядеть кусок. Допустим, сдвигая изображение:

ul.navbar {...}

ul.navbar li.main {background-position: 0px 0px; height: 120px;}

ul.navbar li.main:hover {background-position: -25px 0px;}

ul.navbar li.main:active {background-position: -25px 0px;}

и вот находясь на этой страничке мы видем кусок изображения 0px 0px. Что не так ?

заранее большое спасибо

psywalker · June 8, 2010

Намаялся, не могу понять: что текстовое, что на спрайтах меню, делаю разные стили для 1 пункта: обычное, hover и active. Срабатывают первые два, active стиль игнорируется.
Подскажите пож-та, как должен выглядеть кусок. Допустим, сдвигая изображение:
ul.navbar {...}
ul.navbar li.main {background-position: 0px 0px; height: 120px;}
ul.navbar li.main:hover {background-position: -25px 0px;}
ul.navbar li.main:active {background-position: -25px 0px;}
и вот находясь на этой страничке мы видем кусок изображения 0px 0px. Что не так ?
заранее большое спасибо

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

virus-07 · June 8, 2010

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

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

rus · June 8, 2010

вроде бы должен быть определенный порядок следования стилей для тега <a>.

sigma77 · June 8, 2010

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

a:active действует только в момент нажатия кнопки мыши, если тебе нужно это поведение, то лучше дай ссылку на весь код, чтобы были видны изображения.

Если тебе нужно, чтобы подсвечивало текущий пункт меню, то нужно этому пункту присвоить свой класс и ему уже прописывать стили.

<style type="text/css">
.active {   }
</style>

<a class="active" href="#">Link</a>

Edited June 8, 2010 by sigma77

virus-07 · June 8, 2010

a:active действует только в момент нажатия кнопки мыши, если тебе нужно это поведение, то лучше дай ссылку на весь код, чтобы были видны изображения.
Если тебе нужно, чтобы подсвечивало текущий пункт меню, то нужно этому пункту присвоить свой класс и ему уже прописывать стили.
<style type="text/css">
.active {   }
</style>

<a class="active" href="#">Link</a>

вообще не представляю. Если это спрайт-меню, то обращаясь по id к одному <li> (а иначе никак, если нам важно сделать стиль наведенного курсора :hover) и в то же время ко всем <li> через <class>, причем с противоречащими стилями, то будет выбран один и только. И, кстати говоря, hover срабатывает и без прописывания. О_о

вроде бы должен быть определенный порядок следования стилей для тега <a>.

мне это не помогло (

Edited June 8, 2010 by virus-07

sigma77 · June 8, 2010

Этого ты хочешь добиться?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="#" media="#" />
	<style type="text/css">
	  .menu {list-style-type: none;}
	  .menu li {width: 150px;}
	  .menu a {display: block; padding: 10px 20px; background: silver; text-decoration: none; color: #000;}
	  .menu .active {background: orange;}
	  .menu a:hover {background: gray; text-decoration: underline;}
	</style>	
  </head>
  <body>
	<ul class="menu">
		<li><a href="#">Link 1</a></li>
		<li><a class="active" href="#">Link 2</a></li>  <!-- Текущий раздел сайта -->
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>	
  </body>
</html>

virus-07 · June 8, 2010

Этого ты хочешь добиться?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="#" media="#" />
	<style type="text/css">
	  .menu {list-style-type: none;}
	  .menu li {width: 150px;}
	  .menu a {display: block; padding: 10px 20px; background: silver; text-decoration: none; color: #000;}
	  .menu .active {background: orange;}
	  .menu a:hover {background: gray; text-decoration: underline;}
	</style>	
  </head>
  <body>
	<ul class="menu">
		<li><a href="#">Link 1</a></li>
		<li><a class="active" href="#">Link 2</a></li>  <!-- Текущий раздел сайта -->
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>	
  </body>
</html>

По идее близко к правде, однако на каждой странице так поступать не станешь, ведь если подключать меню через php во все страницы — то это не прокатит.

Sign In

css-меню

Question

virus-07

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

virus-07

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

virus-07

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

virus-07

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information