 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 仿163网盘网站的Js折叠菜单 |
| 来源：源码爱好者 更新时间：2011/6/21 0:03:00 阅读次数： 我要投稿 |
|
<html>
<head>
<title>折叠菜单，浏览文件夹</title>
<style>
html,body{height:100%; text-align:center; font-size:12px; color:#404040}
.wp_sidebar{background:fff;width:230px; margin:30px auto; text-align:left;}
.mo_wp{ background:#F7F7F7; margin-bottom:4px;border:1px solid #dfdfdf;}
.mo_title{ clear:both; color:#000; padding:6px 8px 6px 12px; cursor:pointer; }
.btn_all_tiny_img{background-image:url(http://www.codefans.net/jscss/demoimg201106/all_toolbar_tiny.gif); background-repeat:no-repeat;}
.mo_title_l{ display:block; margin-right:12px; width:auto;}
.mo_title_r1,.mo_title_r2{ display:block; float:right; margin-left:-12px; height:12px; width:12px; background-position:0px 0px;}
.mo_title_r2{background-position:-16px 0px;}
.tbl_inner_title,.mo_title{ background-repeat:repeat-x; background-image:url(http://www.codefans.net/jscss/demoimg201106/rx_2.gif); background-position:0 bottom; background-color:#fafafa;}
.mo_con{ clear:both; padding:8px 12px;color:#CC3300;}
</style>
<script type="text/javascript" language="javascript">
var webPan={
first:function(x){return x.firstChild||x.firstChild.nextSibling},
next:function(x){
do{x=x.nextSibling}while(x&&x.nodeType!=1);
return x;
},
set:function(x,_1,_2,_3){
this.next(x).style.display = _1;
this.first(x).className = this.first(x).className.replace(_2,_3);
},
init:function(){
var _this=this,_0='mo_title_r1',_1='mo_title_r2';
function $(o){return document.getElementById(o)};
this.win=[];
for (var i=0;i<arguments.length;++i ) {
var _i=this.first($(arguments[i]));
this.set(_i,'none',_0,_1);
_i.onclick=function (){
if(_this.prev&&_this.prev!=this){_this.set(_this.prev,'none',_0,_1)};
var _2=_this.first(this).className.indexOf(_1) == 0?['',_1,_0]:['none',_0,_1];
_this.set(this,_2[0],_2[1],_2[2]);
_this.prev=this;
}
}
}
};
window.onload = function (){
webPan.init('win1','win2','win3','win4')
}
</script>
</head>
<body>
<div class="wp_sidebar">
<div class="mo_wp" id="win1" >
<div class="mo_title">
<div class="mo_title_r1 btn_all_tiny_img"></div>
<div class="mo_title_l">空间信息</div>
</div>
<div class="mo_con">这家伙很懒，什么都没有留下。</div>
</div>
<div class="mo_wp" id="win2" >
<div class="mo_title">
<div class="mo_title_r1 btn_all_tiny_img"></div>
<div class="mo_title_l">个人信息</div>
</div>
<div class="mo_con">这家伙很懒，什么都没有留下。</div>
</div>
<div class="mo_wp" id="win3" >
<div class="mo_title">
<div class="mo_title_r1 btn_all_tiny_img"></div>
<div class="mo_title_l">系统广播</div>
</div>
<div class="mo_con">12:00 停机维护</div>
</div>
<div class="mo_wp" id="win4" >
<div class="mo_title">
<div class="mo_title_r1 btn_all_tiny_img"></div>
<div class="mo_title_l">版权声明</div>
</div>
<div class="mo_con">WebPan 1.0</div>
</div>
</div>
</div>
</body>
</html> |
| 特效说明： |
163网盘网站的折叠菜单，设计挺漂亮的网站竖向菜单，点击大分类后，小分类展开，在网上经常见到的一种菜单效果，相信你也会喜欢。 |
|
| 上一篇文章： 随鼠标移过动态放大的菜单导航下一篇文章： 自动切换的选项卡 |
|
|
|
注册 登录
