JQuery实战：横向纵向菜单

来源：互联网发布：志村团藏知乎编辑：程序博客网时间：2024/05/20 05:54

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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" mce_href="css/menu.css" /><mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script><mce:script type="text/javascript" src="js/menu.js" mce_src="js/menu.js"></mce:script></head><body><ul><li class="main"><a href="#" mce_href="#">菜单项1</a><ul><li><a href="#" mce_href="#">子菜单项11</a></li><li><a href="#" mce_href="#">子菜单项12</a></li></ul></li><li class="main"><a href="#" mce_href="#">菜单项2</a><ul><li><a href="#" mce_href="#">子菜单项21</a></li><li><a href="#" mce_href="#">子菜单项22</a></li></ul></li><li class="main"><a href="#" mce_href="#">菜单项3</a><ul><li><a href="#" mce_href="#">子菜单项31</a></li><li><a href="#" mce_href="#">子菜单项32</a></li></ul></li></ul><br /><br /><br /><ul><li class="hmain"><a href="#" mce_href="#">菜单项1</a><ul><li><a href="#" mce_href="#">子菜单项11</a></li><li><a href="#" mce_href="#">子菜单项12</a></li></ul></li><li class="hmain"><a href="#" mce_href="#">菜单项2</a><ul><li><a href="#" mce_href="#">子菜单项21</a></li><li><a href="#" mce_href="#">子菜单项22</a></li></ul></li><li class="hmain"><a href="#" mce_href="#">菜单项3</a><ul><li><a href="#" mce_href="#">子菜单项31</a></li><li><a href="#" mce_href="#">子菜单项32</a></li></ul></li></ul></body></html>

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')");}}}

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;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;}