標籤：
導航條的使用很廣，每個網站都會做出具有自己特色的導航條。最近特地去瞭解了各種類型的導航條，比如具有高亮顯示的導航條，中英文互相切換的導航條，具有彈性動畫的導航條，甚至是具有摩擦運動動畫的導航條（文字下面有橫線）等。每種導航條都有自己的特色，比如高亮顯示的導航條看起來比較簡單，但是視覺效果還不錯，具有動畫效果的導航條在視覺上也是有很好的效果。
接下來將會一一介紹4種應用比較廣的導航條，即：高亮顯示的導航條，中英文互相切換的導航條，具有彈性動畫的導航條，具有摩擦運動動畫的導航條。
1、高亮顯示的導航條
這種導航條：當你點擊某一個導航時，就讓他高亮顯示，其他的預設原來的樣式，也就是說在不改變菜單CSS代碼的情況下，用Js控制功能表的背景，假如該功能表項目被點擊後，將賦予它一個與眾不同的背景顏色或背景映像，這樣可以清淅的指引使用者下在瀏覽的網站欄目，簡單方便而且效果好。
如下：
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"); }});其中主要的知識點在於如何檢測當前網頁的網址和a標籤中的href對應，然後相應地改變樣式，在這裡用了window.location.href的方法去擷取網頁當前的網站，用split()切割，最後一部分的內容就是我們想要的。在正常情況下，並不需要完全符合整個網址，所以在這裡用了substr()的方法匹配前幾位字母。我在css檔案中添加了on類，通過給a標籤增加class=“on”,然後通過js中的addClass()方法就完成了功能。
先來看一下：
我採用了兩種方式實現，一種用css3,另一種是用jquery實現。
首先說一下用css3如何?：
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;}紅色部分就是這個過程的實現，利用位置的變化，當滑鼠移上去的時候，顯示中文，也就是將英文移開，值得注意的是，需要利用overflow:hidden屬性，將其隱藏。如果想要速度慢一點的話，可以利用transition屬性設定變化時間，就可以減慢變化速度。
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) });});實現功能的重點是animate()函數的實現，通過設定margin-top和時間實現，為了防止快速經過時，所有的都會變化（如所示），需要在animate()函數前面加上stop()函數，即在所有動畫之前，先停止其他的動畫，然後再開始這個動畫。
<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實現
*{ 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>實現方法很簡單，即剛開始讓下拉的菜單隱藏，然後當滑鼠經過的時候，將隱藏的菜單顯示即可，具體實現代碼如上的紅色部分，這裡不作詳細講解，代碼很簡單。第二種：用jquery實現。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() });});實現方法之前也講過，在仿造百度換膚功能的部分，在這裡採用的是slideDown()和slideUp()方法，如果想要設定變化時間，可以直接在括弧中填入時間即可。第三種：用jquery.easing實現。css的樣式跟用jquery實現的樣式一樣，這裡就不增加空間再複製一遍了。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"}) });});
<!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()擷取元素的寬度（因為文字的個數不同，寬度就不一樣，為了好看，橫條需要適應文字的寬度）；
多種類型的導航條製作【css3,jquery】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
