使用jQuery实现下拉导航菜单-CSDN博客

配合jquery简单完成 , 虽然有些丑的感觉.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉导航菜单实现</title>
<style>
	li{
		list-style-type: none;
		border: dashed 1px blue;
		background-color: cornflowerblue;
	}
	
	ul{
		padding: 0;
		margin: 0;
		display: inline-block;
	}
	
	.thisMenu{
		display:block;
		border: solid 1px #000;
		float: left;
		padding: 5px;
		margin: 5px;
	}
	a{
		text-decoration: none;
	}
	
	a:hover{
		color: orange;
	}
	
	#nav{
		background-color: rgba(115,184,65,0.5);
		border: solid 1px #000;
		height: 45px;
	}
</style>
</head>
<body>
	
<div id="nav">
<!--时间：2017-03-30
	<ul class="menu">一级菜单
		<li>
			<ul class="item">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>
-->

</div>

<script type="text/javascript" src="jquery/jquery-2.1.1.js" ></script>
<script>
/*Js代码说明:序号是相反的.*/

/*3、全局变量声明:*/
	var M=["首页","关于企业","新闻动态","产品展示","销售网络","联系我们"]
	var id=document.getElementById("nav"); //获取要写入的div;
	id.innerHTML=null;//个人毛病;
	
	
	function newMenu(menuName,itemName){ //方法封装处理;
		
		var itemAll="";
		for(var i=0;i<itemName.length;i++){
			itemAll+=("<li><a href='#'>"+itemName[i]+"</a><li>")	
		}
		var str='<div class="thisMenu">'+'<ul class="menu">'+menuName+'<li><ul class="item">'+(itemAll)+'</ul></li></ul>'+'</div>';
		return str;
	}
	
/*2、根据作业要求,做出大概的演示。如果是需求,请取消for循环:*/
	
	for(var i=0;i<M.length;i++){
		id.innerHTML+=(newMenu(M[i],new Array("二级菜单","二级菜单","二级菜单","二级菜单","二级菜单")) );
	}
	
/*1、开始执行事件 隐藏显示 操作.*/
	
	$(".item").hide();//提前隐藏;
	
	$(document).ready(function(){
		$(".menu").mouseover(function(){
			$(this).find(".item").show();
		});
		$(".menu").mouseout(function(){
			$(this).find(".item").hide();
		});
	})
	
</script>

</body>
</html>

最终效果,在Chrom,FireFox都可以,在IE就.....

<hr/>

转载于:https://my.oschina.net/IndustrialRevolutio/blog/870852

2017-03-30(Js作业01：实现一个下拉菜单)