子菜单下拉

<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px}
.list{ width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family:微软雅黑; float:left}
.list:hover{ cursor:pointer; background-color:#63C; color:white}
.ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px}
.zi{ width:100px; height:100px; background-color:#6C3; display:none }
</style>

</head>

<body>

<div id="menu">
<div class=‘list‘ onmouseover="Show(‘z1‘)" onmouseout="YinCang()">首页</div>
<div class="ziwai" >
<div class="zi" id="z1"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z2‘)" onmouseout="YinCang()">产品介绍</div>
<div class="ziwai" >
<div class="zi" id="z2"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z3‘)" onmouseout="YinCang()">公司简介</div>
<div class="ziwai" >
<div class="zi" id="z3"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z4‘)" onmouseout="YinCang()">联系我们</div>
<div class="ziwai" >
<div class="zi" id="z4"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z5‘)" onmouseout="YinCang()">新闻动态</div>
<div class="ziwai" >
<div class="zi" id="z5"></div>
</div>
</div>

</body>
<script type="text/javascript">

function Show(id)
{
//让所有的子菜单隐藏
var attr = document.getElementsByClassName("zi");

for(var i=0; i<attr.length;i++)
{
attr[i].style.display = "none";
}

//让和该菜单关联的子菜单显示
document.getElementById(id).style.display = "block";
}

function YinCang()
{
var attr = document.getElementsByClassName("zi");

for(var i=0; i<attr.length;i++)
{
attr[i].style.display = "none";
}
}

</script>
</html>

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

子菜单下拉的相关文章

9月23日 子菜单下拉

<style type="text/css">*{ margin:0px auto; padding:0px}#menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px}.list{ width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; fon

JS例子（子菜单下拉）

<style type="text/css"> *{ margin:0px auto; padding:0px;} #wai{ width:1000px; height:50px; margin-top:100px;} .zong{ width:500px; height:50px; text-align:center; line-height:50px; vertical-align:middle; float:left; border:1px solid #F00;}

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

菜单下拉效果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

lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

打开includes\templates\lightinthebox\common\tpl_box_dropdown_categories_css.php 1.将大约23行代码 <ul id="menu_index_top"> <li> 改成 <ul id="menu_index_top"> <li id="litbBtna"> 2.在53行 menuToggle('litbBtn','mouseo

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

通用: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/

例子：侧面菜单下拉效果

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

实现菜单下拉小功能jQury

<p> </p> <ul class="nav"> <li><a>AAA</a></li> <li><a>BBB</a> <ul class="ziNav"> <li><a>aaa1</a></li> <li><a>aaa2</a></li>