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 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 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/03 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP Include文件实例讲解
2019/02/15 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python Grid使用和布局详解
2018/06/30 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python全栈知识点总结
2019/07/01 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
关于Java String的一道面试题
2013/09/29 面试题
企业厂长岗位职责
2013/12/17 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
vue动态绑定style样式
2022/04/20 Vue.js