JQuery伸縮導(dǎo)航練習(xí)示例

更新時(shí)間：2013年11月13日 15:53:25 作者：

伸縮的導(dǎo)航有不少優(yōu)點(diǎn)的，可以在有限的空間里容下很多的內(nèi)容，下面有個(gè)不錯(cuò)的示例用到JQuery，感興趣的朋友可以參考下

最近在學(xué)習(xí)JQuery，嘗試制作了這個(gè)導(dǎo)航

下載：代碼

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>伸縮導(dǎo)航</title> 
<link rel="stylesheet" type="text/css" href="nav.css"> 
<script type="text/javascript" src="jquery-1.10.2.js"></script> 
<script type="text/javascript" src="nav.js"></script> 
</head> 
<body> 
<div class="navigator"> 
<ul class="tabs"> 
<li class="tab1"> 
<h3>導(dǎo)航卡1</h3> 
<ul class="nav1"> 
<li>子項(xiàng)目1</li> 
<li>子項(xiàng)目2</li> 
<li>子項(xiàng)目3</li> 
<li>子項(xiàng)目4</li> 
</ul> 
</li> 
<li class="tab2"> 
<h3>導(dǎo)航卡2</h3> 
<ul class="nav2"> 
<li>子項(xiàng)目1</li> 
<li>子項(xiàng)目2</li> 
<li>子項(xiàng)目3</li> 
<li>子項(xiàng)目4</li> 
</ul> 
</li> 
<li class="tab3"> 
<h3>導(dǎo)航卡3</h3> 
<ul class="nav3"> 
<li>子項(xiàng)目1</li> 
<li>子項(xiàng)目2</li> 
<li>子項(xiàng)目3</li> 
<li>子項(xiàng)目4</li> 
</ul> 
</li> 
</ul> 
</div> 

</body> 
</html> 

復(fù)制代碼代碼如下:

 
/** 
* Author LY 2013-11-11 22:30 
**/ 

* { 
margin: 0; 
padding: 0; 
font-family: "Microsoft Yahei","Arial" 
} 

.navigator { 
width: 180px; 
display: block; 
margin-top: 30px; 
margin-left: 30px; 
border-top: 10px solid #ddd; 
border-bottom: 10px solid #ddd; 
border-left: 3px solid #ddd; 
border-right: 3px solid #ddd; 
background: #ddd; 
} 
.tabs { 
list-style: none; 

} 

.tabs li { 
clear: both; 
overflow: auto; 
} 

.tabs li h3 { 
padding: 0; 
margin:0; 
font-size: 14px; 
height: 40px; 
line-height: 40px; 
text-align: center; 
width: 180px; 
cursor: pointer; 
background: #07f; 
color: #fff; 
border-bottom: 1px solid #ccc; 
} 
.tabs li:last-child h3 { 
border:none; 
} 
.tabs li h3.current { 
background: #6af; 
} 
.tabs li ul { 
margin-left: auto; 
margin-right: auto; 
width: 160px; 
height: 0px; 
list-style: none; 
overflow: hidden; 
} 
.tabs li ul li { 
height: 30px; 
line-height: 30px; 
background: #eee; 
padding: 5px; 
border-bottom: 1px solid #ccc; 
cursor: pointer; 
} 

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$(".nav1").css("height","160px"); 
$(".tabs li h3:first").addClass("current"); 
$(".tabs li h3").click(function() { 
$(".tabs li h3").removeClass("current"); 
$(this).addClass("current"); 
$(".tabs li ul").animate({height:"0"},"fast"); 
$(this).next().animate({height:"160"},"slow"); 
}); 
}); 

您可能感興趣的文章:

相關(guān)文章

提升你網(wǎng)站水平的jQuery插件集合推薦
jQuery是一個(gè)優(yōu)秀JavaScript庫(kù)，它簡(jiǎn)化了HTML文檔遍歷，事件處理，動(dòng)畫和Ajax交互。 jQuery的確改變了很多人寫JavaScript的方式。如今，有很多現(xiàn)成的jQuery插件可供選擇，幫助你在網(wǎng)站中加入驚人的功能和效果。
2011-04-04
簡(jiǎn)單幾步實(shí)現(xiàn)返回頂部效果
本文分享了網(wǎng)頁(yè)中經(jīng)常出現(xiàn)的返回頂部效果，相比原生Javascript,jquery實(shí)現(xiàn)起來能夠省略不少代碼。希望對(duì)大家有所幫助
2016-12-12
jquery訪問ashx文件示例代碼
ashx文件與.aspx文件類似，可以通過它來調(diào)用HttpHandler類。下面與大家介紹下jquery訪問ashx文件的過程
2014-08-08
Jquery動(dòng)態(tài)添加及刪除頁(yè)面節(jié)點(diǎn)元素示例代碼
這篇文章主要介紹了Jquery如何動(dòng)態(tài)添加及刪除頁(yè)面節(jié)點(diǎn)元素，示例代碼如下，需要的朋友不要錯(cuò)過
2014-06-06
通過url查找a元素并點(diǎn)擊
查找a元素的方法有很對(duì)，可以通過ID或者class,但如果這兩個(gè)條件都不具備的話，難道就沒有方法了嗎？NO,通過url也是可以做到的，下面有個(gè)不錯(cuò)的示例，大家可以感受下
2014-04-04
使用jQuery操作Cookies的實(shí)現(xiàn)代碼
Cookies是一種能夠讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存，或是從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)
2011-10-10
jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)化實(shí)現(xiàn)代碼
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象；
2010-03-03
使用prop解決一個(gè)checkbox選中后再次選中失效的問題
下面小編就為大家?guī)硪黄褂胮rop解決一個(gè)checkbox選中后再次選中失效的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
jquery mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery ajax實(shí)現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06