javascript简单实现滑动菜单效果的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下:

整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动菜单</title>
<style>
a,body,div,h1,h2,li,ul{
  margin:0;
  padding:0
}
a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;}
a:hover{color:#123;background-color:#789;font-weight:bold;}
body{
  font:12px/18px "Times New Roman",Times,"宋体",serif;
  text-align:center;
}
h1{
  height:100px;
  width:25px;
  position:absolute;
  top:-1px;
  left:123px;
  cursor:pointer;
  color:#89A;
  font-size:18px; 
  line-height:50px;
  background-color:#234;
}
h2{
  height:24px;
  font-size:12px;
  border-bottom:1px solid #4C6CB9;
  color:#BBB;
  font-weight:600;
  cursor:pointer;
}
li{height:25px;list-style:none}
#Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto}
#Top{height:30px;background-color:#DDD;border: 1px solid #999;}
#Logo{height:100px;background-color:#DDD;border: 1px solid #999;}
#Nav{height:30px;background-color:#DDD;border: 1px solid #999;}
#SideBar{
  position:fixed!important;
  position:absolute;
  top:200px;
  left:0px;
}
#SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px}
#Main{height:800px;background-color:#DDD;border: 1px solid #999;}
#Footer{height:60px;background-color:#DDD;border: 1px solid #999;}
.Extracted{width:0px;}
.Extrended{border:1px solid #555;background-color:#000;padding:1px}
</style>
</head>
<body>
<div id="Container">
  <div id="Top">顶条</div>
  <div id="Logo">Logo</div>
  <div id="Nav">导航条</div>
  <div id="SideBar" class="Extrended">
    <h1>菜单</h1>
    <ul>
      <h2>功能栏1</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2>功能栏2</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2>功能栏3</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2>功能栏4</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2>功能栏5</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2>功能栏6</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
  </div>
  <div id="Main">内容区</div>
  <div id="Footer">底条</div>
</div>
<script type="text/javascript">
function $(e){return document.getElementById(e)}
function Slide(Element,Mod){
  var LongthMax,LongthMin,Property,Count=25,Accum,ID,Dlt,DltDlt;
  if(Mod){
    Property='left';
    LongthMax=0;
    LongthMin=-124;
  }
  else{
    Property='height';
    LongthMax=Element.children.length*25;
    LongthMin=25;
  }
  DltDlt=(LongthMax-LongthMin)/(Count*5);
  if(Element.style[Property]==LongthMax+'px')DltDlt=-DltDlt;
  Accum=parseInt(Element.style[Property]);
  Dlt=7*DltDlt;
  ID=setInterval(function(){
    if(Count--){
      if(!(Count%5))Dlt-=DltDlt;
      Accum+=Dlt;
      Element.style[Property]=Math.floor(Accum)+'px';
      return
    }
    clearInterval(ID);
    Element.style[Property]=(DltDlt>0)? LongthMax+'px':LongthMin+'px';
  },20);
}
$('SideBar').style.left='0px';
$('SideBar').children[0].onclick=function(){
  Slide(this.parentNode,1);
};
(function(Menu,i,tmp){
  Menu=document.getElementsByTagName('ul');
  for(i=Menu.length;i--;){
    tmp=Menu[i];
    tmp.style.overflow='hidden';
    tmp.style.height='25px';
    tmp.children[0].onclick=function(){
      Slide(this.parentNode,0);
    };
  }
}());
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript判断IE版本型号
Jul 27 #Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 #Javascript
readonly和disabled属性的区别
Jul 26 #Javascript
javascript实现继承的简单实例
Jul 26 #Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 #Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 #Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
什么是.net的Remoting技术
2016/07/08 面试题
渡河少年教学反思
2014/02/12 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
道歉的话语大全
2015/05/12 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang