首页 > 代码库 > 例子:侧面菜单下拉效果

例子:侧面菜单下拉效果

<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>

例子:侧面菜单下拉效果