Как сделать чтобы менялся background в раскрывающемся меню

T
На сайте с 28.02.2011
Offline
31
1232

Как сделать, чтобы менялся background в раскрывающемся меню. "+" когда меню закрыто и "-" когда меню раскрыто.

Есть раскрывающееся меню:

<div id="leftmenu"> <a href="#" class="lmenu">(сюда нужно поставить бекграунд плюс при закрытом меню и минус при раскрытом) Фото  ремонта квартир</a>
<div style="display:block; background-color: #e0e6ea;" id="menu1">
<a href="http://www.1.html" class="lmenu2">Комната</a>
<a href="http://www.2.html" class="lmenu2">Кухня</a>
<a href="http://www.3.html" class="lmenu2">Туалет</a></div>
</div>

Есть CSS:

a.lmenu {
font-size:12px;
font-weight:bold;
text-transform:uppercase;
padding:7px 7px 7px 5px;
display:block;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-image: url(images/plus.jpg);
width:218px;
text-align:left;
}

a.lmenu2 {
font-size:13px;
text-decoration:none;
display:block;
margin-left: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
background-position: left top;
font-weight: bold;
width:223px;
padding:10px 10px 7px 10px;
display:block;
margin-left: 20px;
background-color: #FFFFFF;
text-align:left;
}

Есть Javaskript:

/* jQuery */
jQuery(function($){

/* left menu animation */
/*$('a.lmenu:not(:last)').click(function (ev) {*/
$('#leftmenu a.lmenu[href=#]').click(function (ev) {
ev.preventDefault();

if ($(this).next().is(':visible')) {
$(this).next().slideUp('slow');
} else {
/* $(this).siblings('div').slideUp('slow');*/
$('#leftmenu').find('div:visible').slideUp('slow');
$(this).next().slideDown('slow');

}
});

/* first page tabs */
/* $("#tabs1 ul,#tabs2 ul,#tabs3 ul").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list).hide();
$(id).fadeIn();
return false;
}); */

$("#tabs1 ul,#tabs2 ul,#tabs3 ul").idTabs();
});

function callUrl(path) {
$.colorbox({href:path});
return false;
}

Что добавить в CSS и JS, чтобы менялся background (plus.jpg), "+" когда меню закрыто и "-" когда меню раскрыто.

Спасибо!

T
На сайте с 28.02.2011
Offline
31
#1

Дамы и господа, помогите в решении этого вопроса.

Спасибо!

Эгоист
На сайте с 12.09.2011
Offline
71
#2

plus.jpg это спрайт?

P.S.

хотя какой спрайт, он должен быть в расширении .png

T
На сайте с 28.02.2011
Offline
31
#3
Эгоист:
plus.jpg это спрайт?
P.S.
хотя какой спрайт, он должен быть в расширении .png

Файл plus.jpg написан для примера. Если удобно, могу написать plus.jpg, plus.png, plus.gif - Это не повлияет на решение проблемы.

Эгоист
На сайте с 12.09.2011
Offline
71
#4
Teotim:
Файл plus.jpg написан для примера. Если удобно, могу написать plus.jpg, plus.png, plus.gif - Это не повлияет на решение проблемы.

вы понимаете что такое спрайт?

это картинка с в которой много разных иконок которые двигают через background-position:

я и уточнял ибо не увидел больше у вас картинок

наведу вам пример который вам поможет

a.lmenu { background: url(images/plus.png) no-repeat; }
a.lmenu:active { background: url(images/minus.png) no-repeat; }
Desesperada
На сайте с 11.10.2010
Offline
77
#5

пишите через родительский

общий вид:

.div1 .div2 {стиль}
.div1:условие .div2 {стиль2}
Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
T
На сайте с 28.02.2011
Offline
31
#6
Эгоист:
вы понимаете что такое спрайт?
это картинка с в которой много разных иконок которые двигают через background-position:
я и уточнял ибо не увидел больше у вас картинок

наведу вам пример который вам поможет
a.lmenu { background: url(images/plus.png) no-repeat; }
a.lmenu:active { background: url(images/minus.png) no-repeat; }


Вставил в стили

a.lmenu { background: url(images/plus.png) no-repeat; }
a.lmenu:active { background: url(images/minus.png) no-repeat; }

При нажатии мышкой на ссылку в меню, бекграунд "plus.png" меняется на "minus.png", но только на момент нажатия мышкой, а как зафиксировать картинку "minus.png" пока открыто меню "lmenu"? а когда закрыто, то бекграундом становится "plus.png"?

T
На сайте с 28.02.2011
Offline
31
#7

Дорогие Вебмастера, что нужно прописать в скрипт и в css?

T
На сайте с 28.02.2011
Offline
31
#8

Неужели никто не знает?

T
На сайте с 28.02.2011
Offline
31
#9

А если в скрипт добавить, что-то вроде этого

<script>

$(document).ready(function() {

$('.logo1').click(function(){
$('#bg_up').removeClass('background2');
$('#bg_up').addClass('background1');
});
$('.logo2').click(function(){
$('#bg_up').removeClass('background1');
$('#bg_up').addClass('background2');
});

});

</script>

Как вы считаете?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий