javascript簡單實現(xiàn)滑動菜單效果的方法

更新時間：2015年07月27日 11:50:23 作者：I12fly

這篇文章主要介紹了javascript簡單實現(xiàn)滑動菜單效果的方法,實例分析了javascript通過對頁面元素與相關屬性的操作實現(xiàn)滑動菜單效果的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript簡單實現(xiàn)滑動菜單效果的方法。分享給大家供大家參考。具體如下：

整個javascript代碼共42行，其中主要函數(shù)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">內(nèi)容區(qū)</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程序設計有所幫助。

您可能感興趣的文章: