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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
详解javascript函数的参数
Nov 10 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
js原生map实现的方法总结
Jan 19 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Angular的MVC和作用域
2016/12/26 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
解读python如何实现决策树算法
2018/10/11 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
财务会计实习报告体会
2013/12/20 职场文书
计算机个人求职信范例
2014/01/24 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
实习证明格式范文
2014/10/14 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
工作失误检讨书范文
2015/01/26 职场文书
数学教师个人总结
2015/02/06 职场文书
签证工作证明模板
2015/06/15 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python