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"); 
}); 
});
Javascript 相关文章推荐
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
微信小程序实现星级评价
Nov 20 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 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
You might like
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
MySQL面试题目集锦
2016/04/14 面试题
数控个人求职信范文
2014/02/03 职场文书
致400米运动员广播稿
2014/02/07 职场文书
小学生学习感言
2014/03/10 职场文书
优秀食品类广告词
2014/03/19 职场文书
挂牌仪式主持词
2014/03/20 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
python如何正确使用yield
2021/05/21 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技