jQuery实现下拉导航的代码整理
- 发布时间：
- 作者：码农之家
- 点击：171
这篇文章主要知识点是关于jQuery、下拉导航、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
jQuery实现简单下拉导航效果
本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下：
这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习CSS以及jquery的朋友有不小的帮助。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/
具体代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery下拉导航</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.nav').children("li:has(ul)").hover(
function(){
$(this).children("ul").slideDown();
},
function(){
$(this).children("ul").hide();
}
);
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
.nav {margin:200px;list-style-type:none;}
.nav li {position:relative;float:left;margin-right:10px;}
.nav li ul {display:none;position:absolute;top:20px;left:0;list-style-type:none;}
.nav li ul li {padding:2px 0;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a>
</li>
<li>
<a href="#">链接</a>
<ul>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
</ul>
</li>
<li>
<a href="#">相册</a>
<ul>
<li><a href="#">11</a></li>
<li><a href="#">22</a></li>
<li><a href="#">33</a></li>
<li><a href="#">44</a></li>
</ul>
</li>
<li>
<a href="#">博客</a>
<ul>
<li><a href="#">AA</a></li>
<li><a href="#">BB</a></li>
<li><a href="#">CC</a></li>
<li><a href="#">DD</a></li>
</ul>
</li>
<li>
<a href="#">关于</a>
</li>
<div ></div>
</ul>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
您可能感兴趣的文章:
jQuery 相关电子书
学习笔记
<
1
>
jquery实现的蓝色二级导航条效果代码
本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下： 这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/ 具体代码如下： !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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"titlecss+jquery打造二级横向菜单/titlestyle type="text/css" /#droplinebar {overflow: hidden;}.droplinebar ul{margin: 0;padding: 0;float: left;width: 100%;font: bold 14px Arial, Helvetica, sans-serif,微软雅黑;text-align:center;background: #006b96 url(images/blueactive.gif) center center r……
jquery实现导航菜单伸缩效果
本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下： 这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整的JS、css和jquery部分。 运行效果如下图所示： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu-codes/ 具体代码如下： htmlheadtitle可折叠展开的导航条/titlestylebody{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:\5b8b\4f53,Arial Narrow;background:#fff;}form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}input,select{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}a {color:#00007F;text-decoration:none;}a:hover {color:#bd0a01;text-decoration:underlin……
jQuery实现简单的列表式导航菜单效果代码
本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下： 这里使用jQuery实现简单的列表式导航菜单，是根据网上的一个教程，边看边写的，经过了修正，拷贝代码即可使用。主要实现包括三个部分，一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下： htmlheadtitlejQuery实现简单的列表导航菜单/titlescript type='text/javascript' src='jquery-1.6.2.min.js'/scriptstyle type="text/css"body{font-size:13px}ul,li{list-style-type:none;padding:0px;margin:0px}.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} .content{padding-top:10px;clear:left} a{text-decoration:none;color:#666;padding:10px}.optnFocus{background-color:#fff;fon……