Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla

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

artemkozlov

  • Осваиваюсь на форуме
  • 23
  • 0 / 0
Три состояния пункта меню!
« : 10.05.2011, 16:48:35 »
Доброго времени суток уважаемые!
Столкнулся с проблемой, как сделать чтоб у каждого элемента горизонтального меню, было три состояния, используя технику CSS Sprites.
Написал код меню в HTML и CSS, но при интеграции в шаблон не работает......
Код
ul.menu-topik li a
{float: left;
height: 128px;
width: 119px;
background: url(../images/menu.png) no-repeat;
text-indent: -9999px;
}

ul.menu-topik li a .item28 :hover
{background-position: 0px -128px;}


ul.menu-topik li a.item28 :visited
{background-position: 0px -256px;}
Подскажите что не так?
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Три состояния пункта меню!
« Ответ #1 : 11.05.2011, 07:19:32 »
А у Вас тут разные селекторы. Да и вообще не рабочие :)
Код
a .item28 :hover
a.item28 :visited
меняем на
Код
a.item28:hover
a.item28:visited
Поясняю, как сейчас (ul.menu-topik li a .item28 :hover) выборка будет проходить так: сперва нашли ul, в нём li, в нём a, в нём все элементы с классом item28. Дальше дело не пойдёт, так, как псевдокласс :hover у вас привязан к "воздуху". Вот такие проблемы всего лишь изза двух пробелов лишних. :)
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Три состояния пункта меню!
« Ответ #2 : 11.05.2011, 07:24:44 »
Код
text-indent: -9999px;
Гламурно. Ну если это обычный мод_майнменю (или мод_меню, если Дж1,6), то внутри ссылки у Вас ещё span есть.
Это
Код
height: 128px;
width: 119px;
работать не будет. Ссылка по-умоланию инлайновский элемент. Сделайте так:
Код
ul.menu-topik a
{float: left;
height: 128px;
width: 119px;
background: url(../images/menu.png) no-repeat;
display: block;}

ul.menu-topik span
{display: none;}
Записан
*

artemkozlov

  • Осваиваюсь на форуме
  • 23
  • 0 / 0
Re: Три состояния пункта меню!
« Ответ #3 : 11.05.2011, 08:15:49 »
Цитата: Shustry от 11.05.2011, 07:24:44
Код
text-indent: -9999px;
Гламурно. Ну если это обычный мод_майнменю (или мод_меню, если Дж1,6), то внутри ссылки у Вас ещё span есть.
Это
Код
height: 128px;
width: 119px;
работать не будет. Ссылка по-умоланию инлайновский элемент. Сделайте так:
Код
ul.menu-topik a
{float: left;
height: 128px;
width: 119px;
background: url(../images/menu.png) no-repeat;
display: block;}

ul.menu-topik span
{display: none;}
Спасибо за ответ, с этим все в порядке, text-indent: -9999px; поменял вроде все работает, а вот с псевдоклассами не получается(((( Написал так
Код

ul.menu-topik
{width: 476px;
list-style: none;
}


ul.menu-topik li a
{float: left;
height: 128px;
width: 119px;
background: url(../images/menu.png) no-repeat;
overflow: hidden;
display: block;
}

ul.menu-topik li a.item28:hover
{background-position: 0px -128px;}


ul.menu-topik li a.item28:visited
{background-position: 0px -256px;}


ul.menu-topik span
{display: none;}
Записан
*

artemkozlov

  • Осваиваюсь на форуме
  • 23
  • 0 / 0
Re: Три состояния пункта меню!
« Ответ #4 : 11.05.2011, 08:19:45 »
У меня такое ощущение, что я неправильно обращаюсь к пункту меню.....
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Три состояния пункта меню!
« Ответ #5 : 11.05.2011, 08:40:56 »
Цитата: artemkozlov от 11.05.2011, 08:19:45
У меня такое ощущение, что я неправильно обращаюсь к пункту меню.....
Вполне возможно. Выложите в сеть сайт, посмотрим.
Записан
*

zmancer

  • Давно я тут
  • 519
  • 76 / 19
Re: Три состояния пункта меню!
« Ответ #6 : 11.05.2011, 11:28:22 »
Зачем вам в меню a:visited ? это посещенные ссылки
.item28 - это класс конкретного пункта меню
Что вы в итоге хотите получить обьясните?
для меню обычно делают
ul li a - ОБЫЧНОЕ СОСТОЯНИЕ
ul li a:hover - ПРИ НАВЕДЕНИИ
ul li.active a  - АКТИВНЫЙ ПУНКТ МЕНЮ
И ПОСЛЕ ЕСЛИ ВАМ НЕОБХОДИМО КОНКРЕТНО ДЛЯ ОПРЕДЕЛЕННОГО ПУНКТА МЕНЮ ПРОПИСАТЬ СТИЛИ
.item28, где 28 это id пункта меню
.item1
.item45
думаю принцип понятен
Записан
*

artemkozlov

  • Осваиваюсь на форуме
  • 23
  • 0 / 0
Re: Три состояния пункта меню!
« Ответ #7 : 11.05.2011, 14:20:21 »
Цитата: zmancer от 11.05.2011, 11:28:22
Зачем вам в меню a:visited ? это посещенные ссылки
.item28 - это класс конкретного пункта меню
Что вы в итоге хотите получить обьясните?
для меню обычно делают
ul li a - ОБЫЧНОЕ СОСТОЯНИЕ
ul li a:hover - ПРИ НАВЕДЕНИИ
ul li.active a  - АКТИВНЫЙ ПУНКТ МЕНЮ
И ПОСЛЕ ЕСЛИ ВАМ НЕОБХОДИМО КОНКРЕТНО ДЛЯ ОПРЕДЕЛЕННОГО ПУНКТА МЕНЮ ПРОПИСАТЬ СТИЛИ
.item28, где 28 это id пункта меню
.item1
.item45
думаю принцип понятен
Да a:visited мне и не нужен, я просто пытался применить хоть какой то псевдокласс, но пока не получается. А по поводу класса конкретного пункта меню, у меня вопрос, как в CSS обратиться не к конкретному id пункта меню, а к тому пункту меню которое будет первым, или вторым, или третьим в списке пунктов меню?
Записан
*

artemkozlov

  • Осваиваюсь на форуме
  • 23
  • 0 / 0
Re: Три состояния пункта меню!
« Ответ #8 : 11.05.2011, 17:28:17 »
Проблему решил, дело и в правду было в том, что я неправильно обращался к пункту меню.
Сделал так:
Код
ul.menu-topik li a
{float: left;
height: 128px;
background: url(../images/menu.png) no-repeat;
overflow: hidden;
word-wrap: break-word;
display: block;
}

ul.menu-topik span
{display: none;}


ul.menu-topik li.item28 a
{width: 119px;
background-position: 0px 0px;
}

ul.menu-topik li.item28 a:hover
{background-position: 0px -128px;}


ul.menu-topik li.item28.active a
{background-position: 0px -256px;}


Оказалось надо было немного подумать.....
Записан
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Три состояния пункта меню!
« Ответ #9 : 12.05.2011, 19:38:44 »
Цитата: artemkozlov от 11.05.2011, 17:28:17
Оказалось надо было немного подумать.....
Это самое интересное в работе ;)
Может в будущем пригодится небольшая заметка по оформлению пунктов меню.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

 Ответов: 4
Просмотров: 3445 		Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

 Ответов: 10
Просмотров: 2979 		Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

 Ответов: 1
Просмотров: 1464 		Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

 Ответов: 2
Просмотров: 1381 		Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

 Ответов: 2
Просмотров: 1628 		Последний ответ 20.07.2020, 11:18:44
от kuraev64