이 문서의 예에서는 jquery 위로 마우스를 가져갈 때 밑줄과 드롭다운 메뉴 효과를 표시하는 방법을 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
여기서 소개하는 것은 검은색과 빨간색 그라데이션이 적용된 웹사이트 슬라이드다운 탐색 메뉴입니다. 메뉴는 이동하는 위치를 자동으로 따라갑니다. 메뉴 하위 메뉴가 두 개 있는 경우 드롭다운 메뉴도 그라데이션 효과와 함께 표시됩니다. 메뉴 작업은 매우 민감하며 사용자 정의 캡슐화된 플러그인 SuperSlide.2.1.js를 사용합니다. 사용 시 이 JS 플러그인을 다운로드하세요.
실행 중인 효과의 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo .jb51.net/js/2015 /jquery-mouse-over-buttom-line-show-menu-codes/
구체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery带下划线导航菜单</title> <style> *{margin: 0;padding: 0;list-style: none;} body{background: #fff;font-size: 12px;} img{border: 0;} a{text-decoration: none;color: #333;} a: hover{color: #FF8400;} .clearfix: after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix10: after{content: ".";display: block;height: 10px;clear: both;visibility: hidden;} .h10{height: 10px;} .h15{height: 15px;} #header{width: 1000px;margin: 0 auto;} .navBar{width: 1000px;margin: 0 auto;height: 50px;line-height: 50px;background: #000;color: #333;} .nav{position: relative;width: 980px;margin: 0 auto;font-family: "Microsoft YaHei",SimSun,SimHei;font-size: 14px;} .nav a{color: #fff;} .nav h3{font-size: 100%;font-weight: normal;} .nav .m{float: left;position: relative;z-index: 1;} .nav .s{float: left;width: 3px;text-align: center;color: #D4D4D4;font-size: 12px;} .nav h3 a{display: block;width: 115px;text-align: center;font-weight: bold;} .nav .sub{display: none;position: absolute;left: -3px;top: 50px;z-index: 1;width: 117px;border: 1px solid #E6E4E3;border-top: 0;background: #fff;} .nav .sub li{text-align: center;padding: 0 8px;margin-bottom: -1px;} .nav .sub li a{display: block;border-bottom: 1px solid #E6E4E3;padding: 8px 0;height: 28px;line-height: 28px;color: #000;font-size: 12px;font-weight: bold;} .nav .sub li a: hover{color: #FE7700;} .nav .block{height: 8px;width: 120px;background: #FE7700;position: absolute;left: 0;top: 42px;overflow: hidden;} </style> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> </head> <body> <br> <div class="navBar"> <ul class="nav clearfix"> <li class="m"> <h3><a target="_blank" href="#">网站首页</a></h3> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="#" title="关于我们">关于我们</a></h3> <ul class="sub"> <li><a href="" title="企业简介">企业简介</a></li> <li><a href="" title="组织架构">组织架构</a></li> <li><a href="" title="企业资质">企业资质</a></li> <li><a href="" title="企业文化">企业文化</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="#">资质认定</a></h3> <ul class="sub"> <li><a href="" title="国家高新认证">国家高新认证</a></li> <li><a href="" title="软件企业认证">软件企业认证</a></li> <li><a href="" title="深圳市高企认证">深圳市高企认证</a></li> <li><a href="" title="其它认证">其它认证</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="#">政府扶持</a></h3> <ul class="sub" style="display: none;"> <li><a href="" title="深圳市级扶持">深圳市扶持</a></li> <li><a href="" title="各区级扶持">各区级扶持</a></li> <li><a href="" title="广东省级扶持">广东省扶持</a></li> <li><a href="" title="国家和部级扶持">国家扶持</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="#" title="知识产权">知识产权</a></h3> <ul class="sub" style="display: none;"> <li><a href="" title="知识产权申请">知识产权申请</a></li> <li><a href="" title="知识产权转让">知识产权转让</a></li> <li><a href="" title="技术咨询">技术咨询</a></li> <li><a href="" title="技术成果鉴定">技术成果鉴定</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="#" title="上市服务">上市服务</a></h3> <ul class="sub" style="display: none;"> <li><a href="" title="上市条件及流程">上市条件及流程</a></li> <li><a href="" title="上市顾问">上市顾问</a></li> <li><a href="" title="税收筹划">税收筹划</a></li> <li><a href="" title="资产重组">资产重组</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="Job.aspx" title="人才招聘">人才招聘</a></h3> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="Contact.aspx" title="联系我们">联系我们</a></h3> </li> <li class="block" style="left: 251px;"></li> </ul> </div> <script type="text/javascript" src="js/SuperSlide.2.1.js"></script> <script type="text/javascript"> $(function(){ var nav = $(".nav"); var init = $(".nav .m").eq(ind); var block = $(".nav .block"); block.css({ "left": init.position().left - 3 }); nav.hover(function() {}, function() { block.stop().animate({ "left": init.position().left - 3 }, 100); }); $(".nav").slide({ type: "menu", titCell: ".m", targetCell: ".sub", delayTime: 300, triggerTime: 0, returnDefault: true, defaultIndex: ind, startFun: function(i, c, s, tit) { block.stop().animate({ "left": tit.eq(i).position().left - 3 }, 100); } }); }); var ind = 0; //设置 myFocus.set({ id:'myFocus',//ID pattern:'mF_quwan'//风格 }); </script> <div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
추천 관련 영상 튜토리얼: jQuery 튜토리얼(동영상)