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 跨域访问问题解决方法
Dec 02 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
Node.js编码规范
Jul 14 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
js严格模式总结(分享)
Aug 22 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
JavaScript Tab菜单实现过程解析
May 13 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
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
github配置使用指南
2014/11/18 Python
python简单实现刷新智联简历
2016/03/30 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
北京SQL新华信咨询
2016/09/30 面试题
爱情保证书大全
2014/04/29 职场文书
个人党性锻炼总结
2015/03/05 职场文书
撤诉状格式范本
2015/05/19 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技