天易14----JQuery实现简单的联级菜单制作

来源：互联网发布：macbook 安装windows 编辑：程序博客网时间：2024/05/22 10:52
一：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></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>