几个不错的自动收缩菜单导航效果

程序员文章站 2022-06-12 13:30:03

runcode var mh = 30;//最小高度 var step = 1;//每次变化的px量 var ms = 10;//每隔多久循...

一打开网页是收缩的

慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

<title>tree menu by jiarry</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css"> 
span{ width:100px;height:25px;margin-left:15px;} 
font{font-weight:bold;} 
body,td{font-family:verdana, arial, helvetica, sans-serif; font-size:12px;color:#333333;} 
div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#d3f7fe ;width:120px;} 
pre{background-color:#fffff1; border:1px solid gray;color:blue;font-family:verdana;arial;padding:20px;} 
</style>
<p> </p> 
<p> </p> 
<div style="line-height:25px;" onclick="showhide_obj(title1,icon1)">
<font id="icon1">+</font>栏目一</div> 
<div id="title1" style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id="menu1_1" onmouseover="this.style.backgroundcolor='blue'" onmouseout="this.style.backgroundcolor=''" onclick="show_this(select1_1)"><font id="select1_1"></font>菜单一</span>
 
<span id="menu1_2" onclick="show_this(select1_2)"><font id="select1_2"></font>菜单二</span>
 
<span id="menu1_3" onclick="show_this(select1_3)"><font id="select1_3"></font>菜单三</span>
 
</div> 
<div style="line-height:25px;" onclick="showhide_obj(title2,icon2)">
<font id="icon2">+</font>栏目二</div> 
<div id="title2" style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id="menu2_1" onclick="show_this(select2_1)"><font id="select2_1"></font>菜单一</span>
 
<span id="menu2_2" onclick="show_this(select2_2)"><font id="select2_2"></font>菜单二</span>
 
<span id="menu2_3" onclick="show_this(select2_3)"><font id="select2_3"></font>菜单三</span>
 
</div> 
<div style="line-height:25px;" onclick="showhide_obj(title3,icon3)">
<font id="icon3">+</font>栏目三</div> 
<div id="title3" style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id="menu3_1" onclick="show_this(select3_1)"><font id="select3_1"></font>菜单一</span>
 
<span id="menu3_2" onclick="show_this(select3_2)"><font id="select3_2"></font>菜单二</span>
 
<span id="menu3_3" onclick="show_this(select3_3)"><font id="select3_3"></font>菜单三</span>
 
</div> 
<div style="line-height:25px;" onclick="showhide_obj(title4,icon4)">
<font id="icon4">+</font>栏目四</div> 
<div id="title4" style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id="menu4_1" onclick="show_this(select4_1)"><font id="select4_1"></font>菜单一</span>
 
<span id="menu4_2" onclick="show_this(select4_2)"><font id="select4_2"></font>菜单二</span>
 
<span id="menu4_3" onclick="show_this(select4_3)"><font id="select4_3"></font>菜单三</span>
 
<span id="menu4_4" onclick="show_this(select4_4)"><font id="select4_4"></font>菜单三</span>
 
<span id="menu4_5" onclick="show_this(select4_5)"><font id="select4_5"></font>菜单三</span>
 
<span id="menu4_6" onclick="show_this(select4_6)"><font id="select4_6"></font>菜单三</span>
 
</div> 
<div> 
<span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span> 
</div>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

上一篇： Android自定义收音机搜台控件RadioRulerView

下一篇： Android中XML的基本操作（增、删、改、查）

几个不错的自动收缩菜单导航效果