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

论坛 › 期权论坛 › 脚本

 niminba  2021-5-26 10:02  1735  0

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

一打开网页是收缩的

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

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

<meta content="text/html; charset=gb2312" http-equiv="Content-Type">   <title>Cattom</title>      <div id="Layer1" style="position:absolute; left:0px; top:350px; width:111px; height:102px; z-index:1">    <table cellpadding="0" cellspacing="0" style="border-top:1pt solid black" width="150">   <tr style="cursor:hand;"> <td class="menu_title" height="18" id="menuTitle1" onclick="menuChange (menu1,120,menuTitle1,arrow1);" onmouseout="this.className='menu_title'" onmouseover="this.className='menu_title2'"> <span><span id="arrow1"><font face="webdings">4</font></span> ::动漫同人志::</span></td></tr><tr><td><div class="sec_menu" id="menu1" style="width:150;height:0; filter:alpha(Opacity=0);display:none;"> <table align="center" cellpadding="0" cellspacing="0" style="position:relative;top:10px;" width="135"> <tr>               <td height="20"><a href="https://www.jb51.net/article/rhdm.htm">:::日韩动漫:::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/gtdm.htm">:::港台动漫:::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/dldm.htm">:::大陆动漫:::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/ycdm.htm">:::原创动漫:::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/yqlj.htm">:::友情链接:::</a></td>             </tr> </table></div></td></tr></table> <table cellpadding="0" cellspacing="0" style="border-top:1pt solid black" width="150">   <tr style="cursor:hand;"> <td class="menu_title" height="18" id="menuTitle2" onclick="menuChange (menu2,120,menuTitle2,arrow2);" onmouseout="this.className='menu_title'" onmouseover="this.className='menu_title2'"> <span><span id="arrow2"><font face="webdings">4</font></span> ::动漫音乐::</span></td></tr><tr><td><div class="sec_menu" id="menu2" style="width:150;height:0; filter:alpha(Opacity=0);display:none;"> <table align="center" cellpadding="0" cellspacing="0" style="position:relative;top:10px;" width="135"> <tr>               <td height="20"><a href="https://www.jb51.net/article/rhdmyy.htm">::日韩动漫音乐::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/gtdmyy.htm">::港台动漫音乐::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/dldmyy.htm">::大陆动漫音乐::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/dmyyk.htm">::动漫音乐库::</a></td>             </tr> <tr>               <td height="20"><a href="https://www.jb51.net/article/wydb.htm">:::网友点播:::</a></td>             </tr> </table></div></td></tr></table> <table cellpadding="0" cellspacing="0" style="border-top:1pt solid black; border-bottom:1pt solid black;" width="150">   <tr style="cursor:hand;"><td class="menu_title" height="18" id="menuTitle3" onclick="menuChange(menu3,140,menuTitle3,arrow3);" onmouseout="this.className='menu_title'" onmouseover="this.className='menu_title2'"> <span><span id="arrow3"><font face="webdings">4</font></span> ::网页123::</span></td></tr><tr><td> <div class="sec_menu" id="menu3" style="width:150;height:0; filter:alpha(Opacity=0); display:none;"> <table align="center" cellpadding="0" cellspacing="0" style="position:relative; top:10px;" width="135"> <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" style="border-top:1pt solid black; border-bottom:1pt solid black;" width="150">   <tr style="cursor:hand;"><td class="menu_title" height="18" id="menuTitle4" onclick="menuChange(menu4,140,menuTitle4,arrow4);" onmouseout="this.className='menu_title'" onmouseover="this.className='menu_title2'"> <span><span id="arrow4"><font face="webdings">4</font></span> ::兄弟站点::</span></td></tr><tr><td> <div class="sec_menu" id="menu4" style="width:150;height:0; filter:alpha(Opacity=0); display:none;"> <table align="center" cellpadding="0" cellspacing="0" style="position:relative; top:10px;" width="135"> <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>

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

<title>tree menu by jiarry</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type">     <p>&nbsp;</p> <p>&nbsp;</p> <div onclick="showhide_obj(title1,icon1)" style="line-height:25px;"><font id="icon1">+</font>栏目一</div> <div id="title1" style="background-color:#fffff3;line-height:22px;display:none;"> <span id="menu1_1" onclick="show_this(select1_1)" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='blue'"><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 onclick="showhide_obj(title2,icon2)" style="line-height:25px;"><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 onclick="showhide_obj(title3,icon3)" style="line-height:25px;"><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 onclick="showhide_obj(title4,icon4)" style="line-height:25px;"><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需再刷新一下页面才能执行]

回复

分享到 :

0 人收藏

16级独孤

积分:1060120

帖子:212021

精华:0

+ 关注私信

期权论坛

期权论坛

期权网络科技版权所有: 关于我们; 联系我们; 加入我们; 反馈问题; 免责声明; 积分充值

统一社会信用代码: 积分规则; 网站地图; 爱文库; 下属网站

官方: 新浪微博; 微信公众号
◆

下载: 表情包; App下载

期权论坛

期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.