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

所属分类：网络编程 / JavaScript 阅读数： 261

收藏 0赞 0分享

一打开网页是收缩的

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <title>Cattom</title> <link href="link.css" rel="stylesheet" type="text/css"> </head>  <body>  <div id="Layer1" style="position:absolute; left:0px; top:350px; width:111px; height:102px; z-index:1">    <table cellpadding=0 cellspacing=0 width=150 style="border-top:1pt solid black">   <tr style="cursor:hand;"> <td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"  id=menuTitle1 onclick="menuChange (menu1,120,menuTitle1,arrow1);"> <span><span id=arrow1><FONT face="webdings">4</span> ::动漫同人志::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0);display:none;" id=menu1> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr>               <td height=20><a href="rhdm.htm">:::日韩动漫:::</a></td>             </tr> <tr>               <td height=20><a href="gtdm.htm">:::港台动漫:::</a></td>             </tr> <tr>               <td height=20><a href="dldm.htm">:::大陆动漫:::</a></td>             </tr> <tr>               <td height=20><a href="ycdm.htm">:::原创动漫:::</a></td>             </tr> <tr>               <td height=20><a href="yqlj.htm">:::友情链接:::</a></td>             </tr> </table></div></td></tr></table> <table cellpadding=0 cellspacing=0 width=150 style="border-top:1pt solid black">   <tr style="cursor:hand;"> <td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"  id=menuTitle2 onclick="menuChange (menu2,120,menuTitle2,arrow2);"> <span><span id=arrow2><FONT face="webdings">4</span> ::动漫音乐::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0);display:none;" id=menu2> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr>               <td height=20><a href="rhdmyy.htm">::日韩动漫音乐::</a></td>             </tr> <tr>               <td height=20><a href="gtdmyy.htm">::港台动漫音乐::</a></td>             </tr> <tr>               <td height=20><a href="dldmyy.htm">::大陆动漫音乐::</a></td>             </tr> <tr>               <td height=20><a href="dmyyk.htm">::动漫音乐库::</a></td>             </tr> <tr>               <td height=20><a href="wydb.htm">:::网友点播:::</a></td>             </tr> </table></div></td></tr></table> <table cellpadding=0 cellspacing=0 width=150 style="border-top:1pt solid black; border-bottom:1pt solid black;">   <tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"   id=menuTitle3 onclick="menuChange(menu3,140,menuTitle3,arrow3);"> <span><span id=arrow3><FONT face="webdings">4</span> ::网页123::</span></td></tr><tr><td> <div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0); display:none;" id=menu3> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;"> <tr><td height=20>::网页基础::</td></tr> <tr><td height=20>::网页进阶::</td></tr> <tr><td height=20>::网页高手::</td></tr> <tr><td height=20>::网页脚本::</td></tr> <tr><td height=20>::网页理念::</td></tr> <tr><td height=20>::网页源件::</td></tr> </table></div></td></tr></table> <table cellpadding=0 cellspacing=0 width=150 style="border-top:1pt solid black; border-bottom:1pt solid black;">   <tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"   id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4,arrow4);"> <span><span id=arrow4><FONT face="webdings">4</span> ::兄弟站点::</span></td></tr><tr><td> <div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0); display:none;" id=menu4> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;"> <tr><td height=20>征集中...</td></tr> <tr><td height=20>征集中...</td></tr> <tr><td height=20>征集中...</td></tr> <tr><td height=20>征集中...</td></tr> <tr><td height=20>征集中...</td></tr> <tr><td height=20>征集中...</td></tr> </table></div></td></tr></table></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>tree menu by jiarry</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   </head> <body> <p>&nbsp;</p> <p>&nbsp;</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></font> <span id=menu1_2 onclick="show_this(select1_2)"><font id='select1_2'></font>菜单二</span></font> <span id=menu1_3 onclick="show_this(select1_3)"><font id='select1_3'></font>菜单三</span></font> </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></font> <span id=menu2_2 onclick="show_this(select2_2)"><font id='select2_2'></font>菜单二</span></font> <span id=menu2_3 onclick="show_this(select2_3)"><font id='select2_3'></font>菜单三</span></font> </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></font> <span id=menu3_2 onclick="show_this(select3_2)"><font id='select3_2'></font>菜单二</span></font> <span id=menu3_3 onclick="show_this(select3_3)"><font id='select3_3'></font>菜单三</span></font> </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></font> <span id=menu4_2 onclick="show_this(select4_2)"><font id='select4_2'></font>菜单二</span></font> <span id=menu4_3 onclick="show_this(select4_3)"><font id='select4_3'></font>菜单三</span></font> <span id=menu4_4 onclick="show_this(select4_4)"><font id='select4_4'></font>菜单三</span></font> <span id=menu4_5 onclick="show_this(select4_5)"><font id='select4_5'></font>菜单三</span></font> <span id=menu4_6 onclick="show_this(select4_6)"><font id='select4_6'></font>菜单三</span></font> </div> <div> <span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

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

纯javascript判断查询日期是否为有效日期

jquery实现的蓝色二级导航条效果代码

ajax如何实现页面局部跳转与结果返回

jQuery实现的类似淘宝网站搜索框样式代码分享

js实现的黑背景灰色二级导航菜单效果代码

jQuery仿360导航页图标拖动排序效果代码分享

javascript中SetInterval与setTimeout的定时器用法

jquery带下拉菜单和焦点图代码分享

jQuery实现的背景动态变化导航菜单效果

jquery+CSS实现的水平布局多级网页菜单效果

网络赚钱

站长故事