Пример раскрывающегося меню
<script type="text/javascript">
// Скорость прокрутки (в пикселях)
var dbscroll=8;
var countitems=0;
function dbmove(id, new_size, p)
{
var litags=document.getElementById(id);
if (Math.abs(litags.offsetHeight-new_size)<=dbscroll)
{
litags.style.height=new_size+"px";
if (p==1)
{
divtag=litags.getElementsByTagName("div")[0];
divtag.style.backgroundPosition="left top";
}
return;
}
if (litags.offsetHeight<new_size)
litags.style.height=(litags.offsetHeight+dbscroll)+"px";
else
litags.style.height=(litags.offsetHeight-dbscroll)+"px";
setTimeout("dbmove('"+id+"', "+new_size+", "+p+")",15);
}
function builddbmenu()
{
var dbmenu=document.getElementById("dbmenu");
// Проход по всем элементам подменю
var ultags=dbmenu.getElementsByTagName("ul");
countitems=ultags.length;
for (i=0;i<ultags.length;i++)
{
// Указатель на li - элемент
litag=ultags[i].parentNode;
// Указатель на div - элемент
divtags=litag.getElementsByTagName("div");
if (divtags.length!=2) alert("Нарушена структура элемента меню");
divtag =(divtags[0].className!="liend")?divtags[0]:divtags[1];
divtagend=(divtags[0].className=="liend")?divtags[0]:divtags[1];
// Если подменю должно быть развернутым
if (litag.offsetHeight!=divtag.offsetHeight+divtagend.offsetHeight)
{
// Меняем скин
divtag.style.backgroundPosition="left bottom";
// Если это последний элемент
if (i==ultags.length-1)
document.getElementById("dbmenu_end").style.marginLeft="9px";
// Задать высоту
litag.style.height=(ultags[i].offsetHeight+divtag.offsetHeight+divtagend.offsetHeight)+"px";
} else
litag.style.height=divtag.offsetHeight+"px";
ultags[i].style.display="block";
litag.id="dbitem"+i;
// Создаем обработчик сворачивания/разворачивания элемента меню
divtag.onclick=function()
{
// Получить указатель на родительский элемент
litag=this.parentNode;
// Получить указатель на вложенныe элементы
ultag = litag.getElementsByTagName("ul")[0];
divtags = litag.getElementsByTagName("div");
divtag = (divtags[0].className!="liend")?divtags[0]:divtags[1];
divtagend = (divtags[0].className=="liend")?divtags[0]:divtags[1];
// Если высота родительского элемента равна высоте текущего элемента
if (this.offsetHeight==litag.offsetHeight)
{
// Элемент свернут
// Поменять скин
this.style.backgroundPosition="left bottom";
// Просчитать новый размер
new_size=divtag.offsetHeight+ultag.offsetHeight+divtagend.offsetHeight;
// Развернуть элемент
dbmove(litag.id,new_size,0);
// Если элемент последний
if (litag.id=="dbitem"+(countitems-1))
document.getElementById("dbmenu_end").style.marginLeft="9px";
}
else
{
// Элемент развернут
// Просчитать новый размер
new_size=this.offsetHeight;
// Свернуть элемент и поменять скин
dbmove(litag.id,new_size,1);
if (litag.id=="dbitem"+(countitems-1))
document.getElementById("dbmenu_end").style.marginLeft="14px";
}
}
}
// Показать меню
dbmenu=document.getElementById("dbmenu");
dbmenu.style.visibility="visible";
}
if (window.addEventListener)
window.addEventListener("load", builddbmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", builddbmenu)
</script>