编程 Javascript

JQuery伸缩导航练习示例

Posted in Javascript onNovember 13, 2013

最近在学习JQuery，尝试制作了这个导航
JQuery伸缩导航练习示例
下载：代码

<!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>伸缩导航</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>导航卡1</h3> 
<ul class="nav1"> 
<li>子项目1</li> 
<li>子项目2</li> 
<li>子项目3</li> 
<li>子项目4</li> 
</ul> 
</li> 
<li class="tab2"> 
<h3>导航卡2</h3> 
<ul class="nav2"> 
<li>子项目1</li> 
<li>子项目2</li> 
<li>子项目3</li> 
<li>子项目4</li> 
</ul> 
</li> 
<li class="tab3"> 
<h3>导航卡3</h3> 
<ul class="nav3"> 
<li>子项目1</li> 
<li>子项目2</li> 
<li>子项目3</li> 
<li>子项目4</li> 
</ul> 
</li> 
</ul> 
</div> </body> 
</html>

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

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

JQuery伸缩导航练习示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中window.open()的所有参数详细解析

Jan 09 Javascript

jquery插件corner实现圆角边框的方法

Mar 09 Javascript

纯CSS3代码实现滑动开关效果

Aug 19 Javascript

vue父组件通过props如何向子组件传递方法详解

Aug 16 Javascript

浅谈vue路径优化之resolve

Oct 13 Javascript

vue中el-upload上传图片到七牛的示例代码

Oct 19 Javascript

深入解析koa之异步回调处理

Jun 17 Javascript

vue实现codemirror代码编辑器中的SQL代码格式化功能

Aug 27 Javascript

微信小程序函数防抖解决重复点击消耗性能问题实现代码

Sep 12 Javascript

vue $set 给数据赋值的实例

Nov 09 Javascript

express异步函数异常捕获示例详解

Nov 30 Javascript

详解Vue3.0 + TypeScript + Vite初体验

Feb 22 Vue.js

JS:window.onload的使用介绍

Nov 13 #Javascript

JQuery each打印JS对象的方法

Nov 13 #Javascript

Jquery 数组操作大全个人总结

Nov 13 #Javascript

JS保存和删除cookie操作判断cookie是否存在

Nov 13 #Javascript

js 判断上传文件大小及格式代码

Nov 13 #Javascript

php跨域调用json的例子

Nov 13 #Javascript

JQuery文字列表向上滚动的代码

Nov 13 #Javascript