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 相关文章推荐
jQuery总体架构的理解分析
Mar 07 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
json数据处理及数据绑定
Jan 25 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
多php服务器实现多session并发运行
2006/10/09 PHP
php日历制作代码分享
2014/01/20 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
浅谈Vue.js
2017/03/02 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python合并文本文件示例
2014/02/07 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python3爬取各类天气信息
2018/02/24 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python求质数列表的例子
2019/11/24 Python
大学生求职简历的自我评价
2013/10/21 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
公司司机岗位职责
2014/02/07 职场文书
社会实践活动总结范文
2014/07/03 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
springboot实现string转json json里面带数组
2022/06/16 Java/Android
table不让td文字溢出操作方法
2022/12/24 HTML / CSS