幾個不錯的自動收縮菜單導航效果

更新時間：2007年10月26日 23:26:09 作者：

一打開網頁是收縮的

慢慢展開菜單的效果，以前早就有人做過，給個時間函數。也算不上什么極限：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body{         margin:0px;         font:normal 12px 宋體;         background: #999999; } table{border:0px;} td{font:normal 12px 宋體; } img{vertical-align:middle; border:0px;} .sec_menu{border-left:1px solid #808080; border-right:1px solid #808080;  border-bottom:1px solid #808080; overflow:hidden; background:#FFCC99;} .menu_title{background-color: #CC6600} .menu_title span{color:#FFFFFF;} .menu_title2{background-color: #FF9900} .menu_title2 span{color:#C8C8C8; } .showtitle{position:relative; top:-2px; left:-6px; border:1pt solid #C3D4E7; z-index:0; height:26; background-color: #0080C0; padding-top:5; padding-left:5} .alp{FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5, finishx=250,finishy=85} .txt1{font-size:9pt; color:#CCCCCC;} </style>  <title>Cattom</title> <link href="link.css" rel="stylesheet" type="text/css"> </head>  <body>  <div   class="vvxyksv9kd"   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   id="vvxyksv9kd"   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">:::原創(chuàng)動漫:::</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   id="vvxyksv9kd"   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   id="vvxyksv9kd"   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   id="vvxyksv9kd"   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需再刷新一下頁面才能執(zhí)行]

<!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">  <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> </head> <body> <p>&nbsp;</p> <p>&nbsp;</p> <div style="line-height:25px;" onClick="showhide_obj(title1,icon1)"><font id='icon1'>+</font>欄目一</div> <div   class="vvxyksv9kd"   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   class="vvxyksv9kd"   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   class="vvxyksv9kd"   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   class="vvxyksv9kd"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: