网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
左侧竖向滑动菜单
作者:
朝贵
/ 发布于
2016/1/8
/
494
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS左侧竖向滑动菜单 - www.webdm.cn</title> <style type="text/css"> body{ margin:10px; padding:10px; } a:link { text-decoration: none;color: blue} a:active { text-decoration:blink} a:hover { text-decoration:underline;color: red} a:visited { text-decoration: none;color: green} body,td,div,span,li{ font-size:12px; } .title01,.title02{ color:#00b; font-weight:bold; } #DoorP{ width:200px; height:300px; padding:0px; background:#FFFCF2; } .title01{ width:100%; height:25px; background:#FFFCF2; cursor:pointer; } .title02{ width:100%; height:25px; background:#FFFCF2; cursor:pointer; } .content{ background:#FFFCF2; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px; } .curved { width:202px; } .curved .b1, .curved .b2, .curved .b3, .curved .b4 { font-size:1px; display:block; background:#FFFCF2; overflow: hidden; } .curved .b1, .curved .b2, .curved .b3 { height:1px; } .curved .b2, .curved .b3, .curved .b4 { background:#FFFCF2; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; } .curved .b1 { margin:0 4px; background:#C7BC98; } .curved .b2 { margin:0 2px; border-width:0 2px; } .curved .b3 { margin:0 1px; } .curved .b4 { height:2px; margin:0; } .curved .c1 { margin:0 5px; background:#C7BC98; } .curved .c2 { margin:0 3px; border-width:0 2px; } .curved .c3 { margin:0 2px; } .curved .c4 { height:2px; margin: 0 1px; } .curved .boxcontent { display:block; background:transparent; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; font-size:0.9em; text-align:justify; } </style> </head> <body> <div class="curved"> <b class="b1 c1"></b> <b class="b2 c2"></b> <b class="b3 c3"></b> <b class="b4 c4"></b> <div class="boxcontent"> <div id="DoorP"> <table> <tr> <td align="center"> 第一层信息 </td> </tr> </table> <div class="content" align="center"> <a href="#">二层</a><br/> 二层<br/> 二层<br/> </div> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <table> <tr> <td align="center"> 第二层信息 </td> </tr> </table> <div class="content" align="center"> <a href="#">二层</a><br/> 二层<br/> 二层<br/> </div> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <table> <tr> <td align="center"> 第三层信息 </td> </tr> </table> <div class="content" align="center"> <a href="#">二层</a><br/> 二层<br/> 二层<br/> </div> </div></div> <b class="b4 c4"></b> <b class="b3 c3"></b> <b class="b2 c2"></b> <b class="b1 c1"></b> <script type="text/javascript"> var open = 2; var openState = new Array(); var closeState = new Array(); var dH = 220; function $(id){ if(document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!"); } } function $tag(id,tagName){ return $(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 2) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; } else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("标题和内容数目不相同!"); } for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; } Ts[i].value = i; Ts[i].onclick = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); } closeMe(open,this.value); //openMe(this.value); open = this.value; } } function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; } </script> </body> </html>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
左侧竖向滑动菜单
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
.
实现对图片上传的接收
.
判断用户输入的是否为IP地址
朝贵
贡献的其它代码
(
17
)
.
定期自动备份mysql的shell
.
Javascript 获取验证码60秒倒计
.
判断100以内的质数
.
关闭浏览器的js
.
导入数据t_hive.txt到t_hive表
.
记录业务处理时间
.
给图片添加水印
.
链式风格的查询接口
.
关闭按钮变灰色
.
SD卡相关辅助类 SDCardUtils
地图
本站
我们
服务
版权
联系
回馈
博客