이 기사의 예에서는 jQuery가 Meizu 공식 웹사이트의 탐색 메뉴 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
Meizu 공식 웹사이트를 가끔 봤는데 웹사이트의 탐색 메뉴가 매우 효과적이어서 다운로드했습니다. 두 단어: 훌륭합니다. 메뉴 위에 마우스를 놓으면 메뉴 아래로 수평선이 미끄러집니다. 나는 항상 비슷한 효과를 찾고 그로부터 배우고 싶었습니다. 그러다 보니 비슷한 효과가 있는 웹사이트의 URL을 잊어버렸거나 전혀 찾을 수 없었습니다. . 어떻게 표현해야할지 모르겠지만 오늘 드디어 발견했는데 정말 대단합니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-style-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>Meizu魅族导航菜单</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style> div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;} .csc_top{background:url(images/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;} .slideMenu{height:38px;} li.current a{color:#00b5f7;cursor:pointer;} li.current a:hover{color:#00b5f7;cursor:pointer;} .lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;} .lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;} .lavaLampWithImage3{position:relative;height:28px;float:left;} .lavaLampWithImage3 .current{color:#008ace;} .lavaLampWithImage3 .current a{color:#008ace;} .lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;} .lavaLampWithImage3 li.back{background:url(images/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;} .lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"����";font-weight:normal;font-size:13px;} </style> </head> <body> <div class="csc_top"> <div class="shead_left"> <ul id="1" class="lavaLampWithImage3"> <li class="current"> <a href="#" style="padding: 5px 30px 0;">Meizu</a> </li> <span class="sep">|</span> <li > <a href="#" style="padding: 5px 30px 0;">魅族</a> </li> <span class="sep">|</span> <li> <a href="#" style="padding: 5px 30px 0;">脚本之家</a> </li> </ul> </div> </div> </div> <script type="text/javascript" src="MZPub-CSC-0121.js"></script> </body> </html>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.