`
yin_jw
  • 浏览: 47925 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jQuery 横向纵向菜单

jQueryJavaScriptCSSJSPCache 
阅读更多

1、jsp 文件（Menu.jsp） 

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
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">

	<link rel="stylesheet" type="text/css" href="css/menu.css">
	<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".main > a").click(function(){
				//找到主菜单对应的子菜单
				var ulNode = $(this).next();
				
				if ($(this).css("background-image").indexOf("collapsed.gif") >= 0) {
					$(this).css("background-image","url('images/expanded.gif')");
				} else {
					$(this).css("background-image","url('images/collapsed.gif')");
				}
				//jQuery中的方法
				ulNode.slideToggle(300);
			});

			$(".hmain").hover(function(){
			  	$(this).children("ul").slideDown(100);
			  	changeIcon($(this).children("a"));
			 },function(){
			  	$(this).children("ul").slideUp(100);
			  	changeIcon($(this).children("a"));
			});
		});
		/**
		 * 修改主菜单的指示图标
		 */
		function changeIcon(mainNode) {
			if (mainNode){
			 	if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			  		mainNode.css("background-image","url('images/expanded.gif')");
			 	} else {
			  		mainNode.css("background-image","url('images/collapsed.gif')");
			 	}
			 }
		}
	</script>
  </head>

  <body>
    <ul>
    	<li class="main">
    		<a href="javascript:void(0)">菜单项1</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项11</a></li>
    			<li><a href="javascript:void(0)">子菜单项12</a></li>
    		</ul>
    	</li>
    	<li class="main">
    		<a href="javascript:void(0)">菜单项2</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项21</a></li>
    			<li><a href="javascript:void(0)">子菜单项22</a></li>
    		</ul>
    	</li>
    	<li class="main">
    		<a href="javascript:void(0)">菜单项3</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项31</a></li>
    			<li><a href="javascript:void(0)">子菜单项32</a></li>
    		</ul>
    	</li>
    </ul>
    <br>
    <br>
    <br>
    <br>
    <ul>
    	<li class="hmain">
    		<a href="javascript:void(0)">菜单项1</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项11</a></li>
    			<li><a href="javascript:void(0)">子菜单项12</a></li>
    		</ul>
    	</li>
    	<li class="hmain">
    		<a href="javascript:void(0)">菜单项2</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项21</a></li>
    			<li><a href="javascript:void(0)">子菜单项22</a></li>
    		</ul>
    	</li>
    	<li class="hmain">
    		<a href="javascript:void(0)">菜单项3</a>
    		<ul>
    			<li><a href="javascript:void(0)">子菜单项31</a></li>
    			<li><a href="javascript:void(0)">子菜单项32</a></li>
    		</ul>
    	</li>
    </ul>
  </body>
</html>

 

2、css 文件（menu.css） 

@CHARSET "UTF-8";
ul,li{
	/*清除ul和li上默认的小圆点*/
	list-style:none;
}
ul{
	/*清除子菜单的缩进值*/
	padding-left:0px;
	margin-left:0px;
}
.main{
	background-image:url(../images/title.gif);
	background-repeat:repeat-x;
	width:100px;
}
li{
	background-color:#EEEEEE;
}
a{
	/*取消所有的下划线*/
	text-decoration:none;
	
	color:white;
	font-size:16px;
	line-height:25px;
	padding-left:20px;
	
	/*设置该属性使得超链接充满整个li*/
	display:block;
	/*在IE6中要将超链接充满整个li时需要设置的属性
	display:inline-block;*/
}
.main a{
	/*添加小三角图片，同时设置其位置*/
	background-image:url(../images/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
}
.main li a{
	color:black;
	font-size:14px;
	/*设置子菜单中没有图片背景*/
	background-image:none;
}
.main ul{
	/*隐藏子菜单*/
	display:none;
}

.hmain{
	float:left;/*让li显示在一行上*/
	background-image:url(../images/title.gif);
	background-repeat:repeat-x;
	width:100px;
	margin-right:1px;
}
.hmain a{
	/*添加小三角图片，同时设置其位置*/
	background-image:url(../images/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
}
.hmain li a{
	color:black;
	font-size:14px;
	/*设置子菜单中没有图片背景*/
	background-image:none;
}
.hmain ul{
	/*隐藏子菜单*/
	display:none;
}
 
分享到：
| jquery 可编辑的表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics