javascript簡單實現滑動菜單效果的方法

2024-05-06 16:23:48

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript簡單實現滑動菜單效果的方法,實例分析了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>