Жава скрипт выпадающего меню

Far06 · 18 ноября 2008

Встала необходимость иметь на сайте выпадающее меню, нашел подходящию менюшку, но не селен я в жаве, а потому прошу помощи.

В стилях я разобрался, а вот в самом скрипте есть вопрсы.

1. как сделать так что бы меню не опускалось в низ, а выезжало в право?

2. менюшка глючит в 7-м ослике! Проявляется это выезжанием белого поля за пределы меню в низ.

З.Ы. пероисточник не могу найти.

CSS

body {margin:25px; font:12px Arial, Helvetica, sans-serif}
.floatleft {float:left; padding-right:5px}
.ddheader {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.ddheader:hover {background:url(images/header_over.gif)}
.ddcontent {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200}
.ddinner {width:204px; border:2px solid #9ac1c9; border-top:none}
.ddinner ul {display:block; list-style:none; margin:0; padding:0; background:#eaf0f2}
.ddinner li {margin:0; padding:5px; cursor:pointer}
.ddinner li:hover {background:#d9e1e4}
.underline {border-bottom:1px solid #b9d6dc}

HTML

<!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=UTF-8" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
</head>
<div class="ddheader" id="tree-ddheader" onmouseover="ddMenu('tree',1)" onmouseout="ddMenu('tree',-1)">Пример меню</div>
<div class="ddcontent" id="tree-ddcontent" onmouseover="cancelHide('tree')" onmouseout="ddMenu('tree',-1)">
<div class="ddinner">
<ul>
<li class="underline">Раздел1</li>
<li class="underline">Раздел1</li>
<li class="underline">Раздел1</li>
<li class="underline">Раздел1</li>
<li class="underline">Раздел1</li>
<li>Раздел1</li>
</ul>
</div>
</div>
</div>
</body>
</html>

js

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,dir) {
var head = document.getElementById(id + '-ddheader');
var cont = document.getElementById(id + '-ddcontent');
clearInterval(cont.timer);
if(dir == 1) {
clearTimeout(head.timer);
if(cont.maxh && cont.maxh <= cont.offsetHeight) {
return;
} else if(!cont.maxh) {
cont.style.display = 'block';
cont.style.height = 'auto';
cont.maxh = cont.offsetHeight;
cont.style.height = '0px';
}
cont.timer = setInterval("ddSlide('" + id + "-ddcontent', 1)", DDTIMER);
} else {
head.timer = setTimeout('ddCollapse(\'' + id + '-ddcontent\')', 50);
}
}

// collapse the menu //
function ddCollapse(id) {
var cont = document.getElementById(id);
cont.timer = setInterval("ddSlide('" + id + "', -1)", DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown content //
function cancelHide(id) {
var head = document.getElementById(id + '-ddheader');
var cont = document.getElementById(id + '-ddcontent');
clearTimeout(head.timer);
clearInterval(cont.timer);
if(cont.offsetHeight < cont.maxh) {
cont.timer = setInterval("ddSlide('" + id + "-ddcontent', 1)", DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(id,dir) {
var cont = document.getElementById(id);
var currheight = cont.offsetHeight;
var dist;
if(dir == 1) {
dist = (Math.round((cont.maxh - currheight) / DDSPEED));
} else {
dist = (Math.round(currheight / DDSPEED));
}
if(dist <= 1) {
dist = 1;
}
cont.style.height = currheight + (dist * dir) + 'px';
cont.style.opacity = currheight / cont.maxh;
cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
if((currheight < 2 && dir != 1) || (currheight > (cont.maxh - 2) && dir == 1)) {
clearInterval(cont.timer);
}
}

Войти

Жава скрипт выпадающего меню

Рекомендованные сообщения

Far06 0

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению

Форум

Активность