jsp页面
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">横向纵向菜单
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')"); } } }
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3536/viewspace-2813858/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
CSS居中的方法总结
下一篇：
ThumbnailUtils工具类整理
请登录后发表评论
登录
全部评论
