Форум русской поддержки Joomla!® CMS
04.12.2016, 18:14:49 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Свойства активной ссылкы

 (Прочитано 861 раз)
0 Пользователей и 1 Гость смотрят эту тему.
HEKTO
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« : 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:
Код
.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 отказывается Sad. Пробовал разные варианты:
Код
.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
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #1 : 14.10.2012, 11:32:25 »

Все эти ваши варианты - ошибочны изначально
Вам нужно задать активность только одной ссылке в меню по её itemID или всем?
Если всем то банально
Код
.menu li.active {}
или
Код
.menu li.active a {}
Записан
johnrass
Осваиваюсь на форуме
***

Репутация: +26/-0
Offline Offline

Пол: Мужской
Сообщений: 126


« Ответ #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
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #3 : 14.10.2012, 12:21:13 »

если active это класс, то обращаться к нему нужно как к классу т.е. через точку .active, а не
И тем более что .active это класс для LI, но не для A
Записан
HEKTO
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #4 : 14.10.2012, 14:11:29 »

... и еще class="item-101 current active" это не один, а три класса
Блин, вот действительно, заработался и не мог понять простого. Спасибо! Ведь действительно, все просто и гениально!
И тем более что .active это класс для LI, но не для A
Спасибо!
Спасибо Всем за помощь и за совет. Вот что значит свежий взгляд на работу. Все решилось за пару минут после советов.
А решилось все так:
Код
ul.menu li.active a, ul.menu li.current a {background: #3ba0da;}
Записан
ToDoS
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #5 : 27.11.2015, 13:47:19 »

так как описать отдельный background для пункта item-1?
так
Код:
.menu li.active a {}
применяется только ко всему меню
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #6 : 27.11.2015, 16:22:31 »

Да уйма решений. Для первого, например, :first-child
Записан
ToDoS
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #7 : 27.11.2015, 17:20:10 »

Да уйма решений. Для первого, например, :first-child
может и уйма, но пока не получается... пробую так и так...
Код:
.item-105 li.active a :first-child {background-color:#000000;}
.item-105:first-child {background-color:#000000;}
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #8 : 27.11.2015, 17:24:47 »

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

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


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

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

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #9 : 27.11.2015, 17:29:29 »

вот как у меня

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #10 : 27.11.2015, 17:33:09 »

Код
.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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #11 : 27.11.2015, 17: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
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #12 : 27.11.2015, 17:44:24 »

Если знать все входные данные, то не приходится гадать. Вот так, чтобы наверняка:

Код
.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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #13 : 27.11.2015, 17:48:36 »

Да, так заработало...
если в двух словах то как это расшифровать
Код:
.item-104.active, .item-104.active * {background-color:#00f !important;}
почему стал цвет на первое место? это так для себя
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #14 : 27.11.2015, 17:51:29 »

В каком смысле на первое место? Запятая означает объединение правил. !important добавляет тысячу к специфичности селектора.
Записан
ToDoS
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10



« Ответ #15 : 27.11.2015, 17:53:00 »

всмысле раньше был как на картинке (позади)

а сейчас вылез наверх, как и надо....
ладно. всё ок. спасибо!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet