Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2010, 20:24
Новичок на форуме
Отправить личное сообщение для nataly Посмотреть профиль Найти все сообщения от nataly
 
Регистрация: 25.03.2010
Сообщений: 4

Выезжающее вертикальное меню
Подскажите пожалуйста как сделать чтобы в этом меню можно было задавать с помощью ксс разный фон для одного и того же пункта меню в раскрытом и не раскрытом состоянии. Дело в том что я не очень хорошо знаю 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>
Ответить с цитированием
  #2 (permalink)  
Старый 25.03.2010, 23:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Заменить
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.

Последний раз редактировалось Aetae, 26.03.2010 в 00:38.
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2010, 09:01
Новичок на форуме
Отправить личное сообщение для nataly Посмотреть профиль Найти все сообщения от nataly
 
Регистрация: 25.03.2010
Сообщений: 4

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

Последний раз редактировалось nataly, 26.03.2010 в 09:08.
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2010, 19:56
Новичок на форуме
Отправить личное сообщение для nataly Посмотреть профиль Найти все сообщения от nataly
 
Регистрация: 25.03.2010
Сообщений: 4

Почти получилось, но никак не получается сделать фон под ссылкой стандартного размера, а не размера текста ссылки.
Подскажите пожалуйста как это можно сделать?
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2010, 20:24
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

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

Поместите в head:
<style type='text/css'> a {display:block;width:500px;height:100px;}</style>


Это повлияет на все ссылки, если не знаете как повлиять на конкретно ваши - учитесь).
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2010, 21:00
Новичок на форуме
Отправить личное сообщение для nataly Посмотреть профиль Найти все сообщения от nataly
 
Регистрация: 25.03.2010
Сообщений: 4

Спасибо!!! Просто спасли!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Меню выезжающее слева при подведении курсора к левой части экрана Артём Тарасов Общие вопросы Javascript 6 25.02.2009 14:18