各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實(shí)現(xiàn)
導(dǎo)航條的使用很廣,每個(gè)網(wǎng)站都會(huì)做出具有自己特色的導(dǎo)航條。最近特地去了解了各種類型的導(dǎo)航條,比如具有高亮顯示的導(dǎo)航條,中英文互相切換的導(dǎo)航條,具有彈性動(dòng)畫的導(dǎo)航條,甚至是具有摩擦運(yùn)動(dòng)動(dòng)畫的導(dǎo)航條(文字下面有橫線)等。每種導(dǎo)航條都有自己的特色,比如高亮顯示的導(dǎo)航條看起來(lái)比較簡(jiǎn)單,但是視覺(jué)效果還不錯(cuò),具有動(dòng)畫效果的導(dǎo)航條在視覺(jué)上也是有很好的效果。
接下來(lái)將會(huì)一一介紹4種應(yīng)用比較廣的導(dǎo)航條,即:高亮顯示的導(dǎo)航條,中英文互相切換的導(dǎo)航條,具有彈性動(dòng)畫的導(dǎo)航條,具有摩擦運(yùn)動(dòng)動(dòng)畫的導(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è)與眾不同的背景顏色或背景圖像,這樣可以清淅的指引用戶下在瀏覽的網(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類,通過(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)的話,可以利用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)畫之前,先停止其他的動(dòng)畫,然后再開(kāi)始這個(gè)動(dòng)畫。
3、帶有彈性動(dòng)畫的導(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="#">博客專欄</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實(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)畫,即采用easing實(shí)現(xiàn),它其實(shí)就是類似于json的格式,插入duration和easing方式就可以,如果不懂里面的實(shí)現(xiàn)過(guò)程,可以查一下相關(guān)的說(shuō)明文檔,看看就會(huì)了。
4、摩擦運(yùn)動(dòng)動(dòng)畫跟隨的導(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)畫跟隨的導(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)畫效果;
4)duration和easing都是jquery easing插件的內(nèi)容,即設(shè)置動(dòng)畫的效果。
在這里,所有的分享就結(jié)束了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
- 基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果
- jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
- jquery+css3問(wèn)卷答題卡翻頁(yè)動(dòng)畫效果示例
- CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
- 如何使用CSS3+JQuery實(shí)現(xiàn)懸浮墻式菜單
相關(guān)文章
基于jquery實(shí)現(xiàn)在線選座訂座之影院篇
通過(guò)電商購(gòu)買過(guò)電影票的朋友都很熟悉此功能,那么在線選座訂座使用程序怎么實(shí)現(xiàn)的呢,接下來(lái),給大家分享基于jquery實(shí)現(xiàn)在線選座訂座之影院篇,感興趣的朋友快來(lái)圍觀2015-08-08基于JQuery打造無(wú)縫滾動(dòng)新聞步驟詳解
這篇文章主要介紹了基于JQuery打造無(wú)縫滾動(dòng)新聞步驟,結(jié)合實(shí)例形式詳細(xì)分析了jQuery實(shí)現(xiàn)無(wú)縫滾動(dòng)新聞效果的具體步驟與相關(guān)實(shí)現(xiàn)代碼與注意事項(xiàng),需要的朋友可以參考下2016-03-03jquery hover 不停閃動(dòng)問(wèn)題的解決方法(亦為stop()的使用)
下面小編就為大家?guī)?lái)一篇jquery hover 不停閃動(dòng)問(wèn)題的解決方法(亦為stop()的使用)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Jquery插件easyUi表單驗(yàn)證提交(示例代碼)
本篇文章主要是對(duì)Jquery插件easyUi表單驗(yàn)證提交的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(基于jquery)
這篇文章主要介紹了z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(jquery),需要的朋友可以參考下2015-11-11基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫效果附源碼下載
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫效果附源碼下載,需要的朋友參考下2016-01-01JavaScript自動(dòng)生成 年月范圍 選擇功能完整示例【基于jQuery插件】
這篇文章主要介紹了JavaScript自動(dòng)生成 年月范圍 選擇功能,結(jié)合完整實(shí)例形式分析了基于jQuery插件的日期年月范圍自動(dòng)生成與選擇功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09jquery實(shí)現(xiàn)的回旋滾動(dòng)效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jquery實(shí)現(xiàn)的回旋滾動(dòng)效果,可實(shí)現(xiàn)點(diǎn)擊后側(cè)圖片呈現(xiàn)立體翻轉(zhuǎn)切換的功能,涉及jQuery插件roundabout.js的使用,并附帶了完整實(shí)例demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09