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

本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下：

整个javascript代码共42行，其中主要函数Slide代码26行,可以改进哦！

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}




  顶条
  Logo
  导航条
  
    菜单
    

      功能栏1
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
    

      功能栏2
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
    

      功能栏3
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
    

      功能栏4
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
    

      功能栏5
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
    

      功能栏6
      
功能1
      
功能2
      
功能3
      
功能4
      
功能5
    
  
  内容区
  底条

希望本文所述对大家的javascript程序设计有所帮助。