效果图
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 导航nav --> <div id="bg"> <div id="container"> <ul id="nav"> <li><a class="cur" href="#">品牌<span>BRAND</span></a></li> <li><a href="#">概况<span>OVERVIEW</span></a></li> <li><a href="#">价值<span>WORTH</span></a></li> <li><a href="#">配套<span>SUPPORT</span></a></li> <li><a href="#">户型<span>UNIT</span></a></li> <li><a href="#">精装<span>HARDCOVER</span></a></li> <li><a href="#">动态<span>NEWS</span></a></li> </ul> <div id="buoy"></div> </div> </div> <div style="text-align:center;clear:both"><br><br><br><br></div> <script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script> <script src="js/script.js"></script> <script> $.nicenav(300); </script> </body> </html>
style.css
* { margin:0; padding:0 } #bg{ background-color: rgb(102, 132, 228); padding:20px; } #container { width:945px; height:34px; position:relative; overflow:hidden; margin:auto; font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif } #container li { display:block; float:left; width:133px; height:32px; background:url(../images/transparent.png); line-height:32px; padding-right:2px; line-height:32px; list-style:none } #container li a { color:#fff; text-decoration:none; display:block; position:relative; background:url(../images/black.png); width:123px; height:32px; padding-right:10px; font-size:14px; font-weight:700; text-align:right } #container li a:hover,#container li a.cur { background:#222 } #container li a span { display:block; position:absolute; left:10px; top:0; font-weight:400; font-size:10px; -webkit-text-size-adjust:none; opacity:.6; filter:alpha(opacity=60) } #buoy { position:absolute; width:133px; height:2px; background:#e9d008; bottom:0; left:-157px }
script.js
; (function($) { $.extend({ 'nicenav': function(con) { con = typeof con === 'number' ? con: 400; var $lis = $('#nav>li'), $h = $('#buoy') $lis.hover(function() { $h.stop().animate({ 'left': $(this).offsetParent().context.offsetLeft }, con); }, function() { $h.stop().animate({ 'left': '-157px' }, con); }) } }); } (jQuery));