導航條的使用很廣，每個網(wǎng)站都會做出具有自己特色的導航條。最近特地去了解了各種類型的導航條，比如具有高亮顯示的導航條，中英文互相切換的導航條，具有彈性動畫的導航條，甚至是具有摩擦運動動畫的導航條（文字下面有橫線）等。每種導航條都有自己的特色，比如高亮顯示的導航條看起來比較簡單，但是視覺效果還不錯，具有動畫效果的導航條在視覺上也是有很好的效果。
接下來將會一一介紹4種應用比較廣的導航條，即：高亮顯示的導航條，中英文互相切換的導航條，具有彈性動畫的導航條，具有摩擦運動動畫的導航條。
1、高亮顯示的導航條
這種導航條：當你點擊某一個導航時，就讓他高亮顯示，其他的默認原來的樣式，也就是說在不改變菜單CSS代碼的情況下，用Js控制菜單的背景，假如該菜單項被點擊后，將賦予它一個與眾不同的背景顏色或背景圖像，這樣可以清淅的指引用戶下在瀏覽的網(wǎng)站欄目，簡單方便而且效果好。
效果圖如下：
html:（這里省略了其他html文件的代碼，只貼出一個index.html的代碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <link href="../css/demo1.css" rel="stylesheet" type="text/css"> <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="../js/demo1.js" language="javascript" charset="utf-8"></script> </head> <body> <div class="nav"> <ul class="nav-list"> <li><a href="index.html">首頁</a></li> <li><a href="bbs.html">論壇</a></li> <li><a href="blog.html">博客</a></li> <li><a href="mall.html">商城</a></li> <li><a href="download.html">下載</a></li> </ul> </div> <div class="content">首頁</div> </body> </html>
css：
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } .nav{ background-color: #222; height: 40px; width:100%; margin-top:50px; } .nav-list{ width: 1000px; margin: 0 auto; } .nav-list li{ list-style: none; float: left; } .nav-list li a{ color: #aaa; padding:0 40px; text-decoration: none; line-height: 40px; display: block; border: none; } .content{ margin:20px auto; text-align: center; } .nav-list li a:hover{ color: #fff; background: #504d4d; } <span style="color:#ff0000;">.nav-list li a.on{ color: #fff; background: #504d4d; }</span>jquery:
$(function(){ var index = (window.location.href.split("/").length)-1; var href = window.location.href.split("/")[index].substr(0,4); if (href!=null){ $(".nav-list li a[href^='"+href+"']").addClass("on"); }else{ $(".nav-list li a[href='index.html']").addClass("on"); } });其中主要的知識點在于如何檢測當前網(wǎng)頁的網(wǎng)址和a標簽中的href對應，然后相應地改變樣式，在這里用了window.location.href的方法去獲取網(wǎng)頁當前的網(wǎng)站，用split()切割，最后一部分的內容就是我們想要的。在正常情況下，并不需要完全匹配整個網(wǎng)址，所以在這里用了substr()的方法匹配前幾位字母。我在css文件中添加了on類，通過給a標簽增加class=“on”,然后通過js中的addClass()方法就完成了功能。
2、中英文切換的導航條
先來看一下效果圖：
我采用了兩種方式實現(xiàn)，一種用css3,另一種是用jquery實現(xiàn)。
首先說一下用css3如何實現(xiàn)：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <link rel="stylesheet" href="../css/demo2.css"> </head> <body> <div class="nav"> <ul class="nav-list"> <li> <a href="index.html"> <b>index</b> <i>首頁</i> </a> </li> <li> <a href="index.html"> <b>bbs</b> <i>論壇</i> </a> </li> <li> <a href="index.html"> <b>blog</b> <i>博客</i> </a> </li> <li> <a href="index.html"> <b>mall</b> <i>商城</i> </a> </li> <li> <a href="index.html"> <b>download</b> <i>下載</i> </a> </li> </ul> </div> </body> </html>
css:
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; transition: 0.2s; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; } .nav-list li a:hover{ margin-top:-40px; }紅色部分就是這個過程的實現(xiàn)，利用位置的變化，當鼠標移上去的時候，顯示中文，也就是將英文移開，值得注意的是，需要利用overflow:hidden屬性，將其隱藏。如果想要速度慢一點的話，可以利用transition屬性設置變化時間，就可以減慢變化速度。
接著是用jquery實現(xiàn)：
css：
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; }jquery:
$(function(){ $(".nav-list li a").hover(function(){ $(this).stop().animate({"margin-top":-40},200) },function(){ $(this).stop().animate({"margin-top":0},200) }); });實現(xiàn)功能的重點是animate()函數(shù)的實現(xiàn)，通過設置margin-top和時間實現(xiàn)，為了防止快速經過時，所有的都會變化（如下圖所示），需要在animate()函數(shù)前面加上stop()函數(shù)，即在所有動畫之前，先停止其他的動畫，然后再開始這個動畫。
3、帶有彈性動畫的導航條
我采用了三種方式實現(xiàn)，第一種是css3,第二種是jquery，第三種是jquery easing實現(xiàn)。效果圖如下：
因為三種的布局是一樣的，所以就直接附上html的結構代碼。
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">首頁</a> </li> <li> <a href="#">論壇</a> <div class="nav-down"> <a href="#">java論壇</a> <a href="#">js論壇</a> <a href="#">jquery論壇</a> <a href="#">css3論壇</a> </div> </li> <li> <a href="#">博客</a> <div class="nav-down"> <a href="#">精彩博文</a> <a href="#">博客專欄</a> <a href="#">博客專家</a> <a href="#">我的博客</a> </div> </li> <li> <a href="#">商城</a> <div class="nav-down"> <a href="#">軟件商城</a> <a href="#">C幣商城</a> <a href="#">C幣充值</a> </div> </li> <li> <a href="#">下載</a> <div class="nav-down"> <a href="#">資源分類</a> <a href="#">我的資源</a> </div> </li> </ul> </div>
第一種：css3實現(xiàn)
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; margin-top:50px; background-color: #222; } .nav .nav-list{ width: 1000px; height: 40px; margin:0 auto; } .nav .nav-list li{ float: left; position: relative; } .nav .nav-list li > a{ display: block; height: 40px; line-height: 40px; padding:0 30px; color:#aaa; width:60px; } .nav .nav-list li:hover>a{ color:#fff; background-color: #333; } <span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{ display: block; }</span> .nav-down{ width:150px; background-color: #333; position: absolute; top:40px; left:0px; display: none; } .nav .nav-list .nav-down a{ display: block; line-height: 30px; color:#aaa; padding-left:30px; } <span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{ color:#fff; background-color: #333; }</span>實現(xiàn)方法很簡單，即剛開始讓下拉的菜單隱藏，然后當鼠標經過的時候，將隱藏的菜單顯示即可，具體實現(xiàn)代碼如上的紅色部分，這里不作詳細講解，代碼很簡單。
第二種：用jquery實現(xiàn)。
css:
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; margin-top:50px; background-color: #222; } .nav .nav-list{ width: 1000px; height: 40px; margin:0 auto; } .nav .nav-list li{ float: left; position: relative; } .nav .nav-list li > a{ display: block; height: 40px; line-height: 40px; padding:0 30px; color:#aaa; width:60px; } .nav .nav-list li:hover>a{ color:#fff; background-color: #333; } .nav-down{ width:150px; background-color: #333; position: absolute; top:40px; left:0px; display: none; } .nav .nav-list .nav-down a{ display: block; line-height: 30px; color:#aaa; padding-left:30px; } .nav .nav-list .nav-down a:hover{ color:#fff; background-color: #333; }jquery:
$(function(){ $(".nav .nav-list li").hover(function(){ $(this).find(".nav-down").stop().slideDown() },function(){ $(this).find(".nav-down").stop().slideUp() }); });實現(xiàn)方法之前也講過，在仿造百度換膚功能的部分，在這里采用的是slideDown()和slideUp()方法，如果想要設置變化時間，可以直接在括號中填入時間即可。
第三種：用jquery.easing實現(xiàn)。
css的樣式跟用jquery實現(xiàn)的樣式一樣，這里就不增加空間再復制一遍了。
jquery:
<pre name="code" class="javascript">$(function(){ $(".nav .nav-list li").hover(function(){ $(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"}) },function(){ $(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"}) }); });使用這種方法實現(xiàn)時記得引進包jquery.easing.1.3.min.js（我用的是這個版本，大家可以自行在網(wǎng)上下載）。在這里重點說一下思路：當鼠標移動的時候， 彈性下拉菜單會跟隨著下滑，當鼠標移開的時候，彈性下拉菜單會上滑，同樣用到了前面所說的slideDown()和slideUp()方法，唯一不同的是在這里增加了動畫，即采用easing實現(xiàn)，它其實就是類似于json的格式，插入duration和easing方式就可以，如果不懂里面的實現(xiàn)過程，可以查一下相關的說明文檔，看看就會了。
4、摩擦運動動畫跟隨的導航條
實現(xiàn)思路就是：將鼠標移動的時候，把橫條的位置移動到當前文字的下方。所以需要獲取當前鼠標移動到的位置，即top和left，然后將橫條的top和left相應地改變就可以實現(xiàn)，具體實現(xiàn)如下。
html:（這里只貼上一個頁面的代碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩擦運動動畫跟隨的導航條</title> <link href="../css/demo7.css" rel="stylesheet"> <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8"></script> <script src="../js/demo7.js" language="javascript" charset="utf-8"></script> </head> <body> <div class="nav"> <div class="nav-content"> <ul class="nav-list"> <li><a href="index.html">首頁</a></li> <li><a href="bbs.html">論壇</a></li> <li><a href="blog.html">博客</a></li> <li><a href="mall.html">商城</a></li> <li><a href="download.html">下載</a></li> </ul> <div class="nav-line"></div> </div> </div> </body> </html>
css:
*{ margin:0px; padding: 0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height:40px; margin-top:50px; background-color: #f6f6f6; } .nav .nav-content{ width:1000px; margin:0 auto; height: 40px; position: relative; } .nav .nav-list li{ float: left; } .nav .nav-list li a{ color:#333; height: 40px; line-height: 40px; display: block; padding:0 30px; } .nav .nav-line{ height:3px; background: #35b558; width:100px; position: absolute; top:40px; left:0px; } .nav .nav-list li a:hover{ color:#35b558; } .nav .nav-list li a.on{ color:#35b558; }jquery:
$(function () { var index = window.location.href.split("/").length-1; var href = window.location.href.split("/")[index]; $(".nav .nav-list li a[href='"+href+"']").addClass("on"); var li_width = $(".nav .nav-list li a.on").outerWidth(); var li_left = $(".nav .nav-list li a.on").position().left; $(".nav-content .nav-line").css({width:li_width,left:li_left}); $(".nav .nav-list li").hover(function(){ var li_width = $(this).outerWidth(); var li_left = $(this).position().left; $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); },function(){ $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); }); });主要說幾個方法的作用：
1）outerwidth()獲取元素的寬度（因為文字的個數(shù)不同，寬度就不一樣，為了好看，橫條需要適應文字的寬度）；
2）position().left獲取元素的位置中l(wèi)eft的值；
3）animate(）實現(xiàn)動畫效果；
4）duration和easing都是jquery easing插件的內容，即設置動畫的效果。
以上所述是小編給大家介紹的jQuery+CSS3實現(xiàn)四種應用廣泛的導航條制作實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
