$(document).ready(function(){
//页面中的DOM已经装载完成找到main下的子结点a,然后触发事件,但是不会触发子菜单
$('.main > a').click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next('ul');
/*方法一:
if(ulNode.css('display') == 'none') {
ulNode.css('display','block');
} else {
ulNode.css('display','none');
}
*/
/*
方法二:具有动画效果
ulNode.show(500);
三种文字性参数的用法 时间由jquery内部自定义
ulNode.show('fast');// normal slow
ulNode.hide();
toggle方法省去自己写if else这样繁琐的判断
是jquery为了配合show hide();
ulNode.toggle();
*/
/*
方法三:具有卷帘效果
ulNode.slideDown();//也可以加参数slow normal fast
ulNode.slideUp();
*/
ulNode.slideToggle();//也可以加参数slow normal fast
changeIcon($(this));
});
/*鼠标进入出现 但是有bug 一进入子菜单后立即被收起
$('.hmain > a').hover(function(){
$(this).next('ul').slideDown();
},function(){
$(this).next('ul').slideUp();
});
*/
/*鼠标进入出现具有延时操作,鼠标进入主菜单进入子菜单再进入主菜单子菜单又出现
//鼠标进入主菜单
$('.hmain > a').hover(function(){
//将子菜单放下
$(this).next('ul').slideDown();
},function(){
var ulNode = $(this).next('ul');
//设置延时
var timeoutId = setTimeout(function(){
//将子菜单收起
ulNode.slideUp();
},300);
//对于鼠标进入子菜单项的设置
ulNode.hover(function(){
//清除延时 子菜单不会立即被收起来
clearTimeout(timeoutId);
},function(){
//如果鼠标从子菜单项离开的话将子菜单收起
$(this).slideUp();
});
});
*/
/*鼠标进入出现具有延时操作,鼠标离开子菜单时 子菜单闪动出现*/
//鼠标进入主菜单
$('.hmain').hover(function(){
//将子菜单放下
$(this).children('ul').slideDown();
changeIcon($(this).children('a'));
},function(){
$(this).children('ul').slideUp();
changeIcon($(this).children('a'));
});
});
/**
修改主菜单的指示图标
*/
function changeIcon(mainNode) {
//如果结点不为空
if(mainNode) {
if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) {
mainNode.css("background-image","url('../images/expanded.gif')");
} else {
mainNode.css("background-image","url('../images/collapsed.gif')");
}
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 如果删除doctype就会出现闪动效果,使整体效果变差,在IE里不会变成小手 -->
<html>
<head>
<title>JQuery-菜单效果</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/menu.css" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
</html>
注: 附件是全代码 效果看html文件夹中的html
分享到:
相关推荐
html+jquery+CSS实现最简单的右侧导航栏效果
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
Jquery+CSS打造的滑动下拉菜单.txt )
非常酷炫的jQuery+css超滑二级下拉菜单,用来做网站的朋友,一定用的上。
一款jquery+css3实现图片提示效果的例子。
jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单
jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip
jQuery+CSS3多功能下拉菜单.zip
jquery+css3弹性动感下拉菜单.zip
jQuery+CSS3飘带式下拉菜单.zip
jQuery+CSS实现淡入效果的超链接样式,代码简单,容易使用!
jQuery+css3实现信封效果 jQuery+css3实现信封网页特效.zip
jQuery+CSS实现的图片滚动效果
jQuery+CSS3实现的大屏下拉菜单效果源码.zip
点击图片后,呈现立体展现方式
jQuery+CSS3垂直菜单效果.zip
一款基于jQuery+CSS3+HTML5实现的折叠卡片式下拉菜单特效代码,有一种3D立体效果的下拉菜单代码。
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip