蓝色jQuery滑动导航栏特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是蓝色jQuery滑动导航栏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为蓝色jQuery滑动导航栏，属于站长常用代码" />
    <style type="text/css">#bg { background-color: rgb(102, 132, 228); padding: 20px; }</style>
    <title>蓝色jQuery滑动导航栏</title>
    <link href="css/nicenav.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.nicenav.js" type="text/javascript"></script>
</head>
<body>
    <div id="bg">
        <!-- 代码 开始 -->
        <div id="container">
            <ul id="nav">
                <li><a href="#" target="_blank">品牌<span>BRAND</span></a></li>
                <li><a href="#" target="_blank">概况<span>OVERVIEW</span></a></li>
                <li><a href="#" target="_blank">价值<span>WORTH</span></a></li>
                <li><a href="#" target="_blank">配套<span>SUPPORT</span></a></li>
                <li><a href="#" target="_blank">户型<span>UNIT</span></a></li>
                <li><a href="#" target="_blank">精装<span>HARDCOVER</span></a></li>
                <li><a href="#" target="_blank">动态<span>NEWS</span></a></li>
            </ul>
            <div id="buoy"></div>
        </div>
        <script type="text/javascript">
            $.nicenav(300);
        </script>
        <!-- 代码 结束 -->
    </div>
</body>
</html>

JS代码(jquery.nicenav.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));

CSS代码(nicenav.css):

*{margin:0;padding:0;}
#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:bold;text-align:right;}
#container li a:hover{background:#222;}
#container li a span{display:block;position:absolute;left:10px;top:0;font-weight:normal;font-size:10px;-webkit-text-size-adjust:none;opacity:0.6;filter:alpha(opacity=60);}
#buoy{position:absolute;width:133px;height:2px;background:#e9d008;bottom:0px;left:-157px;}

附件:下载该文件资源,减少时间成本(增值服务)