| |
|
|
| | Здравствуйте Уважаемое сообщество ни подскажете как при помощи Java Script сделать вертикальное раздвигающееся меню. Для меню есть пункт и подпункты, как только пользователь кликает мышью по пункту оно раздвигается на подпункты. В начале как только страница загружена все подпункты свернуты. Ни модскажете как такое создать. | |
| |
|
|
|
| |
|
|
| |
для: elenaki
(20.01.2009 в 12:36)
| | | Вы ни скажете, если использовать такой код
<!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>Untitled Document</title>
<script type="text/javascript">
function menu_in(id, height){
id_ = id;
height_ = height;
he = parseInt(document.getElementById(id_).style.height);
if(he < height){
show_in();
}else{
close_in();
}
}
function show_in(){
he += 5;
document.getElementById(id_).style.height = he + 'px';
if(he < height_ + 5){
setTimeout('show_in()', 15);
}
}
function close_in(){
he -= 5;
document.getElementById(id_).style.height = he + 'px';
if (he > 0){
setTimeout('close_in()', 15);
}
}
</script>
</head>
<body>
<a href="#" onclick="menu_in('menus1', 120);">menus1</a> <br />
<div id="menus1" style="width:170px; height:0px; background-color: #99CCFF; overflow:hidden;"> CPU и платформа<br />
Видеокарты<br />
HDD и накопители<br />
Комплектующие<br />
Мониторы<br />
Звук и видео на ПК</div>
<a href="#" onclick="menu_in('menus2', 80);">menus2</a> <br />
<div id="menus2" style="width:170px; height:0px; background-color:#00FF99; overflow:hidden;">
CPU и платформа<br />
Видеокарты<br />
HDD и накопители<br />
Комплектующие</div>
</body>
</html>
|
как мне увеличить расстояние между пунктами меню, и подпунктами. | |
| |
|
|
| |
|
|
| |
для: pautina
(20.01.2009 в 19:44)
| | | he += 5; | |
| |
|
|
| |
|
|
| |
для: elenaki
(20.01.2009 в 20:32)
| | | Значение менял высота между пунктами и подпунктами не изменилась. | |
| |
|
|
| |
|
|
| |
для: pautina
(21.01.2009 в 09:48)
| | | увеличьте расстояние между строк в диве
(style="width:170px; height:0px; background-color: 99CCFF; overflow:hidden; line-height:50px;")
а самому диву дайте нужную высоту (onclick="menu_in('menus1', 120);") кстати, это очень
неудобно, что высота выпадающего дива забита изначально. при добавлении пунктов в
подменю, придется заново рассчитывать высоту и менять ее при вызове функции. лучше
динамически вычислять высоту дива. как - пока не могу сказать, но думаю, это возможно. | |
| |
|
|
| |
|
|
| |
для: pautina
(20.01.2009 в 12:08)
| | | Усё.. взгяд замылился. Этот вариант лучше.
Что там надо было раздвинуть?
<!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 style="width:170px; border:#000000 1px solid;" id="mmm" onmouseover="menu_in('mmm');"> <a href="#">Новости1</a>
<div style="background-color:#99CCFF;">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>
<br />
<br />
<div style="width:170px; border:#000000 1px solid;" id="nnn" onmouseover="menu_in('nnn');"> <a href="#">Новости2</a>
<div style="background-color:#99CCFF;">sdgsdfgdfgdsf sd <a href="#">ertg</a> wer wrt qwwr rwq fg sdfg fasd fdg asdf aw wwert qwert qwt w4 t4t</div>
<a href="#">Форум2</a>
<div style="background-color:#FFFF99;">45t45 345 4y hryjt yjher hery eryjer yj eryj eryj eryjhrw therjhwr hwrh</div>
<a href="#">Объявления2</a>
<div style="background-color:#99FFCC;">45t45 345 4y hryjt yjher hery eryjer yj eryj eryj </div>
</div>
<script type="text/javascript">
visota('nnn');
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: mikha
(21.01.2009 в 16:36)
| | | Первая мысль, кагда я увидел код : ПИ****! Интересно: Переходный XHTML! | |
| |
|
|
