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

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18079

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案