Форум

nataly · #1 (**permalink**) 25.03.2010, 20:24

Подскажите пожалуйста как сделать чтобы в этом меню можно было задавать с помощью ксс разный фон для одного и того же пункта меню в раскрытом и не раскрытом состоянии. Дело в том что я не очень хорошо знаю js перерыла уже гору сайтов а такого меню не нашла, переделать это тоже не получилось. Заранее огромное спасибо всем кто сможет помочь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title></title> 
</head> 
<body> 
<script type="text/javascript"> 
shag = 2; 
time = 15; 
arr_height_menu = new Array(); 
function visota(id_m){ 
    var arr_height = new Array(); 
    var obj = document.getElementById(id_m).getElementsByTagName('div'); 
    for(var i = 0, len = obj.length; i < len; i++){ 
        arr_height[i] = obj[i].offsetHeight; 
        obj[i].style.height = '0px'; 
        obj[i].style.overflow = 'hidden'; 
    } 
    arr_height_menu[id_m] = arr_height; 
} 
function menu_in(id_m){ 
    id_m_ = id_m; 
    obj_menu = document.getElementById(id_m_); 
    var obj = obj_menu.childNodes; 
    for(var i = 0, len = obj.length, n = 0; i < len; i++){ 
        if(obj[i].nodeName == 'A'){ 
            obj[i].onclick = new Function("function2("+n+")"); 
            n++; 
        } 
    } 
} 
function function2(n){ 
    height_menu = arr_height_menu[id_m_]; 
    height = height_menu[n]; 
    var obj = obj_menu.getElementsByTagName('div'); 
    obj_n = obj[n]; 
    he = parseInt(obj_n.style.height); 
    if(he < height) show_in(); else close_in(); 
} 
function show_in(){ 
    he += shag; 
    obj_n.style.height = he + 'px'; 
    if(he < height) setTimeout('show_in()', time); 
    if(he > height) obj_n.style.height = height + 'px'; 
}   
function close_in(){ 
    he -= shag; 
    if(he < 0) he = 0; 
    if(he < shag) obj_n.style.height = '0px'; 
    obj_n.style.height = he + 'px'; 
    if(he > 0) setTimeout('close_in()', time); 
} 
</script> 
<div  id="mmm" onmouseover="menu_in('mmm');"> 
	 <a href="#" >Новости1</a> 
  	<div style="background:#fff url(Image/bg_center.png) repeat-y;height:30px;">sdgsdfgdfgdsf sd <a href="#">ertg</a> w</div> 

 	 <a href="#">Форум1</a> 
  	<div style="background-color:#FFFF99;">sdgsdfgdfgdsf sdfg sdfg fasd fdg as wtqw twtqdf aw wafwarg wgrweg </div> 
  	<a href="#">Объявления1</a> 
  	<div style="background-color:#99FFCC;">sdgs wrt wr tqd wrt qwrt qwfgdt qwr</div> 
	</div> 
<script type="text/javascript">  



visota('mmm'); 
</script> 

</script> 
</body> 
</html>

Aetae · #2 (**permalink**) 25.03.2010, 23:31

Заменить

if(he < height) show_in(); else close_in();

на

if(he < height) 
	{
	obj[n].previousSibling.previousSibling.style.backgroundColor="#f00";
	show_in();
	}
	else 
	{
	obj[n].previousSibling.previousSibling.style.backgroundColor="#0f0";
	close_in(); 
	}

Решение такое же кривое как и менющка, но чтоб сделать красивее, надо переписывать, а это лениво.
P.S. Если для каждого пункта свой, то можно вместо style через className.

nataly · #3 (**permalink**) 26.03.2010, 09:01

Спасибо большое, получилось !

nataly · #4 (**permalink**) 27.03.2010, 19:56

Почти получилось, но никак не получается сделать фон под ссылкой стандартного размера, а не размера текста ссылки.
Подскажите пожалуйста как это можно сделать?

Aetae · #5 (**permalink**) 27.03.2010, 20:24

Учите css. Ссылка inline элемент, размер можно задавать только block элементам.

Поместите в head:

<style type='text/css'> a {display:block;width:500px;height:100px;}</style>

Это повлияет на все ссылки, если не знаете как повлиять на конкретно ваши - учитесь).

nataly · #6 (**permalink**) 27.03.2010, 21:00

Спасибо!!! Просто спасли!

Форум

Справочник

Discord чат

Курсы javascript