JQuery实现简单的联级菜单制作

　2012-11-01 20:34:54　来源：WEB开发网　　　

核心提示： 一：1）图片预览2）导入jquery-1.4.4.min.js文件二：代码演示 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String pat

一：1）图片预览

2）导入jquery-1.4.4.min.js文件

二：代码演示

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>68q.cn</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	  
		$('.menu li').hover(function(){
			$(this).children('ul').toggle();//显示下一菜单项,和下边注释掉的实现效果唯一不同是每级菜单只有鼠标经过时才会有背景颜色 
			//$(this).children('ul').show();
			//$(this).focus().addClass('focus a')
			//},function(){
			//	$(this).children('ul').hide();
			//	$(this).focus().removeClass('focusa');
		});
			
	});
	
</script> 
<style type="text/css">
*{padding:0;margin:0;}
body {font-size:12px;background: black;font-family:"宋体";}
ul {list-style-type:none;}/*此步表示去点ul前边的圆点*/
* {color:#668B8B;text-decoration:none;}
.content{width:1024px;height:768px;background:url(image/xn.jpg) no-repeat;margin:0 auto;padding-top: 100px;}
.menu {height:30px;line-height:30px;background: url(image/1.png) repeat-x;}
.menu li {float:left;position:relative;}
.menu li a:hover{color:#000}
.menu li.focusa {background:#9E9E9E;}
.menu li a {display:block;float:left;height:30px;line-height:30px;padding:0 20px;}
.menu li ul{position: absolute;background:url(image/2.png);width:110px;display:none;}
.menu li ul a {width:70px;}
.one {border:1px solid #000;top:30px;}
.one li a:hover {background:#9E9E9E;}
.two {left:110px;}
.more {background:url(image/3.png) no-repeat 80px center;}/*引进小箭头图片并设置小箭头的位置*/
.more hover{background:(image/3.png) no-repeat 80px center;}
</style> 
 </head>
 <body>
<div class="content">
    <ul class="menu">
    <li><a href="">菜单一</a>
    	<ul class="one">
    	<li><a href="" class="more">菜单一</a>
    	<ul class="two">
    	<li><a href="">菜单三</a></li>
    	<li><a href="">菜单四</a></li>
    	<li><a href="">菜单五</a></li>
    	</ul>
    	</li>
    	<li><a href="">菜单二</a></li>
    	<li><a href="">菜单三</a></li>
    	<li><a href="">菜单四</a></li>
    	<li><a href="" class="more">菜单五</a>
    	<ul class="two">
    	<li><a href="">菜单一</a></li>
    	<li><a href="">菜单二</a></li>
    	<li><a href="">菜单三</a></li>
    	<li><a href="">菜单四</a></li>
    	<li><a href="">菜单五</a></li>
    	</ul>
    	</li>
    </ul>
    </li>
   	    <li><a href="">菜单二</a>
   	    <ul class="one">
    	<li><a href="">菜单一</a></li>
    	<li><a href="" class="more">菜单二</a>
    	<ul class="two">
    	<li><a href="">菜单一</a></li>
    	<li><a href="">菜单二</a></li>
    	<li><a href="">菜单三</a></li>
    	<li><a href="">菜单四</a></li>
    	<li><a href="">菜单五</a></li>
    	</ul>
    	</li>
    	<li><a href="" class="more">菜单三</a>
    	<ul class="two">
    	<li><a href="">菜单一</a></li>
    	<li><a href="">菜单二</a></li>
    	<li><a href="">菜单三</a></li>
    	</ul>
    	</li>
    	<li><a href="">菜单四</a></li>
    	</ul>
   	    </li>
    	<li><a href="">菜单三</a></li>
    	<li><a href="">菜单四</a></li>
    	<li><a href="">菜单五</a></li>
    </ul>
 </div> 
  </body>
</html>