Как задействовать класс 'selected' для меню в Joomla 1.5?

[wd]

Здравствуйте.

Сделал меню с тремя позициями. Пример:

Код:

/* Home Button */
        #menu li.home{width:70px; height:60px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.home a.selected{background-position:0px -120px; color: #f57e00;}

Как сделать. что бы активировался класс selected когда я нахожусь в выбранном пункте меню?

Заранее благодарю за помощь.

[rusak]

В Joomla 1.5 выбранный пункт меню имеет id=current и class=active item id. Вот от этого и пишите CSS.

[wd]

Спасибо!

[wd]

Только что-то не получается... может поможете разобраться?

Я создал модуль c произвольным HTML, куда вписал следующее:

Код:

<ul id="menu">
                    <li class="home"><a href="home">главная</a></li>
                    <li class="about"><a href="#">о нас</a></li>
                    <li class="portfolio"><a href="#">портфолио</a></li>
                    <li class="services"><a href="#">услуги</a></li>
                    <li class="contact"><a href="kontakti">контакты</a></li>
</ul>

А в CSS выглядит так:

Код:

ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{
overflow: hidden;
display: inline;
float: left;
margin-right: 0px;
padding-bottom: 30px;
text-align: center;
line-height: 140px;
font-weight: bold;
}

#menu li a{
background-image: url('../images/sprite.png');
width:100%;
height:100%;
display:block;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration:none;
color: #000000;
font-style: normal;
}

/* Home Button */
#menu li.home{width:70px; height:60px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.home a.selected{background-position:0px -120px; color: #f57e00;}

/* About Button */
#menu li.about{width:70px; height:60px;}
#menu li.about a{background-position:-70px 0px;}
#menu li.about a:hover{background-position:-70px -60px; color: #f57e00;}
#menu li.about a.selected{background-position:-70px -1205px; color: #f57e00;}

И так далее по пунктам меню...

Что в этой ситуации и к чему присвоить?

[midav]

А зачем меню создавать через модуль произвольный HTML ? Чем не подходит стандартное меню ?

[midav]

И как Вы думаете , откуда в вашем коде появится класс "selected" ?

[wd]

Ну selected это просто по умолчанию написал. Ну и я так понимаю, что определённый класс или айди должна Joomla подсунуть в хтмл код... но вот как ей дать знать, что этот произвольный модуль содержит меню...

[wd]

А через произвольный HTML сделал потому, что меню в виде иконок (на спрайтах) с текстом под ним. Т.е. нужно что бы главная страница была иконкой "домик", страница "о нас" под другой соответствующей иконкой и т.д.
А как такую структуру реализовать через модуль стандартного меню - не знаю.

[midav]

Ну и я так понимаю, что определённый класс или айди должна Joomla подсунуть в хтмл код...

неправильно Вы понимаете .

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

Никак

как такую структуру реализовать через модуль стандартного меню

А чем она будет отличаться от вашей , названиями классов ?
Вы попробуйте , самый верный способ 
Создайте меню , опубликуйте модуль mod_mainmenu в нужной позиции , и посмотрите какой код модуль генерирует . Потом присвойте соответствующим пунктам меню , ваши стили .
Только не спрашивайте  как узнать какие классы присваиваются пунктам меню .

[Efanych]

Для каждого пункта меню (если стандартно выводить) присваивается item
Отсюда и пляшем .menu .item22 {}
активную ссылку можна выделить примерно так a:active или a#current или a.active

[wd]

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

Делал на примере первого пункта меню "главная", которая имеет id1 т.е. в выводимом коде так:

Код:

<div class="menu">
<ul class="menu"><li id="current" class="active item1"><a href="http://localhost/mysite5/"><span>Главная</span></a></li>

Делал а цсс:

Код:

/* Home Button */
#menu li.item1{width:70px; height:60px;}
#menu li.item1 a{background-position:0px 0px;}
#menu li.item1 a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.item1 a.active{background-position:0px -120px; color: #f57e00;}

ничего не выходит... наверное я что-то очень путаю и напрочь запутался в идентификаторах и стилях.

Ткните, пожалуйста, пальцем что не так... как  написать правильно CSS с этими item'ами?

[Efanych]

Вроде всё правильно, только
class="menu"
обозначается .menu, а не #menu
Ну и background-position
без самого background как-то безсмысленно.

[midav]

Код:

.menu li.item1 {...}

про background-position без background уже написали
еще по поводу

#menu li.item1 a.active

внимательнее смотрите какие классы чему присваиваются , класс active присваивается тегу li а не ссылке . надо как то так :

Код:

.menu li.item1.active a

 

[wd]

Всем огромное спасибо и плюсы! Наконец-то получилось! 

[wd]

Снова здравствуйте.

Пытаюсь реализовать эту же схему в Joomla 2.5 - не выходит. Может там что-то поменялось?

В Joomla 1.5 меню корректно отображалось и работало, CSS был такой:

Код:

.menuposition {
padding: 0px;
float: left;
position: absolute;
top: 40px;
left: 510px;
}


ul.menu{margin:0; padding:0; list-style:none; clear:both;}
.menu li{
overflow: hidden;
display: inline;
float: left;
margin-right: 0px;
padding-bottom: 30px;
text-align: center;
line-height: 140px;
font-weight: bold;
}

.menu li a{
background-image: url('../images/sprite.png');
width:100%;
height:100%;
display:block;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration:none;
color: #000000;
font-style: normal;
}

/* Home Button */
.menu li.item1{width:70px; height:60px;}
.menu li.item1 a{background-position:0px 0px;}
.menu li.item1 a:hover{background-position:0px -60px; color: #f57e00;}
.menu li.item1.active a{background-position:0px -120px; color: #f57e00;}

/* About Button */
.menu li.item6{width:70px; height:60px;}
.menu li.item6 a{background-position:-70px 0px;}
.menu li.item6 a:hover{background-position:-70px -60px; color: #f57e00;}
.menu li.item6.active a{background-position:-70px -120px; color: #f57e00;}

и так далее...

[wd]

Разобрался... в 2.5 с дефисом айтем пишется (item-1).