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设计模式 接口介绍
Jul 24 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
详解Node.js串行化流程控制
May 04 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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程序
2006/10/09 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP中常用的魔术方法
2017/04/28 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
protractor的安装与基本使用教程
2017/07/07 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python tkinter label 更新方法
2018/10/11 Python
python查看模块,对象的函数方法
2018/10/16 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
经理秘书岗位职责
2013/11/14 职场文书
综合办公室主任职责
2013/12/16 职场文书
开业庆典答谢词
2014/01/18 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
Oracle 多表查询基本语法实例
2022/04/18 Oracle
hive数据仓库新增字段方法
2022/06/25 数据库