jquery2014-11-07 09:29:55 4533
Jq制作的手风琴导航菜单,分为2级,动态切换。制作和使用都比较简单,如果有需求的朋友可以直接拿去使用。
HTML
菜单1子菜单1子菜单2子菜单3子菜单4子菜单5菜单2子菜单1子菜单2子菜单3子菜单4子菜单5菜单3子菜单1子菜单2子菜单3子菜单4子菜单5菜单4子菜单1子菜单2子菜单3子菜单4子菜单5菜单5子菜单1子菜单2子菜单3子菜单4子菜单5菜单6子菜单1子菜单2子菜单3子菜单4子菜单5
CSS
#AccordionBody { width: 300px; height: 400px; margin: 0 auto; margin-top: 100px; } .MenuItem { width: 100%; padding: 12px 0 12px 0; border: 1px solid #ccc; text-align: center; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; color: #333; background-color: #fff; margin-top: -1px; cursor: pointer; } .MenuItem:hover { background-color: #f6f5ec; } .MenuItemFrist { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .MenuItemLast { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .MenuChild { width: 100%; background-color: #4b2f3d; overflow: hidden; height: 0px; } .MenuChildItem { width: 100%; padding: 12px 0 12px 0; text-align: center; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; color: #333; border-bottom: 1px solid #74787c; color: #fff; margin-top: -1px; cursor: pointer; } .MenuChildItem:hover { background-color: #63434f; }
Jq
$(function(){ $(".MenuItem").click(function(){ var target=$(this); $(".MenuItem:last").css({ "-webkit-border-radius":" 0 0 5px 5px", "-moz-border-radius":" 0 0 5px 5px", "border-radius":" 0 0 5px 5px" }); $(".MenuChild").stop().animate({height:"0px"},100,function(){ if($(target).attr("class").indexOf("MenuItemLast")!=-1){ $(target).css({ "-webkit-border-radius":"0 0 0 0", "-moz-border-radius":"0 0 0 0", "border-radius":"0 0 0 0" }); } $(target).next().stop().animate({height:"220px"},200); }); }); });
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery手风琴导航菜单,手风琴菜单,手风琴导航
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/ODE=.html
上一篇 Javascript世界地图