JS+CSS实现经典的左侧竖向滑动菜单效果


Posted in Javascript onSeptember 23, 2015

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

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

运行效果截图如下:

JS+CSS实现经典的左侧竖向滑动菜单效果

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 #Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 #Javascript
jQuery Validate验证框架经典大全
Sep 23 #Javascript
Javascript实现的简单右键菜单类
Sep 23 #Javascript
js实现无限级树形导航列表效果代码
Sep 23 #Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 #Javascript
JS实现3D图片旋转展示效果代码
Sep 22 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php静态文件生成类实例分析
2015/01/03 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
vue下跨域设置的相关介绍
2017/08/26 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
详解Node.js中的Async和Await函数
2018/02/22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python实现UDP协议下的文件传输
2020/03/20 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
安全生产管理合理化建议书
2014/03/12 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
美术教师个人总结
2015/02/06 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript