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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
js打造数组转json函数
Jan 14 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
用javascript实现倒计时效果
Feb 09 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 字符转义 注意事项
2009/05/27 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
VUE重点问题总结
2018/03/19 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python切片操作实例分析
2018/03/16 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
大学新生欢迎词
2014/01/10 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
个人作风建设总结
2014/10/23 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
golang中的空接口使用详解
2021/03/30 Python
MySQL创建索引需要了解的
2021/04/08 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis