在很多网站的导航菜单的地方,大多数采用可展开的级联菜单。点击主菜单就会展开下面的子菜单,而且在另外一
个地方能够加载远程的网页而且无闪屏不用刷新界面,下面我们来演示一个淡入淡出的带有动态效果的级联菜单的
jQuery的实现。
首先是HTML的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>弹出菜单</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Ajax/js/menu.js"></script>
<link rel="stylesheet" href="/Ajax/css/menu.css" type="text/css"></link>
</head>
<body>
<ul>
<a href="#">我是菜单一</a>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
<ul>
<a href="#">我是菜单二</a>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</body>
</html>
然后是JS文件
/*点击主菜单按钮,显示出来子菜单的东西*/
//在页面装载的时候,给所有ul注册onclick事件
$(function(){
$("a").click(function(){
//当前的ul节点为$(this)
var list = $(this).parent().children("li");
list.toggle("slow");
})
});
下面是CSS文件
li{
list-style: none;
margin-left: 18px;
display: none;
}
ul{
/*将ul变成手形状*/
cursor: pointer;
}
a:LINK {
text-decoration: none;
}
总体来说实现起来还是很简单的,在这个例子的基础上面继续增加什么JSTL标签了等等就能实现从数据库中读取数据
动态的实现树形结构了,而且还有动态的效果,可以说还是很好用的。
分享到:
相关推荐
jquery实现淡入淡出轮播图效果 本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码,供大家参考,具体内容如下 如题所述,直接上代码 <!DOCTYPE html> <html lang="en"> <head> ...
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
jquery图片淡入淡出切换特效是一款点击左右箭头,图片谈出消失,图片淡入显示。
jQuery左右淡入淡出切换幻灯片是一款国产的jQuery幻灯片插件,它非常小巧,压缩后仅3KB。它支持淡入淡出,左右滚动,箭头,圆点控制,自动播放。
jQuery实用淡入淡出幻灯片是一款经典实用的淡入淡出幻灯片,带索引按钮,自动播放,淡入淡出过渡效果。
jquery窗口淡入淡出实例,jquery窗口淡入淡出实例
使用JQuery淡入淡出实现的自动切换图片的源码。
基于jQuery实现淡入淡出的带文字标题图片切换焦点图特效源码.zip
reveal-it.js是一款jQuery文字淡入淡出显示特效插件。该文字特效插件可以使文字从左向右淡入淡出显示。该插件小巧简单,非常适合用于制作标题文字的动画效果。
jQuery淡入淡出下拉菜单是一款基于jquery实现的鼠标响应式下拉导航菜单特效。
实现效果: jQuery点击淡入淡出显示图片特效,点击下方圆中的图片,在上面显示大图,淡入淡出的一种效果,还是很酷炫的!
Jquery淡入淡出幻灯片特效图片切换源码下载
超实用的jQuery淡入淡出焦点图插件 带3D相框 超实用的jQuery淡入淡出焦点图插件 带3D相框
基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,...
用jquery实现提示信息左右淡入淡出滑动
主要为大家详细介绍了jQuery实现淡入淡出的模态框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
viewpagerTab淡入淡出动画
jquery实现窗体淡入淡出效果 div层可以随鼠标移动.很适合做商品信息演示