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 相关文章推荐
jquery实现加载等待效果示例
Sep 25 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
angular 未登录状态拦截路由跳转的方法
Oct 09 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
php URL编码解码函数代码
2009/03/10 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
小议Javascript中的this指针
2010/03/18 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
微信小程序实现星级评价效果
2018/12/28 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python操作mongodb的9个步骤
2018/06/04 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
什么是Python中的匿名函数
2020/06/02 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
开学典礼策划方案
2014/05/28 职场文书
道路施工安全责任书
2014/07/24 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书