JS实现的左侧竖向滑动菜单效果代码


Posted in Javascript onOctober 19, 2015

本文实例讲述了JS实现的左侧竖向滑动菜单效果代码。分享给大家供大家参考,具体如下:

这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧。

运行效果截图如下:

JS实现的左侧竖向滑动菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>经过改造的左侧竖向滑动菜单</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>
<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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
js分页代码分享
Apr 28 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
原生js生成图片验证码
Oct 11 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 #Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 #Javascript
在JavaScript中如何解决用execCommand(
Oct 19 #Javascript
简单谈谈Javascript中类型的判断
Oct 19 #Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 #Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 #Javascript
Javascript中的数据类型之旅
Oct 18 #Javascript
You might like
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP反射机制用法实例
2014/08/28 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
js实现微信聊天效果
2020/08/09 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python requests.post带head和body的实例
2019/01/02 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python argparse模块应用实例解析
2019/11/15 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
小学生检讨书大全
2014/02/06 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
人力资源主管职责范本
2014/03/05 职场文书
业务员的岗位职责
2014/03/15 职场文书
政协会议宣传标语
2014/10/09 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
给老婆的道歉信
2015/01/20 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle