模仿做的一个javascript导航（暂时只在IE6上测试）
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
font-size:medium;margin:0;padding:0;
}
body{
position:relative;
margin:0px;
font-size:100%;
}
#sidebar{
float:right;
background:#333333;
width:230px;
height:400px;
overflow:hidden;
margin-top:200px;
}
h2{
font-size:13px;
margin-left:15px;
color:#fff;
margin:10px 15px 5px;
}
ul{
padding:0px;
margin:0px;
width:200px;
}
#sidebar ul{
list-style:none;
line-height:20px;
text-align:left;
}
#sidebar li{
height:20px;
background:#EF297D;
margin-top:5px;
margin-left:12px;
padding-left:3px;
}
#sidebar a:link,a:visited,a:hover,a:active{
color:#fff;
font-size:12px;
text-decoration:none;
}
}
#side_pic{
margin-top:200px;
float:right;
}
#side_pic img{
border:none;
}
</style>
</head>
<body>
<div id="sidebar"><h2>sidebar</h2>
<ul>
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul></div>
<div id="side_pic"><a href="javascript:void(0)"><img src="http://www.andrewsellick.com/examples/sliding-side-bar/images/slide-button-active.gif" /></a></div>
<script type="text/javascript">
var tlink=document.getElementById("side_pic").childNodes[0];
tlink.attachEvent("onclick",show);
var c=400;
var d=230;
var a=0;
var b=0;
function show(){
if(c>0){
c=c-40;
d=d-23;
document.getElementById("sidebar").style.height=c;
document.getElementById("sidebar").style.width=d;
if(c>0||d>0){
setTimeout("show()",150);
}
else{
clearTimeout("show()",150);
a=0;
b=0;
c=0;
document.getElementById("sidebar").style.height=0;
document.getElementById("sidebar").style.width=0;
}
}
else{
a=a+40;
b=b+23;
document.getElementById("sidebar").style.height=a;
document.getElementById("sidebar").style.width=b;
if(a<400||b<230){
setTimeout("show()",150);
}
else{
document.getElementById("sidebar").style.height=400;
document.getElementById("sidebar").style.width=230;
clearTimeout("show()",150);
c=400;
d=230;
}
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
font-size:medium;margin:0;padding:0;
}
body{
position:relative;
margin:0px;
font-size:100%;
}
#sidebar{
float:right;
background:#333333;
width:230px;
height:400px;
overflow:hidden;
margin-top:200px;
}
h2{
font-size:13px;
margin-left:15px;
color:#fff;
margin:10px 15px 5px;
}
ul{
padding:0px;
margin:0px;
width:200px;
}
#sidebar ul{
list-style:none;
line-height:20px;
text-align:left;
}
#sidebar li{
height:20px;
background:#EF297D;
margin-top:5px;
margin-left:12px;
padding-left:3px;
}
#sidebar a:link,a:visited,a:hover,a:active{
color:#fff;
font-size:12px;
text-decoration:none;
}
}
#side_pic{
margin-top:200px;
float:right;
}
#side_pic img{
border:none;
}
</style>
</head>
<body>
<div id="sidebar"><h2>sidebar</h2>
<ul>
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul></div>
<div id="side_pic"><a href="javascript:void(0)"><img src="http://www.andrewsellick.com/examples/sliding-side-bar/images/slide-button-active.gif" /></a></div>
<script type="text/javascript">
var tlink=document.getElementById("side_pic").childNodes[0];
tlink.attachEvent("onclick",show);
var c=400;
var d=230;
var a=0;
var b=0;
function show(){
if(c>0){
c=c-40;
d=d-23;
document.getElementById("sidebar").style.height=c;
document.getElementById("sidebar").style.width=d;
if(c>0||d>0){
setTimeout("show()",150);
}
else{
clearTimeout("show()",150);
a=0;
b=0;
c=0;
document.getElementById("sidebar").style.height=0;
document.getElementById("sidebar").style.width=0;
}
}
else{
a=a+40;
b=b+23;
document.getElementById("sidebar").style.height=a;
document.getElementById("sidebar").style.width=b;
if(a<400||b<230){
setTimeout("show()",150);
}
else{
document.getElementById("sidebar").style.height=400;
document.getElementById("sidebar").style.width=230;
clearTimeout("show()",150);
c=400;
d=230;
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号