jquery2014-10-16 01:19:00 7631
Jq CSS制作的二级联动导航菜单。使用Animate动态效果。制作也非常简单,下面是效果图和演示地址以及完整的源代码。
CSS
#headMenu{ width:100%; float:left; background-color:#0064c4; margin:0 auto; } #headMenuCenter{ width:1100px; max-width:1100px; margin:0 auto; } .lineCenter{ float:left; position:absolute; height:30px; margin-top:13px; width:1px; background-color:#808080; } #headMenuCenter > ul { list-style-type:none; margin:0 auto; margin-left:-40px; } .headMenuItem{ list-style:none; float:left; max-width:150px; } .headMenuItem > a{ float:left; color:#fff; padding:15px 35px 15px 35px; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; text-decoration:none; } .headMenuItem > a:hover{ background-color:#036; } .headMenuCurrent{ background-color:#036 !important; } .menuItem{ background-color:#0064c4; position:absolute; width:130px; margin-top:100px; z-index:999; display:none; } .menuItem>ul{ margin-left:-40px; text-align:center; } .menuItem>ul>li{ list-style:none; padding:10px 0 10px 0; } .menuItem>ul>li>a{ float:left; margin-top:-10px; width:100%; color:#fff; padding:18px 0 18px 0; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; text-decoration:none; } .menuItem>ul>li>a:hover{ background-color:#036; }
HTML
<div id="headMenu"> <div id="headMenuCenter"> <ul> <li class="headMenuItem"><a href="http://www.pengyaou.com">首页</a></li> <i class="lineCenter"></i> <li class="headMenuItem"> <a class="headMenuCurrent" href="http://www.pengyaou.com/LegendsZ/WebList/Technology/WebTechnologyIndex.html">网页前端</a> <div class="menuItem"> <ul> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/Technology/WebTechnologyIndex.html">HTML5</a></li> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/Technology/WebTechnologyIndex.html">DIV+CSS</a></li> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/Technology/WebTechnologyIndex.html">Javascript(JQ)</a></li> </ul> </div> </li> <i class="lineCenter"></i> <li class="headMenuItem"><a href="http://www.pengyaou.com/LegendsZ/WebList/BgService/WebBgServiceIndex.html">网页后台</a> <div class="menuItem"> <ul> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/BgService/WebBgServiceIndex.html">PHP</a></li> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/BgService/WebBgServiceIndex.html">ASP.NET</a></li> </ul> </div> </li> <i class="lineCenter"></i> <li class="headMenuItem"><a href="http://www.pengyaou.com/LegendsZ/WebList/DataBase/WebDataBaseIndex.html">数据储存</a> <div class="menuItem"> <ul> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/DataBase/WebDataBaseIndex.html">SQLServer</a></li> <li><a href="http://www.pengyaou.com/LegendsZ/WebList/DataBase/WebDataBaseIndex.html">MySQL</a></li> </ul> </div> </li> <i class="lineCenter"></i> <li class="headMenuItem"><a href="http://www.pengyaou.com/LegendsZ/PageShowBase.html">作品展示</a></li> <i class="lineCenter"></i> <li class="headMenuItem"><a href="http://www.pengyaou.com/LegendsZ/PageShowBase.html">作品下载</a></li> </ul> </div> </div>
Javascript
$(".headMenuItem").hover(function() { $(this).find(".menuItem").css("display", "block").css("opacity", 0); $(this).find(".menuItem").stop().animate({ marginTop:"50px", opacity:1 }, 300); }, function() { $(this).find(".menuItem").stop().animate({ marginTop:"100px", opacity:0 }, 500, function() { $(this).css("display", "none"); }); });
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jq二级联动导航菜单,Jq菜单导航,Jq2级菜单,Jq2级导航菜单
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/Mjk=.html