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;}
.zi{ width:0px;
      height:0px;
	  float:left;}
.ziwai{ width:500px;
        height:152px;
		border:1px solid #F00;
		position:relative;
		top:51px;
		left:-502px;
		}
.se{ width:500px;
     height:50px;
	 text-align:center;
	 line-height:50px;
	 vertical-align:middle;
	 border-bottom:1px solid #F00;
	 }

</style>

  

<body>

       <div id="wai">
           <div class="zong" onmousemove="xian(‘yanse‘)" onmouseout="yin(‘yanse‘)">颜色</div>
               <div class="zi">
                 <div class="ziwai" id="ziwai" onmousemove="shi(this)" onmouseout="cang(this)">
                    <div class="se">红</div>
                    <div class="se">黄</div>
                    <div class="se">绿</div>
                 </div>
               </div>

     </div>

</body>
<script type="text/javascript">
function xian(yanse){
	var a = document.getElementById("ziwai");
	a.style.display = "block";
}

function yin(yanse){
	var b = document.getElementById("ziwai");
	b.style.display = "none";
}

function shi(c){
	c.style.display = "block";
}
function cang(d){
	d.style.display = "none";
}
</script>

  

时间: 06-18

JS例子(子菜单下拉)的相关文章

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal

新生入学--JS省市二级联动下拉框

在新生入学过程中,会添加自己的个人信息,如生源地或者家庭住址等.像这样的信息如果让学生自己输入可能会出现不规范的现象,我们做统计的时候很不方便,所以设计成下拉框选择的形式,这样存进数据库中的数据就都是规范的了. 籍贯的选择涉及到我们全国的34个省市等,而且选择了每个省之后要相应的知道这个省的市到县,这就用到了下拉框的联动.以前在ASP.NET中是用过的,当时是两个控件的联动从数据库中直接查数据,在JS中也是同样的道理. 联动效果如下图: 接着说说代码,用到了JavaScript和html以及一些

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

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

<p>TEST</p> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">// <![CDATA[ $(function(){ $(".content div").hide();

js例子

1.子菜单下拉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <