jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css"></link> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.4.2.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/menu.js"></script> <title>横向纵向菜单</title> </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; 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; }Jquery代码
$(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')"); } } }
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦