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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
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
PHP文件上传实例详解!!!
2007/01/02 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
vue.js的安装方法
2017/05/12 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
详解Python pygame安装过程笔记
2017/06/05 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
医药工作者的求职信范文
2013/09/21 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
阿凡达观后感
2015/06/10 职场文书
贫困证明书范文
2015/06/16 职场文书
投诉信范文
2015/07/02 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
原生JS实现分页
2022/04/19 Javascript