【JQuery】——横向纵向菜单

谁借莪１个温暖的怀抱￠ 2022-07-14 00:43 145阅读 0赞

# 【HTML】 #

<html>
    	<head>
    		<title>JQuery实战-菜单效果</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<link type="text/css" rel="stylesheet" href="css/menu.css" />
    		<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript" src="js/menu.js"></script>
    	</head>
    	<body>
    		<ul>
    			<li class="main">
    					<a href="#">菜单项1</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项11</a>
    					</li>
    					<li>
    						<a href="#">子菜单项12</a>
    					</li>
    				</ul>
    			</li>
    			<li class="main">
    				<a href="#">菜单项2</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项21</a>
    					</li>
    					<li>
    						<a href="#">子菜单项22</a>
    					</li>
    				</ul>
    			</li>
    			<li class="main">
    				<a href="#">菜单项3</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项31</a>
    					</li>
    					<li>
    						<a href="#">子菜单项32</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
    		<br />
    		<br />
    		<br />
    		<ul>
    			<li class="hmain">
    					<a href="#">菜单项1</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项11</a>
    					</li>
    					<li>
    						<a href="#">子菜单项12</a>
    					</li>
    				</ul>
    			</li>
    			<li class="hmain">
    				<a href="#">菜单项2</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项21</a>
    					</li>
    					<li>
    						<a href="#">子菜单项22</a>
    					</li>
    				</ul>
    			</li>
    			<li class="hmain">
    				<a href="#">菜单项3</a>
    				<ul>
    					<li>
    						<a href="#">子菜单项31</a>
    					</li>
    					<li>
    						<a href="#">子菜单项32</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</body>
    </html>

# 【CSS】 #

ul, li {
    	/*清除ul和li上默认的小圆点*/
    	list-style: none;
    }
    ul {
    	/*清除子菜单的缩进值*/
    	padding: 0;
    	margin: 0;
    }
    .main, .hmain {
    	background-image: url(../images/title.gif);  /* 背景图*/
    	background-repeat: repeat-x; /* 背景图 横向的一个*/
    	width: 120px;
    }
    li {
    	background-color: #EEEEEE;  /* 背景色*/
    }
    a {
    	/*取消所有的下划线*/
    	text-decoration: none;
    	padding-left: 20px;
    	display: block;  /* 块级元素 充满黑色区域*/
    	display: inline-block;  /* 让a充满整个区域  IE6*/
    	width: 100px;
    	padding-top: 3px;
    	padding-bottom: 3px;
    }
    .main a, .hmain a {
    	color: white;  
    	background-image: url(../images/collapsed.gif); /* 背景图 上面的白色三角 收上去*/
    	background-repeat: no-repeat;
    	background-position: 3px center;
    }
    .main li a, .hmain li a {
    	color: black;
    	background-image: none;
    }
    .main ul, .hmain ul {
    	display: none;  /* 主菜单项隐藏*/
    }
    .hmain {
    	float: left;  /* 横向显示*/
    	margin-right: 1px; /* 三个横向菜单有点距离*/
    }

# 【JS】 #

$(document).ready(function(){
    	//页面中的DOM已经装载完成时，执行的代码
    	$(".main > a").click(function(){
    		//找到主菜单项对应的子菜单项
    		var ulNode = $(this).next("ul");
    		/*  第一种
    		if (ulNode.css("display") == "none") {
    			ulNode.css("display","block");
    		} else {
    			ulNode.css("display","none");
    		}
    		*/
    		//第二种
    		//ulNode.show("slow");//normal fast
    		//ulNode.hide();
    		//ulNode.toggle(); 如果当前元素是隐藏则显示；如果当前元素显示则隐藏
    		//
    		//第三种
    		//ulNode.slideDown("slow");
    		//ulNode.slideUp;
    		ulNode.slideToggle();
    		changeIcon($(this));
    	});
    	$(".hmain").hover(function(){
    		$(this).children("ul").slideDown();
    		changeIcon($(this).children("a"));
    	},function(){
    		$(this).children("ul").slideUp();
    		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')");
    		}
    	}
    }

# 【效果】 #

![Center][]

# 【知识点分析】 #

1.页面中的菜单项可以通过嵌套的ul和li来表示  
 2.菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。  
 3.浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。  
 4.list-style属性值为none时，可以清除ul和li前面的小圆点  
 5.清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值  
 6.可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，知道填满整个区域  
 7.可以使用bakcground-repeat来控制背景图的重复填充方式。  
 8.如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的  
 9.text-decoration属性值为none时，可以取消文字上的下划线  
 10.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向  
 11.background-image的值为none表示没有背景图  
 12.background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示。  
 13.IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline-block，同时设定a的宽度。  
 14.display的值为none可以用于隐藏元素。  
 15. .main a和.main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点  
 16.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是’slow’,’normal’,’fast’这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。  
 17.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同。  
 18.slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同。  
 19.slideToggle和toggle达到的效果类似  
 20.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果。  
 21.float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。  
 22.可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入过个选择器。

[Center]: /images/20220714/3a68338d65f842a0a9bb40aeda318219.png