收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > jQuery > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

jQuery+CSS3實現四種應用廣泛的導航條制作實例詳解

導航條的使用很廣,每個網站都會做出具有自己特色的導航條。最近特地去了解了各種類型的導航條,比如具有高亮顯示的導航條,中英文互相切換的導航條,具有彈性動畫的導航條,甚至是具有摩擦運動動畫的導航條(文字下面有橫線)等。每種導航條都有自己的特色,比如高亮顯示的導航條看起來比較簡單,但是視覺效果還不錯,具有動畫效果的導航條在視覺上也是有很好的效果。

接下來將會一一介紹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()方法就完成了功能。

2、中英文切換的導航條

先來看一下效果圖:

查看圖片

我采用了兩種方式實現,一種用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屬性設置變化時間,就可以減慢變化速度。

接著是用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; 
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()函數,即在所有動畫之前,先停止其他的動畫,然后再開始這個動畫。

查看圖片

3、帶有彈性動畫的導航條

我采用了三種方式實現,第一種是css3,第二種是jquery,第三種是jquery easing實現。效果圖如下:

因為三種的布局是一樣的,所以就直接附上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實現

*{ 
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"}) 
}); 
});

使用這種方法實現時記得引進包jquery.easing.1.3.min.js(我用的是這個版本,大家可以自行在網上下載)。在這里重點說一下思路:當鼠標移動的時候, 彈性下拉菜單會跟隨著下滑,當鼠標移開的時候,彈性下拉菜單會上滑,同樣用到了前面所說的slideDown()和slideUp()方法,唯一不同的是在這里增加了動畫,即采用easing實現,它其實就是類似于json的格式,插入duration和easing方式就可以,如果不懂里面的實現過程,可以查一下相關的說明文檔,看看就會了。

4、摩擦運動動畫跟隨的導航條

查看圖片

實現思路就是:將鼠標移動的時候,把橫條的位置移動到當前文字的下方。所以需要獲取當前鼠標移動到的位置,即top和left,然后將橫條的top和left相應地改變就可以實現,具體實現如下。
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()獲取元素的寬度(因為文字的個數不同,寬度就不一樣,為了好看,橫條需要適應文字的寬度);

2)position().left獲取元素的位置中left的值;

3)animate()實現動畫效果;

4)duration和easing都是jquery easing插件的內容,即設置動畫的效果。

以上所述是小編給大家介紹的jQuery+CSS3實現四種應用廣泛的導航條制作實例詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的,在此也非常感謝大家對積木網網站的支持!

jQuery判斷是否存在滾動條的簡單方法
利用jQuery控制滾動條滾動,再判斷滾動條是否有偏移。如果有,則存在滾動條,相反沒有滾動就不存在。scripttype="text/javascript"$(function(){$("body").scrollTop(1

jQuery leonaScroll 1.1 自定義滾動條插件(推薦)
leonaScroll-1.1最新版leonaScroll-1.1.js歡迎使用leonaScroll-1.1.js,如您在使用過程中發現更多問題,歡迎指正!更新:1.1版本1、修復了前面初始版本中的一些bug

使用JQuery選擇HTML遍歷函數的方法
使用JQuery,可以很容易的選擇THML元素。但在有些時候,HTML結構比較復雜的時候,提煉我們選擇的元素就是一件比較麻煩的事情。1、children這個函數得到

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
上海时时乐基本走势综合版