Меню на CSS

[wowa]

Добрый день!

Постановка проблемы: Сделал меню, все работает, кроме активной ссылки (когда нажимаешь на пункт меню, он остается подсвеченным, что мы ТУТ находимся).

Не совсем понимаю в какую ветку написать. Однако думаю сюда, тк проблема точно с кодом CSS. Проверил валидатором, есть проблемы с CSS, но они точно не влияют на конкреную проблему (и кстати пока не представляю как от них избавиться, но здесь не об этом).

Экскурс: Делаю сайт на MODx, ссылка на сайт с проблемным меню, ссылка на сайт с меню работающим.

Я перепробовал за последнюю неделю уже все на что я способен видимо, по логике (моей) все работает, а на деле нет...

Пользовал информацию из этого урока про меню.

Не пойму почему этот код работает:

 #navbar li a:hover span {
 background-position: 0 -25px;
 }

А вот этот под ним не работает:

 #navbar li a:active span {
 background-position: 0 -25px;
 }

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

Представляю на всякий код меню как есть:

 #navbar {
 margin: 0;
 padding: 0;
 background: url(../images/menu/m_bg960.png) no-repeat 0 0;
 width: 975px;
 height: 25px;
 }

 #navbar li {
 list-style: none;
 float: left;
 position: relative;
 margin: 0;
 padding: 0;
 top: 0;
 height: 25px;
 }

 #navbar li.item3 { 
 width: 158px;
 border-right: 4px solid #f22836;
  } 
 #navbar li.item5 { 
 width: 158px;
 border-right: 4px solid #8e2ba9;

  } 
 #navbar li.item7 { 
 width: 158px;
 border-right: 4px solid #2a6dbb;
  } 
 #navbar li.item9 { 
 width: 158px;
 border-right: 4px solid #f17c08;
  } 
 #navbar li.item11 { 
 width: 158px;
 border-right: 4px solid #67bc29;
  }  
 #navbar li.item13 { 
 width: 158px;
 border-right: 4px solid #ffffff;
  }

 #navbar li a {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 font: 15px/25px "Arial Narrow";
 text-decoration: none;
 white-space: nowrap;
 color: #E6E6E6;
 height: 25px;
 }
 #navbar li a:hover {
 color: #ff6600;
 }

 #navbar li a span {
 cursor: pointer;
 display: block;
 position: absolute;
 float: left;
 top: 0;
 left: 0;
 background-position: 0 0;
 background-repeat: no-repeat;
 height: 25px;
 width:160px;
 }

 #navbar li a:hover span {
 background-position: 0 -25px;
 }

 #navbar li a:active span {
 background-position: 0 -25px;
 }

 #navbar li.item3 span {
 background-image: url(../images/menu/m_dis.png);
 }
 #navbar li.item5 a span {
 background-image: url(../images/menu/m_web.png);
 }
 #navbar li.item7 a span {
 background-image: url(../images/menu/m_vid.png);
 }
 #navbar li.item9 a span {
 background-image: url(../images/menu/m_fot.png);
 }
 #navbar li.item11 a span {
 background-image: url(../images/menu/m_aud.png);
 }
 #navbar li.item13 a span {
 background-image: url(../images/menu/m_supr.png);
 }

Очень надеюсь на вашу помощь... Уверен тут все не сложно, но мозг уже кипит и я не вижу в чем проблема Спасибо вам заранее!

[Nanto]

Написали много, а проблему так и несформулировали!

Что надо-то?

":active" срабатывает только в момент нажатия. Вам это надо? Тогда пропишите РАЗНЫЕ свойства для :hover и для :active.

Сейчас у Вас и там, и там "background-position: 0 -25px;" - ясен пень что Вы разницы не видите!

P.S. Кстати, очень дурацкий урок - много левой ерунды...

Может Вам надо "текущую ссылку" подсветить? Тогда смотрите в сторону ":target", или юзайте JS/PHP, ну или как советует автор статьи - переписывайте код меню для каждой страницы сайта с навешиванием класса...

Edited March 15, 2012 by Nanto

[Melnik]

Тогда смотрите в сторону ":target"

target регулирует способ загрузки страницы в браузер. Причем здесь активная ссылка ?

[Nanto]

Тогда смотрите в сторону ":target"

target регулирует способ загрузки страницы в браузер. Причем здесь активная ссылка ?

http://htmlbook.ru/css/target

Какой ещё "способ загрузки"? Какая ещё "активная ссылка"? Речь шла про "текущую".

P.S. А... Вы подумали что речь идёт о <a href="#" target="_blank">...

Edited March 15, 2012 by Nanto

[Melnik]

Угу))) Спасибо за ссылку

[wowa]

Может Вам надо "текущую ссылку" подсветить?

ДА! Именно, подсветить текущую. Просто я думал что это с помощью :active делается...

Мне нужно, чтобы при нажатии на пункт меню срабатывало: background-position: 0 -25px;, как в случае с :hover, только на время нахождения на этой странице, а не при наведении.

Edited March 15, 2012 by wowa

[wowa]

переписывайте код меню для каждой страницы сайта с навешиванием класса...

Это почти нереально из за того что я на MODx делаю... хотя.. Ну это если никак уж не получиться буду делать

 #navbar li a:target span {
 background-position: 0 -25px;
 }

- не помогло Возможно неправильно использую

не, все правильно элемент:target { ... }

Edited March 15, 2012 by wowa