例子：侧面菜单下拉效果
Posted 带你疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了例子：侧面菜单下拉效果相关的知识，希望对你有一定的参考价值。
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}
.zhu{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; background-color:#03C; color:white;}
.zi{ width:200px; display:none}
.list{ width:198px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-left:1px solid #999;border-right:1px solid #999;}
#z4{ border-bottom:1px solid #999;}
</style>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show(‘z1‘)">
首页
</div>
<div class="zi" id="z1">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z2‘)">
教务信息
</div>
<div class="zi" id="z2">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z3‘)">
下载专区
</div>
<div class="zi" id="z3">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z4‘)">
学员信息管理
</div>
<div class="zi" id="z4">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
</div>
<script type="text/javascript">
function Show(id)
{
var z = document.getElementById(id);
if(z.style.display=="block")
{
z.style.display = "none";
}
else
{
z.style.display = "block";
}
}
</script>
以上是关于例子：侧面菜单下拉效果的主要内容，如果未能解决你的问题，请参考以下文章
Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果