应用CSS和js做的单页可隐藏菜单栏
日期：2014-05-17 浏览次数：20651 次
使用CSS和js做的单页可隐藏菜单栏
用CSS和js做了一个单页的可隐藏左边栏，没有使用frameset和frame。简单了点，觉得有用的看看吧！
?
说明：
单击bar可以隐藏和展开左边栏，nav里面可以放横向菜单，left里面可以放树状资源列表，这样可以将菜单做成横向放在顶部，也可以做成多级菜单，鼠标移上去或者点击某个菜单展开。而左边用来放树状资源列表，节省空间。
?
?
?
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="test.css" /> <script type="text/javascript" src="test.js"></script> </head> <body> <div id="header"></div> <div id="nav"></div> <div id="main"> <div id="left"></div> <div id="bar" onclick="move()"> <img id="barimg" src="left.gif" /> </div> <div id="right"> <iframe id="iframe" name="iframe" width="100%" height="100%" frameborder="0"></iframe> </div> </div> </body> </html>
?
?
test.css
*{
margin:0px;
padding:0px;
}
#header{
width:960px;
height:70px;
background-color:red;
margin:0 auto;
}
#nav{
width:960px;
height:25px;
background-color:pink;
margin:0 auto;
}
#main{
width:960px;
height:500px;
background-color:blue;
margin:0 auto;
}
#left{
width:200px;
height:100%;
background-color:yellow;
float:left;
}
#bar{
width:8px;
height:100%;
background-color:green;
float:left;
cursor:pointer;
text-align:center;
}
#barimg{
margin-top:200px;
}
#right{
background-color:grey;
float:left;
width:752px;
height:100%;
}
?
test.js
function move()
{
var left = document.getElementById("left");
var img = document.getElementById("barimg");
var right = document.getElementById("right");
if(left.style.width == "0px"){
left.style.width = "200px";
img.src = "left.gif";
right.style.width = "752px";
}else{
left.style.width = "0px";
img.src = "right.gif";
right.style.width = "952px";
}
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
