VPF::Графическое меню joomla - Форум программистов

zorro77786

Дата 10.7.2009, 11:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 10.7.2009

Репутация: нет
Всего: нет

Не получается, чтобы при щелчке по определенной картинке пункта меню joomla она заменялась на другую, причем для каждого пункта разную и оставалась такой пока я не щелкну на другой пункт. Может в скрипте дело.

Вот то что имею.

Код


sfHover = function() {
var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls.onmouseover=function() {
clearTimeout(this.timer);
if(this.className.indexOf("sfhover") == -1)
this.className+="sfhover";
}
sfEls.onmouseout=function() {
this.timer = setTimeout(sfHoverOut.bind(this), 20);
}
}
}
 
function sfHoverOut() {
clearTimeout(this.timer);
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}
 
if (window.attachEvent) window.attachEvent("onload", sfHover);

CSS

Код


#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 80%;
color: #395467;
padding: 60px 20px;
font-weight: bold;
text-transform: uppercase;

}
.menu-item0{
background: url(../../images/company.jpg) no-repeat center bottom;


}


.menu-item1{
background: url(../../images/production.jpg) no-repeat center bottom;


}
.menu-item2{
background: url(../../images/news.jpg) no-repeat center bottom;
}
.menu-item3{
background: url(../../images/partners.jpg) no-repeat center bottom;
}
.menu-item4{
background: url(../../images/publications.jpg) no-repeat center bottom;
}
.menu-item5{
background: url(../../images/questions.jpg) no-repeat center bottom;
}
.menu-item6{
background: url(../../images/contacts.jpg) no-repeat center bottom;
}
#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus {
color: #395467;
}

#ja-cssmenu li:hover a,
#ja-cssmenu li.sfhover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.havechild-activesfhover a {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF; 
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF;
}

Добавлено через 1 минуту и 19 секунд
Пример

Присоединённый файл ( Кол-во скачиваний: 5 )

menu_bg.png 74,26 Kb

Sardar

Дата 10.7.2009, 13:43 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 2
Всего: 317

Ставим и снимаем стили по onmouseover/onmouseout, о кликах в скрипте ничего не имеем.

Нет смысла в использовании "чистого JS". В joomla по дефолту по моему mootools идёт, значит где то так:

Код


window.addEvent('domready', function() {
    var curel = null;

    $$("#ja-cssmenu li").each(function(li) {
        li.addEvent('mousedown', function() {
            if(curel != null) curel.removeClass('sfhover');
            curel = this;
            this.addClass('sfhover');
        });
    });
});

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

zorro77786

Дата 3.8.2009, 13:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 10.7.2009

Репутация: нет
Всего: нет

Задачу решил. Пользуйтесь, пока добрый.

Код


.menu-item0{
background: url(../../images/company3.jpg) no-repeat center bottom;
}
.menu-item0:hover{
background: url(../../images/company.jpg) no-repeat center bottom;
}
.menu-item0.active{
background: url(../../images/company1.jpg) no-repeat center bottom;
}

.menu-item1{
background: url(../../images/production3.jpg) no-repeat center bottom;
}
.menu-item1:hover{
background: url(../../images/production.jpg) no-repeat center bottom;
}
.menu-item1.active{
background: url(../../images/production1.jpg) no-repeat center bottom;
}
.menu-item2{
background: url(../../images/news3.jpg) no-repeat center bottom;
}
.menu-item2:hover{
background: url(../../images/news.jpg) no-repeat center bottom;
}
.menu-item2.active{
background: url(../../images/news1.jpg) no-repeat center bottom;
}
.menu-item3{
background: url(../../images/publications3.jpg) no-repeat center bottom;
}
.menu-item3:hover{
background: url(../../images/publications.jpg) no-repeat center bottom;
}
.menu-item3.active{
background: url(../../images/publications1.jpg) no-repeat center bottom;
}
.menu-item4{
background: url(../../images/partners3.jpg) no-repeat center bottom;
}
.menu-item4:hover{
background: url(../../images/partners.jpg) no-repeat center bottom;
}
.menu-item4.active{
background: url(../../images/partners1.jpg) no-repeat center bottom;
}
.menu-item5{
background: url(../../images/questions3.jpg) no-repeat center bottom;
}
.menu-item5:hover{
background: url(../../images/questions.jpg) no-repeat center bottom;
}
.menu-item5.active{
background: url(../../images/questions1.jpg) no-repeat center bottom;
}
.menu-item6{
background: url(../../images/contacts3.jpg) no-repeat center bottom;
}
.menu-item6:hover{
background: url(../../images/contacts.jpg) no-repeat center bottom;
}
.menu-item6.active{
background: url(../../images/contacts1.jpg) no-repeat center bottom;
}


.menu-item0{ /*IE 7*/
background: url(../../images/company3.jpg) no-repeat center bottom;
}
.menu-item0:hover{ /*IE 7*/
background: url(../../images/company.jpg) no-repeat center bottom;
}
.menu-item0.focus{ /*IE 7*/
background: url(../../images/company1.jpg) no-repeat center bottom;
}

.menu-item1{ /*IE 7*/
background: url(../../images/production3.jpg) no-repeat center bottom;
}
.menu-item1:hover{ /*IE 7*/
background: url(../../images/production.jpg) no-repeat center bottom;
}
.menu-item1.focus{ /*IE 7*/
background: url(../../images/production1.jpg) no-repeat center bottom;
}

и скрипт

Код


sfHover = function() {
    var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; ++i) {
        sfEls[i].onmouseover=function() {
            clearTimeout(this.timer);
            if(this.className.indexOf("sfhover") == -1)
                this.className+="sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.timer = setTimeout(sfHoverOut.bind(this), 20);
        }
    }
}

function sfHoverOut() {
    clearTimeout(this.timer);
    this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »