例子：侧面菜单下拉效果

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

时间： 2024-10-07 19:29:17

例子：侧面菜单下拉效果的相关文章

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

通用:onclick 鼠标单击ondblclick 鼠标双击onmouseover 鼠标放上onmouseout 鼠标离开onmousemove 鼠标移动 表单:onchang 表单的值改变onblur 失去焦点onfocus 获得焦点onselect 选中 2.好友列表选中效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

菜单下拉效果demo记录

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px; } html,body{width:100%;height:100%;} .sub_item{display:none;height:

JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:200px; height:500

三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等

现在移动端设备横行,客户要求搞个时下比较流行的通过点击展开三级浮动菜单,效果如下: 首先是例排的做法,把菜单用静态html布局拼出来 <ul id="mcoMenuRoot"> <li id="lv1ItemMenu" class="lv1Item" status="off"> <div class="lv1RichItemContainer">一级菜单一</div

jquery 使用下拉效果的实现

解析xml内容 灵活应用 如果用xx是xml串 ,数据类型则为string 如果获取字符串的长度 用xx.length 如果xml有空的可,解析xml分开可以避免为空时报错 如: var retobj = $(xx).find("SinAssocationRes"); 然后 if(retobj) { retobj.each(function(){ var Ad=$(this).attr("Address"); var Po=$(this).attr("Po

很酷的导航条下拉效果

<style type="text/css"><!--.p9{ font-family: "宋体"; font-size: 9pt; }body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}UNKNOWN { TEXT-DECORATION: none}A:visited { TEXT-DECO

uiTableView 下拉效果

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:YES]; if (tableView.tag==20001) { //下拉效果  isPllDown默认为NO if (!isPullDown) { [UIView animateWithDuration:

CSS3--底部菜单上拉效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>底部菜单上拉效果</title>        <style>            *{                margin: 0;            }            .wrap{                width: 12