Sample JQuery scalable navigation exercise

2020-03-29 23:45:06
OfStack

Recently in learning JQuery, I tried to make this navigation
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/20131113154946.gif? 20131013155027 ">
Download: (link: http://xiazai.jb51.net/201311/yuanma/nav (jb51.net). Rar)

 
<!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> Telescopic navigation </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> Navigation card 1</h3> 
<ul class="nav1"> 
<li> subprojects 1</li> 
<li> subprojects 2</li> 
<li> subprojects 3</li> 
<li> subprojects 4</li> 
</ul> 
</li> 
<li class="tab2"> 
<h3> Navigation card 2</h3> 
<ul class="nav2"> 
<li> subprojects 1</li> 
<li> subprojects 2</li> 
<li> subprojects 3</li> 
<li> subprojects 4</li> 
</ul> 
</li> 
<li class="tab3"> 
<h3> Navigation card 3</h3> 
<ul class="nav3"> 
<li> subprojects 1</li> 
<li> subprojects 2</li> 
<li> subprojects 3</li> 
<li> subprojects 4</li> 
</ul> 
</li> 
</ul> 
</div> 

</body> 
</html>

 
 

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

 
$(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"); 
}); 
});