jquery2014-07-15 07:39:45 6341
Jquery联动菜单导航:
实现代码:
a { float: left; padding: 10px 30px 10px 30px; color: #fff; } .menuItem:first-child > a { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .menuItem>a:hover { background-color: #ff5a58; } #childMain { background-color: #3399ff; position: absolute; margin-top: 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display:none; opacity:0; margin-left:-200px; } #childMain>li { list-style: none; } #childMain>li>a { float: left; padding: 10px 25px 10px 25px; color: #fff; } #childMain>li>a:hover { background-color: #ff5a58; } #childMain>li:first-child > a { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius: 5px 5px 0 0; } #childMain>li:last-child > a { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } " _ue_custom_node_="true">html联动菜单 菜单1 菜单2 菜单3 菜单4 菜单5 子菜单1 子菜单1 子菜单1 子菜单1 子菜单1 子菜单1 子菜单1 子菜单1 "); break; case "菜单2": $("#childMain").html(" 子菜单2 子菜单2 子菜单2 子菜单2 "); break; case "菜单3": $("#childMain").html(" 子菜单3 子菜单3 子菜单3 子菜单3 "); break; case "菜单4": $("#childMain").html(" 子菜单4 子菜单4 子菜单4 子菜单4 "); break; case "菜单5": $("#childMain").html(" 子菜单5 子菜单5 子菜单5 子菜单5 "); break; } var currentLeft = $(this).offset().left - $(window).width() * 0.15 - 5 "px"; $("#childMain").css("display", "block"); $("#childMain").animate({ opacity: 1, marginLeft: currentLeft }, 300); }, function() { isIn = false }); $("#childMain").hover(function() { isIn = true; }, function() { isIn = false }); $("#Main").hover(null, function() { if (isIn == false) $("#childMain").animate({ opacity: 0, marginLeft: "-200px" }, 300, function() { $("#childMain").css("display", "none"); }); }); }); " _ue_custom_node_="true">
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery2级联动菜单 html菜单 Jquery2多级菜单
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NDQ=.html
上一篇 PHP获取URL和参数
下一篇 Jquery回到顶部与回到底部