Всем здрасте.
Помогите плиз реализовать задумку.
Просто средствами сss не получаеться.
Собственно вот -
есть меню.
При клике на пункт меню ,он раскрываеться и выпадают подпункты.
При клике щераз оно закрываеться.
Это сделанно с помщью функции на java.
Так вот мне надо добавить еще один эфект к этому делу.
Чтобы при клике и раскрытии меню, менялась картинка заднего фона <li> menu 1 , так же у него чтобы убирался маркер списка ( но только у него).
При поворном клике пункт <li> menu1 закрывался и возвращался в первоначальное состояние. ( становилась бэграунд картинка прежняя и маркер на месте ).
вот есть код -
<html>
<head>
<link href="styles/catalog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
function allClose(){
var list = document.getElementById("menu_catalog").getElement sByTagName("ul");
for(var i=0;i<list.length;i++){
list[i].style.display = "none";
}
}
function openMenu(node){
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>
<styles>
#menu_catalog {
background:#81A192;
width:200px;
list-style-image: url(../img/rect_orange.jpg);
padding:0;
margin:0;
font-size: 10pt;
}
#menu_catalog li {
padding:3px;
margin-left: 20px;
}
#menu_catalog li a{
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none;
list-style-type:none;
display: block;
}
.sub_catalog {
padding:0;
margin:0;
list-style-image:none;
margin-left: 5px;
}
.sub_catalog li{
border:0;
color:#fff;
list-style-image: url(../img/catalog_dot.jpg);
margin-left: 15px;
}
</styles>
</head>
<body onload="allClose()">
<ul id="menu_catalog">
<li><a href="#" onclick="openMenu(this);return false">Menu 1</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#" onclick="openMenu(this);return false" >Menu 2</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#" onclick="openMenu(this);return false" >Menu 3</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
</body>
</html>
Спасибо!
