网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
几个不错的自动收缩菜单导航效果
(编辑：jimmy 日期: 2026/4/30 浏览：
2
)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <style type="text/css"> div.xx{border:solid 1px;overflow:hidden;} div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} </style> </head> <body> <h5 onclick="toggle(this.parentNode)">伸缩效果</h5> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <h5 onclick="toggle(this.parentNode)">伸缩效果</h5> <p>sdf容</p> <p>sdf容</p> <p>sf容</p> <p>sfd容</p> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
一打开网页是收缩的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <style type="text/css"> div.xx{border:solid 1px;overflow:hidden;height:200px} div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} </style> </head> <body> <h5 onclick="toggle(this.parentNode);" >伸缩效果</h5> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <h5 onclick="toggle(this.parentNode)">伸缩效果</h5> <p>sdf容</p> <p>sdf容</p> <p>sf容</p> <p>sfd容</p> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：
<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> 4 ::动漫同人志:: :::日韩动漫::: :::港台动漫::: :::大陆动漫::: :::原创动漫::: :::友情链接::: 4 ::动漫音乐:: ::日韩动漫音乐:: ::港台动漫音乐:: ::大陆动漫音乐:: ::动漫音乐库:: :::网友点播::: 4 ::网页123:: ::网页基础:: ::网页进阶:: ::网页高手:: ::网页脚本:: ::网页理念:: ::网页源件:: 4 ::兄弟站点:: 征集中... 征集中... 征集中... 征集中... 征集中... 征集中... </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"> <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> </p> <p> </p> +栏目一 菜单一 菜单二 菜单三 +栏目二 菜单一 菜单二 菜单三 +栏目三 菜单一 菜单二 菜单三 +栏目四 菜单一 菜单二 菜单三 菜单三 菜单三 菜单三
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇：
用JavaScript实现的一个IP地址输入框
下一篇：
用javascript实现改善用户体验之alert提示效果
一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
首页
音乐
电影
资源