jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
導(dǎo)航條的使用很廣，每個(gè)網(wǎng)站都會(huì)做出具有自己特色的導(dǎo)航條。最近特地去了解了各種類(lèi)型的導(dǎo)航條，比如具有高亮顯示的導(dǎo)航條，中英文互相切換的導(dǎo)航條，具有彈性動(dòng)畫(huà)的導(dǎo)航條，甚至是具有摩擦運(yùn)動(dòng)動(dòng)畫(huà)的導(dǎo)航條（文字下面有橫線(xiàn)）等。每種導(dǎo)航條都有自己的特色，比如高亮顯示的導(dǎo)航條看起來(lái)比較簡(jiǎn)單，但是視覺(jué)效果還不錯(cuò)，具有動(dòng)畫(huà)效果的導(dǎo)航條在視覺(jué)上也是有很好的效果。
接下來(lái)將會(huì)一一介紹4種應(yīng)用比較廣的導(dǎo)航條，即：高亮顯示的導(dǎo)航條，中英文互相切換的導(dǎo)航條，具有彈性動(dòng)畫(huà)的導(dǎo)航條，具有摩擦運(yùn)動(dòng)動(dòng)畫(huà)的導(dǎo)航條。
1、高亮顯示的導(dǎo)航條
這種導(dǎo)航條：當(dāng)你點(diǎn)擊某一個(gè)導(dǎo)航時(shí)，就讓他高亮顯示，其他的默認(rèn)原來(lái)的樣式，也就是說(shuō)在不改變菜單CSS代碼的情況下，用Js控制菜單的背景，假如該菜單項(xiàng)被點(diǎn)擊后，將賦予它一個(gè)與眾不同的背景顏色或背景圖像，這樣可以清淅的指引用戶(hù)下在瀏覽的網(wǎng)站欄目，簡(jiǎn)單方便而且效果好。
效果圖如下：
html:（這里省略了其他html文件的代碼，只貼出一個(gè)index.html的代碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁(yè)</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">首頁(yè)</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">首頁(yè)</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");
}
});
其中主要的知識(shí)點(diǎn)在于如何檢測(cè)當(dāng)前網(wǎng)頁(yè)的網(wǎng)址和a標(biāo)簽中的href對(duì)應(yīng)，然后相應(yīng)地改變樣式，在這里用了window.location.href的方法去獲取網(wǎng)頁(yè)當(dāng)前的網(wǎng)站，用split()切割，最后一部分的內(nèi)容就是我們想要的。在正常情況下，并不需要完全匹配整個(gè)網(wǎng)址，所以在這里用了substr()的方法匹配前幾位字母。我在css文件中添加了on類(lèi)，通過(guò)給a標(biāo)簽增加class=“on”,然后通過(guò)js中的addClass()方法就完成了功能。
2、中英文切換的導(dǎo)航條
先來(lái)看一下效果圖：
我采用了兩種方式實(shí)現(xiàn)，一種用css3,另一種是用jquery實(shí)現(xiàn)。
首先說(shuō)一下用css3如何實(shí)現(xiàn)：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁(yè)</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>首頁(yè)</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;
}
紅色部分就是這個(gè)過(guò)程的實(shí)現(xiàn)，利用位置的變化，當(dāng)鼠標(biāo)移上去的時(shí)候，顯示中文，也就是將英文移開(kāi)，值得注意的是，需要利用overflow:hidden屬性，將其隱藏。如果想要速度慢一點(diǎn)的話(huà)，可以利用transition屬性設(shè)置變化時(shí)間，就可以減慢變化速度。
接著是用jquery實(shí)現(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)
});
});
實(shí)現(xiàn)功能的重點(diǎn)是animate()函數(shù)的實(shí)現(xiàn)，通過(guò)設(shè)置margin-top和時(shí)間實(shí)現(xiàn)，為了防止快速經(jīng)過(guò)時(shí)，所有的都會(huì)變化（如下圖所示），需要在animate()函數(shù)前面加上stop()函數(shù)，即在所有動(dòng)畫(huà)之前，先停止其他的動(dòng)畫(huà)，然后再開(kāi)始這個(gè)動(dòng)畫(huà)。
3、帶有彈性動(dòng)畫(huà)的導(dǎo)航條
我采用了三種方式實(shí)現(xiàn)，第一種是css3,第二種是jquery，第三種是jquery easing實(shí)現(xiàn)。效果圖如下：
因?yàn)槿N的布局是一樣的，所以就直接附上html的結(jié)構(gòu)代碼。
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">首頁(yè)</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="#">博客專(zhuān)欄</a> <a href="#">博客專(zhuān)家</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="#">資源分類(lèi)</a> <a href="#">我的資源</a> </div> </li> </ul> </div>
第一種：css3實(shí)現(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>
實(shí)現(xiàn)方法很簡(jiǎn)單，即剛開(kāi)始讓下拉的菜單隱藏，然后當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候，將隱藏的菜單顯示即可，具體實(shí)現(xiàn)代碼如上的紅色部分，這里不作詳細(xì)講解，代碼很簡(jiǎn)單。
第二種：用jquery實(shí)現(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()
});
});
實(shí)現(xiàn)方法之前也講過(guò)，在仿造百度換膚功能的部分，在這里采用的是slideDown()和slideUp()方法，如果想要設(shè)置變化時(shí)間，可以直接在括號(hào)中填入時(shí)間即可。
第三種：用jquery.easing實(shí)現(xiàn)。
css的樣式跟用jquery實(shí)現(xiàn)的樣式一樣，這里就不增加空間再?gòu)?fù)制一遍了。
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"})
});
});
使用這種方法實(shí)現(xiàn)時(shí)記得引進(jìn)包jquery.easing.1.3.min.js（我用的是這個(gè)版本，大家可以自行在網(wǎng)上下載）。在這里重點(diǎn)說(shuō)一下思路：當(dāng)鼠標(biāo)移動(dòng)的時(shí)候， 彈性下拉菜單會(huì)跟隨著下滑，當(dāng)鼠標(biāo)移開(kāi)的時(shí)候，彈性下拉菜單會(huì)上滑，同樣用到了前面所說(shuō)的slideDown()和slideUp()方法，唯一不同的是在這里增加了動(dòng)畫(huà)，即采用easing實(shí)現(xiàn)，它其實(shí)就是類(lèi)似于json的格式，插入duration和easing方式就可以，如果不懂里面的實(shí)現(xiàn)過(guò)程，可以查一下相關(guān)的說(shuō)明文檔，看看就會(huì)了。
4、摩擦運(yùn)動(dòng)動(dòng)畫(huà)跟隨的導(dǎo)航條
實(shí)現(xiàn)思路就是：將鼠標(biāo)移動(dòng)的時(shí)候，把橫條的位置移動(dòng)到當(dāng)前文字的下方。所以需要獲取當(dāng)前鼠標(biāo)移動(dòng)到的位置，即top和left，然后將橫條的top和left相應(yīng)地改變就可以實(shí)現(xiàn)，具體實(shí)現(xiàn)如下。
html:（這里只貼上一個(gè)頁(yè)面的代碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩擦運(yùn)動(dòng)動(dòng)畫(huà)跟隨的導(dǎo)航條</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">首頁(yè)</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"});
});
});
主要說(shuō)幾個(gè)方法的作用：
1）outerwidth()獲取元素的寬度（因?yàn)槲淖值膫€(gè)數(shù)不同，寬度就不一樣，為了好看，橫條需要適應(yīng)文字的寬度）；
2）position().left獲取元素的位置中l(wèi)eft的值；
3）animate(）實(shí)現(xiàn)動(dòng)畫(huà)效果；
4）duration和easing都是jquery easing插件的內(nèi)容，即設(shè)置動(dòng)畫(huà)的效果。
以上所述是小編給大家介紹的jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- 各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實(shí)現(xiàn)
- 使用jquery+CSS3實(shí)現(xiàn)仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效
- jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
- 7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
- jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jquery輕量級(jí)數(shù)字動(dòng)畫(huà)插件countUp.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動(dòng)數(shù)字增加插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼,涉及jQuery中fadeIn及fadeOut的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
本篇文章主要介紹了jQuery導(dǎo)航條固定定位效果實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
用jquery實(shí)現(xiàn)的彈出菜單插件2008-12-12
jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-04-04
本文主要介紹了jquery實(shí)現(xiàn)更改表格行順序示例,大家參考使用吧2014-04-04
jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字?jǐn)?shù)不能確定，而input type="text"的size是固定的，當(dāng)字?jǐn)?shù)超過(guò)size時(shí)（默認(rèn)是20），先輸入的內(nèi)容就會(huì)從文本框的左端隱藏起來(lái)，不便于輸入。2010-04-04
基于input動(dòng)態(tài)模糊查詢(xún)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢(xún)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12