脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 伸缩的导航

JQuery伸缩导航练习示例

 更新时间：2013年11月13日 15:53:25   作者：  
伸缩的导航有不少优点的，可以在有限的空间里容下很多的内容，下面有个不错的示例用到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插件集合推荐

    提升你网站水平的jQuery插件集合推荐

    jQuery是一个优秀JavaScript库，它简化了HTML文档遍历，事件处理，动画和Ajax交互。 jQuery的确改变了很多人写JavaScript的方式。如今，有很多现成的jQuery插件可供选择，帮助你在网站中加入惊人的功能和效果。
    2011-04-04
  • 简单几步实现返回顶部效果

    简单几步实现返回顶部效果

    本文分享了网页中经常出现的返回顶部效果，相比原生Javascript,jquery实现起来能够省略不少代码。希望对大家有所帮助
    2016-12-12
  • jquery访问ashx文件示例代码

    jquery访问ashx文件示例代码

    ashx文件与.aspx文件类似，可以通过它来调用HttpHandler类。下面与大家介绍下jquery访问ashx文件的过程
    2014-08-08
  • Jquery动态添加及删除页面节点元素示例代码

    Jquery动态添加及删除页面节点元素示例代码

    这篇文章主要介绍了Jquery如何动态添加及删除页面节点元素，示例代码如下，需要的朋友不要错过
    2014-06-06
  • 通过url查找a元素并点击

    通过url查找a元素并点击

    查找a元素的方法有很对，可以通过ID或者class,但如果这两个条件都不具备的话，难道就没有方法了吗？NO,通过url也是可以做到的，下面有个不错的示例，大家可以感受下
    2014-04-04
  • 使用jQuery操作Cookies的实现代码

    使用jQuery操作Cookies的实现代码

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术
    2011-10-10
  • jQuery对象和DOM对象的相互转化实现代码

    jQuery对象和DOM对象的相互转化实现代码

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；
    2010-03-03
  • 使用prop解决一个checkbox选中后再次选中失效的问题

    使用prop解决一个checkbox选中后再次选中失效的问题

    下面小编就为大家带来一篇使用prop解决一个checkbox选中后再次选中失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery mobile界面数据刷新的实现方法

    jquery mobile界面数据刷新的实现方法

    下面小编就为大家带来一篇jquery mobile界面数据刷新的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery ajax结合thinkphp的getjson实现跨域的方法

    jquery ajax结合thinkphp的getjson实现跨域的方法

    这篇文章主要介绍了jquery ajax结合thinkphp的getjson实现跨域的方法,结合实例形式对比分析了jQuery ajax实现跨域的具体操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论