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 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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
使用数据库保存session的方法
2006/10/09 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python实现针对中文排序的方法
2017/05/09 Python
python的socket编程入门
2018/01/29 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python 内置函数汇总详解
2019/09/16 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
幼师自我鉴定范文
2013/10/01 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS