像QQ一样的自动伸缩菜单(推荐)

像QQ一样的自动伸缩菜单（强烈推荐）！！！

代码一：

========================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>3</title>
<script language=JavaScript>
<!--
function turnit(ss,i_id)
{
if (ss.style.display=="none")    // 当ss.style.display为隐藏时
{ table1.style.display="none";  // 隐藏
table2.style.display="none";  // 隐藏
table3.style.display="none";  // 隐藏
image1.src="http://www.1studio.net/html/example/0054/close.gif";

// 显示路径为close.gif
image2.src="http://www.1studio.net/html/example/0054/close.gif";

// 显示路径为close.gif
image3.src="http://www.1studio.net/html/example/0054/close.gif";

// 显示路径为close.gif
ss.style.display=""; // 显示ss.style.display的对象
i_id.src="http://www.1studio.net/html/example/0054/open.gif";

// i_id的显示路径为oper.gif
}
else
{ ss.style.display="none"; // 隐藏
i_id.src="http://www.1studio.net/html/example/0054/close.gif";

//显示路径为close.gif
}
}
//-->
</script>
<style type="text/css">

</style></head>

<body>
<table bordercolor=#ffffff cellspacing=0 cellpadding=0 width=108 bordercolorlight=#0099ff

border=1 class=tabtop rules=rows>
<tr>
<td valign=center width=85 bgcolor=#0099ff height=22 class="white"

align="center">精品下载</td>
<td valign=center width=20 bgcolor=#0099ff height=22 align="middle"><img

style="CURSOR: hand" onClick=turnit(table1,image1);

src="http://www.1studio.net/html/example/0054/close.gif" name=image1></td>
          </tr>
          <tr>
            <td height="100" colspan=2 align="center" id=table1 style="DISPLAY: none">内容区

</td>
          </tr>
          <tr>
            <td valign=center width=85 bgcolor=#0099ff height=22 align="center"

class="white">免费申请</td>
<td valign=center width=20 bgcolor=#0099ff height=22 align="middle"><img

style="CURSOR: hand" onClick=turnit(table2,image2);

src="http://www.1studio.net/html/example/0054/close.gif" name=image2></td>
          </tr>
          <tr>
            <td height="100" colspan=2 align="center" id=table2 style="DISPLAY: none">内容区

</td>
          </tr>
          <tr>
            <td valign=center width=85 bgcolor=#0099ff height=22 align="center"

class="white">酷站源码</td>
<td valign=center width=20 bgcolor=#0099ff height=22 align="middle"><img

style="CURSOR: hand" onClick=turnit(table3,image3);

src="http://www.1studio.net/html/example/0054/close.gif" name=image3></td>
          </tr>
          <tr>
            <td height="100" colspan=2 align="center" class=right id=table3 style="DISPLAY:

none">内容区</td>
</tr>
</table>
</html>

========================================

用DIV做一个，代码二：

========================================

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>3</title>
<style>
body{font-family:"宋体";font-size:14.7px;margin:1% 20%;padding:12px 30px;}
div{cursor:hand;padding-left:12px;}
li{width:70px;border-left:1px solid black;padding:0;font-size:12px;margin:0 6px;list-style-type:none;border-bottom:1px dashed red;}
#main{margin:0}
</style>

if(aa.style.display=="none"){
d01.style.display="none";
d11.style.display="none";
d21.style.display="none";
d31.style.display="none";
aa.style.display="";
d00.src="http://www.1studio.net/html/example/0054/close.gif";
d10.src="http://www.1studio.net/html/example/0054/close.gif";
d20.src="http://www.1studio.net/html/example/0054/close.gif";
d30.src="http://www.1studio.net/html/example/0054/close.gif";
bb.src="http://www.1studio.net/html/example/0054/open.gif";
}
else
{
aa.style.display="none";
bb.src="http://www.1studio.net/html/example/0054/close.gif";
}
}
//-->
</script>
</head>
<body>
<div id="d0" onclick="menu(d01,d00)"><img name="d00" src="http://www.1studio.net/html/example/0054/close.gif"/> 链接0</div>
<div id="d01" style="display:none">
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li>
</div>
<div id="d1" onclick="menu(d11,d10)"><img name="d10"src="http://www.1studio.net/html/example/0054/close.gif"/> 链接一</div>
<div id="d11" style="display:none">
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li>
</div>
<div id="d2" onclick="menu(d21,d20)">
<img name="d20" src="http://www.1studio.net/html/example/0054/close.gif"/> 链接二</div>
<div id="d21" style="display:none">
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li> </div>
<div id="d3" onclick="menu(d31,d30)">
<img name="d30" src="http://www.1studio.net/html/example/0054/close.gif"/> 链接三</div>
<div id="d31" style="display:none">
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li>
</div>
</body>

========================================

看一下我的效果吧~！IE才行哦~代码三：

========================================

<html>
<head>
<title>自动伸缩菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<!--

a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}

//-->

</style>
<script language="JavaScript">

<!--

var top=50;

var left=0;

var bordercolor="#000000";

var bgcolorLight="#EFEFEF";

var bgcolorDark="#DFDFDF";

um1 = new Array("Menu1",

"Link1_um1", "http:///",

"Link2_um1", "http:///",

"Link3_um1", "http:///",

"Link4_um1", "http:///",

"Link5_um1", "http:///",

"Link6_um1", "http:///")

um2 = new Array("Menu2",

"Link1_um2", "http:///",

"Link2_um2", "http:///",

"Link3_um2", "http:///",

"Link4_um2", "http:///")

um3 = new Array("Menu3",

"Link1_um3", "http:///",

"Link2_um3", "http:///",

"Link3_um3", "http:///",

"Link4_um3", "http:///",

"Link5_um3", "http:///",

"Link6_um3", "http:///",

"Link7_um3", "http:///",

"Link8_um3", "http:///",

"Link9_um3", "http:///",

"Link10_um3", "http:///",

"Link11_um3", "http:///",

"Link12_um3", "http:///",

"Link13_um3", "http:///",

"Link14_um3", "http:///",

"Link15_um3", "http:///")

//-->

</script>
<script language="JavaScript">

<!--

function checkBrowser(){

this.ver=navigator.appVersion

this.dom=document.getElementById?1:0

this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

this.ie4=(document.all && !this.dom)?1:0;

this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;

this.mac=(this.ver.indexOf('Mac') > -1) ?1:0;

this.ope=(navigator.userAgent.indexOf('Opera')>-1);

this.ie=(this.ie6 || this.ie5 || this.ie4)

this.ns=(this.ns4 || this.ns5)

this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope)

this.nbw=(!this.bw)

return this}

bw=new checkBrowser()

var um1length = ((um1.length-1)/2);

var um2length = ((um2.length-1)/2);

var um3length = ((um3.length-1)/2);

var um1nr = 0;

var um1nr2 = 1;

var um1nr3 = 2;

var um2nr = 0;

var um2nr2 = 1;

var um2nr3 = 2;

var um3nr = 0;

var um3nr2 = 1;

var um3nr3 = 2;

init();

function init()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

height=document.body.offsetHeight-4;

document.write('<div id="menubg" style="position:absolute;top:0;left:'+left+';background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;height:'+height+';border-top-width:0px">')

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_ie()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um1" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">');

}

else if(bw.ns4){

height=innerHeight;

document.write('<layer id="menubg" position="absolute" top="0" left="'+left+'" bgcolor="'+bordercolor+'" width="127" height="'+(height)+'">')

document.write('</layer>')

document.write('<layer id="menubg2" position="absolute" top="0" left="'+(left+1)+'" bgcolor="'+bgcolorLight+'" width="125" height="'+(height-1)+'">')

document.write('</layer>')

document.write('<layer id="m" position="absolute" top="50" left="'+(left+1)+'">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_n()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um1" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

height=innerHeight-1;

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_n6()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um1" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else{

height=document.body.offsetHeight-4;

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init2();

}

function init2()

{

if(um1nr < um1length){

document.write('<tr><td align="center"><a href="'+um1[um1nr3]+'">'+um1[um1nr2]+'</a></td></tr>');

um1nr++;

um1nr2=um1nr2+2;

um1nr3=um1nr3+2;

init2();

}

else{

init3();

}

function init3()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

document.write('</table>')

document.write('</div>')

document.write('<div id="m1" style="position:absolute;top:20;left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_ie()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um2" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m1" position="absolute" top="21" left="0">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um2" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

document.write('</table>')

document.write('</div>')

document.write('<div id="m1" style="position:absolute;top:18;left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um2" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m1" style="position:absolute;top:'+((um1.length-1)/2*17.5+20)+';left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init4();

}

function init4()

{

if(um2nr < um2length){

document.write('<tr><td align="center"><a href="'+um2[um2nr3]+'">'+um2[um2nr2]+'</a></td></tr>');

um2nr++;

um2nr2=um2nr2+2;

um2nr3=um2nr3+2;

init4();

}

else{

init5();

}

function init5()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

document.write('</table>')

document.write('</div>')

document.write('<div id="m2" style="position:absolute;top:20;left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m3_ie()">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um3" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m2" position="absolute" top="21" left="0">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m3_n()">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um3" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

document.write('<tr><td align="center"><a href="'+um1[24]+'">'+um1[23]+'</a></td></tr>');

document.write('</table>')

document.write('</div>')

document.write('<div id="m1" style="position:absolute;top:18;left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m2" style="position:absolute;top:'+((um2.length-1)/2*17.5+20)+';left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init6();

}

function init6()

{

if(um3nr < um3length){

document.write('<tr><td align="center"><a href="'+um3[um3nr3]+'">'+um3[um3nr2]+'</a></td></tr>');

um3nr++;

um3nr2=um3nr2+2;

um3nr3=um3nr3+2;

init6();

}

else{

init7();

}

function init7()

{

if(bw.ie6 || bw.ie5 || bw.ie4){

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:'+((um3.length-1)/2*17.5+20+5)+';position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

document.write('</div></div></div></div>')

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m3" position="absolute" top="21" left="0" width="125" height="'+((um3.length-1)/2*20+20)+'" bgcolor="'+bgcolorLight+'">')

document.write('<layer bgcolor="'+bordercolor+'" width="125" height="1">')

document.write('</table></layer></table></layer></layer></layer></layer></layer>')

}

else if(bw.ns5){

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:'+((um3.length-1)/2*17.5+20+5)+';position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

document.write('</div></div></div></div>')

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:2;position:absolute;top:'+((um3.length-1)/2*17.5+20+5)+';left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

document.write('</div></div></div></div>')

}

var m1pos_ie=20, m1jump_ie=-5;

var m2pos_ie=20, m2jump_ie=-5;

var m3pos_ie=20, m3jump_ie=-5;

var m1pos_n6=18, m1jump_n6=-6;

var m2pos_n6=18, m2jump_n6=-6;

var m3pos_n6=18, m3jump_n6=-6;

var m1pos_n=21, m1jump_n=-5;

var m2pos_n=21, m2jump_n=-5;

var m3pos_n=21, m3jump_n=-5;

var time=5;

function do_m1_ie()

{

if(m2pos_ie>0)

{

m2jump_ie=-5;

if(m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

if(m3pos_ie>0)

{

m3jump_ie=-5;

if(m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}

m1jump_ie=-m1jump_ie;

if(m1pos_ie<=20 || m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

function m1_move_ie(witch)

{

document.all.m1.style.top=m1pos_ie;

m1pos_ie+=m1jump_ie;

if(m1pos_ie>15 && m1pos_ie<(um1.length-1)/2*17.5+20+5)

setTimeout("m1_move_ie()", time);

}

function do_m2_ie()

{

if(m1pos_ie>0)

{

m1jump_ie=-5;

if(m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

if(m3pos_ie>0)

{

m3jump_ie=-5;

if(m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}
m2jump_ie=-m2jump_ie;

if(m2pos_ie<=20 || m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

function m2_move_ie()

{

document.all.m2.style.top=m2pos_ie;

m2pos_ie+=m2jump_ie;

if(m2pos_ie>15 && m2pos_ie<(um2.length-1)/2*17.5+20+5)

setTimeout("m2_move_ie()", time);

}

function do_m3_ie()

{

if(m2pos_ie>0)

{

m2jump_ie=-5;

if(m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

if(m1pos_ie>0)

{

m1jump_ie=-5;

if(m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

m3jump_ie=-m3jump_ie;

if(m3pos_ie<=20 || m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}

function m3_move_ie()

{

document.all.m3.style.top=m3pos_ie;

m3pos_ie+=m3jump_ie;

if(m3pos_ie>15 && m3pos_ie<(um3.length-1)/2*17.5+20+5)

setTimeout("m3_move_ie()", time);

}

function do_m1_n()

{

if(m2pos_n>0)

{

m2jump_n=-5;

if(m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

if(m3pos_n>0)

{

m3jump_n=-5;

if(m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

m1jump_n=-m1jump_n;

if(m1pos_n<=21 || m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

function m1_move_n()

{

document.m.document.m1.top=m1pos_n;

m1pos_n+=m1jump_n;

if(m1pos_n>=20 && m1pos_n<(um1.length-1)/2*20+20)

setTimeout("m1_move_n()", time);

}

function do_m2_n()

{

if(m1pos_n>0)

{

m1jump_n=-5;

if(m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

if(m3pos_n>0)

{

m3jump_n=-5;

if(m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

m2jump_n=-m2jump_n;

if(m2pos_n<=21 || m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

function m2_move_n()

{

document.m.document.m1.document.m2.top=m2pos_n;

m2pos_n+=m2jump_n;

if(m2pos_n>20 && m2pos_n<(um2.length-1)/2*20+20)

setTimeout("m2_move_n()", time);

}

function do_m3_n()

{

if(m2pos_n>0)

{

m2jump_n=-5;

if(m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

if(m1pos_n>0)

{

m1jump_n=-5;

if(m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

m3jump_n=-m3jump_n;

if(m3pos_n<=21 || m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

function m3_move_n()

{

document.m.document.m1.document.m2.document.m3.top=m3pos_n;

m3pos_n+=m3jump_n;

if(m3pos_n>20 && m3pos_n<(um3.length-1)/2*20+20)

setTimeout("m3_move_n()", time);

}

function do_m1_n6()

{

if(m2pos_n6>0)

{

m2jump_n6=-6;

if(m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

if(m3pos_n6>0)

{

m3jump_n6=-6;

if(m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

m1jump_n6=-m1jump_n6;

if(m1pos_n6<=18 || m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

function m1_move_n6()

{

document.getElementById('m1').style.top=m1pos_n6;

m1pos_n6+=m1jump_n6;

if(m1pos_n6>15 && m1pos_n6<(um1.length-1)/2*17.5+20+5)

setTimeout("m1_move_n6()", time);

}

function do_m2_n6()

{

if(m1pos_n6>0)

{

m1jump_n6=-6;

if(m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

if(m3pos_n6>0)

{

m3jump_n6=-6;

if(m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

m2jump_n6=-m2jump_n6;

if(m2pos_n6<=18 || m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

function m2_move_n6()

{

document.getElementById('m2').style.top=m2pos_n6;

m2pos_n6+=m2jump_n6;

if(m2pos_n6>15 && m2pos_n6<(um2.length-1)/2*17.5+20+5)

setTimeout("m2_move_n6()", time);

}
function do_m3_n6()

{

if(m2pos_n6>0)

{

m2jump_n6=-6;

if(m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

if(m1pos_n6>0)

{

m1jump_n6=-6;

if(m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

m3jump_n6=-m3jump_n6;

if(m3pos_n6<=18 || m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

function m3_move_n6()

{

document.getElementById('m3').style.top=m3pos_n6;

m3pos_n6+=m3jump_n6;

if(m3pos_n6>15 && m3pos_n6<(um3.length-1)/2*17.5+20+5)

setTimeout("m3_move_n6()", time);

}

//-->

</script>

</body>
</html>

========================================

我想，这个可以会简单些的，这是程序员常做的伸缩菜单效果代码

代码四：

========================================

/* FAQ问题解答显示 */

<SCRIPT language=JavaScript>
function open_menu(menu,img){
    if(menu!=''){
        if(menu.style.display == 'none'){
            menu.style.display = '';
            //img.src='../http://pic1.blueidea.com/bbs/minus.gif';展开之后的图片
        }else{
            menu.style.display = 'none';
            //img.src='../http://pic1.blueidea.com/bbs/plus.gif';展开之前的图片
        }
    }
}
</SCRIPT>
/* 前台页面调用
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td><a href="javascript:open_menu(menu1)"><img src="http://pic1.blueidea.com/bbs/shopping_faq01.jpg" width="567" height="37" border="0"></a></td>
   </tr>
   <tr id="menu1" style="DISPLAY: none">
      <td>
                <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                  <td class="text">ABCDEF</td>
                  </tr>
                </table>
        </td>
   </tr>
</table>
*/

========================================

代码五：

========================================

<html>
<head>
<title>仿QQ导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{
text-align:center;
}
.titleStyle{
width:190px;
line-height:26px;
background-color:#008800;
color:#ffffff;
border-top:1px solid #FFFFFF;
font-size:12px;
}
.contentStyle{
width:180px;
height:340px;
background-color:#eeffee;
color:blue;
font-size:12px;
}
a{
width:178px;
height:20px;
background:#F9CDB2;
font:12px/20px tahoma;
display:block;
color:blue;
text-decoration:none;
border-top:1px solid #eeffee;
}
a:hover {
width:158px;
border-width:1px 10px;
border-style:solid;
border-color:#e57939;
}
</style>
<script language="javascript1.5" type="text/javascript">
<!--
var stepNo=10;
var runtimes=0;
var toItemIndex=3;
var onItemIndex=3;

function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0)
  moveUp();
else
  moveDown();
runtimes++;
if(runtimes>=stepNo){
  onItemIndex=toItemIndex;
  runtimes=0;
}
else
  setTimeout("changeItem(toItemIndex)",10);
}

function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
document.getElementById(i).style.top=parseInt(document.getElementById(i).style.top)-34;
}

function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
  document.getElementById(i).style.top=parseInt(document.getElementById(i).style.top)+34;
}
//-->
</script>
</head>
<body onload="changeItem(0)">
<div id=itemsLayer style=" overflow:hidden;position:absolute;border:1px solid #008800;left:50px;top:100px;width:180px;height:445px;">
<div id=0 style="position:relative;left:0;top:0;width:179px;">
  <div onclick=changeItem(0) class="titleStyle">00</div>
  <div class="contentStyle">
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
  </div>
</div>
<div id=1 style="position:relative;left:0;top:-340px;width:179px;">
  <div onclick=changeItem(1) class="titleStyle">01</div>
  <div class="contentStyle">
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
  </div>
</div>
<div id=2 style="position:relative;left:0;top:-680px;width:179px;">
  <div onclick=changeItem(2) class="titleStyle">02</div>
  <div class="contentStyle">
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
  </div>
</div>
<div id=3 style="position:relative;left:0;top:-1020px;width:179px;">
  <div onclick=changeItem(3) class="titleStyle">03</div>
  <div class="contentStyle">
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
     <a href="#">链接</a>
  </div>
</div>
</div>

</body>
</html>

========================================

代码六：（效果不错）

========================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#hor1 {
position:absolute;
left:320px;
top:20px;
width:220px;
height:20px;
z-index:1;
background-color: #999900;
}
#hor2 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:20px;
z-index:2;
background-color: #FFCC00;
}
#hor3 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:20px;
z-index:3;
background-color: #99CC00;
}
#board1 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:120px;
z-index:-100;
background-color: #333333;
visibility: hidden;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
body {
background-color: #666666;
}
#board2 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:120px;
z-index:-90;
background-color: #333333;
visibility: hidden;
}
#board3 {
position:absolute;
width:220px;
height:120px;
z-index:-80;
left: 320px;
top: 80px;
background-color: #333333;
visibility: hidden;
}
#hor4 {
position:absolute;
left:320px;
top:80px;
width:220px;
height:20px;
z-index:4;
background-color: #99CCCC;
}
#board4 {
position:absolute;
left:320px;
top:100px;
width:220px;
height:120px;
z-index:-70;
background-color: #333333;
visibility: hidden;
}

-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.男人的一半是女人——张贤亮。<br />
2.当代女人的男性化与男人的女性化。</div>
</body>
</html>

========================================

代码七：

========================================

<html>
<head>
<metdiv http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/javascript">
var curr=null;
var hs=new Array();
var ps=new Array();

}
#faq .D_title{
width:100%;
height:22px;
color:#7455E8;
font:400 12px/22px tahoma;
display:block;
margin-top:1px;
text-decoration:none;
background:#E6B18C url(images/hide.gif) no-repeat 5px center;
}

#faq .D_content{
width:100%;
height:250px;
font:12px/18px tahoma;
color:#F26D4D;
background:#E6E9FF;
margin:0;
}
</style>
</head>
<body onload="initFaq()">
<ul id="faq" style="background:#fff;">
<li>
<div class="D_title" href="#">　　2005-11-8　　　　　　星期一　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期二　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期三　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期四　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期五　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期六　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
<li>
  <div class="D_title" href="#">　　2005-11-8　　　　　　星期天　　　　　　　　　　　　　晴</div>
  <div class="D_content">
  </div>
</li>
</ul>
</body>
</html>

========================================

效果演示：

http://bbs.blueidea.com/thread-2247656-1-1.html

posted on 2006-10-31 09:38 老夫狂傲江湖阅读(630) 评论(0) 收藏举报