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

时间:2021-05-25

runcode 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;}

伸缩效果

内容

内容

内容

内容

伸缩效果

sdf容

sdf容

sf容

sfd容

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
一打开网页是收缩的
runcode 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;}
伸缩效果

内容

内容

内容

内容

伸缩效果

sdf容

sdf容

sf容

sfd容

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
慢慢展开菜单的效果,以前早就有人做过,给个时间函数。也算不上什么极限:
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;} Cattom 4 ::动漫同人志:: :::日韩动漫::: :::港台动漫::: :::大陆动漫::: :::原创动漫::: :::友情链接::: 4 ::动漫音乐:: ::日韩动漫音乐:: ::港台动漫音乐:: ::大陆动漫音乐:: ::动漫音乐库:: :::网友点播::: 4 ::网页123:: ::网页基础:: ::网页进阶:: ::网页高手:: ::网页脚本:: ::网页理念:: ::网页源件:: 4 ::兄弟站点:: 征集中... 征集中... 征集中... 征集中... 征集中... 征集中... [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
tree menu by jiarry 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;}

 

 

+栏目一 菜单一 菜单二 菜单三 +栏目二 菜单一 菜单二 菜单三 +栏目三 菜单一 菜单二 菜单三 +栏目四 菜单一 菜单二 菜单三 菜单三 菜单三 菜单三 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章