0 Пользователей и 1 Гость просматривают эту тему.
  • 15 Ответов
  • 1489 Просмотров
*

HEKTO

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Свойства активной ссылкы
« : 14.10.2012, 02:51:06 »
Всем доброго время суток! После относительно неудачного поиска на форуме, я все же решился задать вопрос на тему активной ссылки.
Суть так же - определенный стиль активной ссылки. Меню в Joomla 2.5 стандартное, горизонтальное, с изменениями.
HTML:
Код
<div class="main_menu">
     <ul сlass="menu">
          <li class="item-102"><a href="/mymag/">Главная</a></li>
          <li class="item-103"><a href="/mymag/index.php/o-magazine">О магазине</a></li>
          <li сlass="item-101 current active"><a href="/mymag/index.php/home">Контакты</a></li>
     </ul>
</div>
CSS:
Код: css
.item-101 a, .item-102 a, .item-103 a {
display: block;
text-decoration: none;
background:#666666;
display: block;
height: 24px;
width: 152px;
float:left;
color: #f0f0f0;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
font-size: 15px;
text-shadow: 0px 0px 2px black;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
margin-left: 1px;
padding-top: 2px;
}
.item-101 a:hover, .item-102 a:hover, .item-103 a:hover {background: #3ba0da;}

Элемент :hover работает, а вот :active отказывается :(. Пробовал разные варианты:
Код: css
.item-101 #current a {background: #3ba0da;}
.item-101 #active a {background: #3ba0da;}
.item-101 a:active {background: #3ba0da;}
.item-101 a:current  {background: #3ba0da;}
li.item-101 a:active {background: #3ba0da;}
li.item-101 a:current  {background: #3ba0da;}
Что интересно, Joomla дает активной ссылке класс "item-101 current active", соответственно было бы просто задать нужный стиль этому классу, да вот только не работает это.
Поэтому и возник вопрос о помощи. Кто подскажет выход из этой ситуации?

PS: Варианты
http://joomlaforum.ru/index.php/topic,161060.0.html
http://joomlaforum.ru/index.php/topic,163850.0.html
http://joomlaforum.ru/index.php/topic,180485.0.html
Не работают...
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Свойства активной ссылкы
« Ответ #1 : 14.10.2012, 11:32:25 »
Все эти ваши варианты - ошибочны изначально
Вам нужно задать активность только одной ссылке в меню по её itemID или всем?
Если всем то банально
Код: css
.menu li.active {}
или
Код: css
.menu li.active a {} 
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

johnrass

  • Захожу иногда
  • 125
  • 26 / 0
Re: Свойства активной ссылкы
« Ответ #2 : 14.10.2012, 12:20:16 »
Цитировать
Что интересно, Joomla дает активной ссылке класс "item-101 current active"
если active это класс, то обращаться к нему нужно как к классу т.е. через точку .active, а не
Цитировать
.item-101 #current a {background: #3ba0da;}
.item-101 #active a {background: #3ba0da;}
.item-101 a:active {background: #3ba0da;}
.item-101 a:current  {background: #3ba0da;}
li.item-101 a:active {background: #3ba0da;}
li.item-101 a:current  {background: #3ba0da;}
и еще class="item-101 current active" это не один, а три класса
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Свойства активной ссылкы
« Ответ #3 : 14.10.2012, 12:21:13 »
если active это класс, то обращаться к нему нужно как к классу т.е. через точку .active, а не
И тем более что .active это класс для LI, но не для A
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

HEKTO

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #4 : 14.10.2012, 14:11:29 »
... и еще class="item-101 current active" это не один, а три класса
Блин, вот действительно, заработался и не мог понять простого. Спасибо! Ведь действительно, все просто и гениально!
И тем более что .active это класс для LI, но не для A
Спасибо!
Спасибо Всем за помощь и за совет. Вот что значит свежий взгляд на работу. Все решилось за пару минут после советов.
А решилось все так:
Код: css
ul.menu li.active a, ul.menu li.current a {background: #3ba0da;}
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #5 : 27.11.2015, 12:47:19 »
так как описать отдельный background для пункта item-1?
так
Код
.menu li.active a {}
применяется только ко всему меню
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Свойства активной ссылкы
« Ответ #6 : 27.11.2015, 15:22:31 »
Да уйма решений. Для первого, например, :first-child
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #7 : 27.11.2015, 16:20:10 »
Да уйма решений. Для первого, например, :first-child
может и уйма, но пока не получается... пробую так и так...
Код
.item-105 li.active a :first-child {background-color:#000000;}
.item-105:first-child {background-color:#000000;}
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Свойства активной ссылкы
« Ответ #8 : 27.11.2015, 16:24:47 »
Код: css
.item-105 li.active a :first-child {background-color:#000000;}

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


Код: css
.item-105:first-child {background-color:#000000;}

А эта запись означает «добавить фон первому элементу из набора элементов с классом item-105». Про активность ни слова. И у вас реально, есть набор элементов с таким классом?
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #9 : 27.11.2015, 16:29:29 »
вот как у меня

нужно что бы каждая кнопка item-101 - 105 подсвечивалась разным цветом когда была активна
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Свойства активной ссылкы
« Ответ #10 : 27.11.2015, 16:33:09 »
Код: css
.item-101.active {background-color:#000;}
.item-102.active {background-color:#0f0;}
.item-103.active {background-color:#f00;}
.item-104.active {background-color:#00f;}
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #11 : 27.11.2015, 16:41:38 »
сама кнопка item-103 имеет цвет зеленый
Цитировать
.item-103  a {background-color:#24b84c; transition: color 250ms ease 0s;}
ниже прописал
Цитировать
.item-103.active {background-color:#f00;}
если присмотрется к картинке, видно что за кнопкой появился красный цвет, но он почему то сзади...


так тоже не помогает
Код
.item-103.active {background-color:#f00 !important;}
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Свойства активной ссылкы
« Ответ #12 : 27.11.2015, 16:44:24 »
Если знать все входные данные, то не приходится гадать. Вот так, чтобы наверняка:

Код: css
.item-101.active, .item-101.active * {background-color:#000 !important;}
.item-102.active, .item-102.active * {background-color:#0f0 !important;}
.item-103.active, .item-103.active * {background-color:#f00 !important;}
.item-104.active, .item-104.active * {background-color:#00f !important;}

Нерационально конечно. Но у вас сайт всё равно на артистере, так что решение подойдёт.
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #13 : 27.11.2015, 16:48:36 »
Да, так заработало...
если в двух словах то как это расшифровать
Код
.item-104.active, .item-104.active * {background-color:#00f !important;}
почему стал цвет на первое место? это так для себя
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Свойства активной ссылкы
« Ответ #14 : 27.11.2015, 16:51:29 »
В каком смысле на первое место? Запятая означает объединение правил. !important добавляет тысячу к специфичности селектора.
*

ToDoS

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
Re: Свойства активной ссылкы
« Ответ #15 : 27.11.2015, 16:53:00 »
всмысле раньше был как на картинке (позади)

а сейчас вылез наверх, как и надо....
ладно. всё ок. спасибо!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать не активной характеристику товара в Jshopping Filters?

Автор Gevguk

Ответов: 0
Просмотров: 772
Последний ответ 22.12.2014, 18:18:33
от Gevguk