hidden属性实现拉出式导航栏

来源：互联网发布：javascript模式 pdf 编辑：程序博客网时间：2024/04/30 10:49

使用hidden属性实现拉出式导航效果

<!doctype html>
<html>
<head>
<style>
#menubar{
width:200px;
}
#down1{
position:absolute;
top:10px;
left:190px;
width:8px;
height:9px;
border-style:outset;
border-radius:10px;
}
#menuitem1{
height:20px;
}
#menuitem2{
position:relative;
left:10px;
height:85px;
width:180px;
}
#menuitem3{
height:20px;
}
#down2{
position:relative;
top:0px;
left:115px;
width:8px;
height:9px;
border-style:outset;
border-radius:10px;
}
.bo{
border:1px outset;
border-radius:2px;
}
</style>
<script>
function yin(bar,ll){//将需要隐藏的元素id传递进来
bar.setAttribute("hidden","hidden");
ll.value="+";
}
function xian(bar,ll){
bar.removeAttribute("hidden");
ll.value="-";
}
</script>
<meta charset="UTF-8">
</head>
<body>
<div id="menubar">
<div id="menuitem1" class="bo" onmouseover="xian(menuitem2,down1)" onmouseout="yin(menuitem2,down1)">
用户管理<input type="text" readonly id="down1" value="+">
</div>
<div id="menuitem2" class="bo" hidden="hidden">
<p><a href="http://www.baidu.com">添加用户</a></p>
<p><a href="http://www.baidu.com">删除用户</a></p>
</div>
<div id="menuitem3" class="bo">
商品管理<input type="text" readonly id="down2" value="+">
</div>
</div>
</body>
</html>

阅读全文

0 0