jQuery实现级联菜单效果(仿淘宝首页菜单动画)

更新时间：2014年04月10日 16:35:10 作者：

今天我们就带大家体会一下级联菜单的显示，只是实现了简单的效果，不过大都原理是一样的

相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧。今天我们就带大家体会一下级联菜单的显示。小编我只是实现了简单地效果，不过总体来说原理是一样的哦，那么先让大家看看效果图吧。

那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了，先上html和css的代码

复制代码代码如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>menu.html</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" type="text/css" href="../css/menu.css"> 
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="../js/menu.js"></script> 

</head> 

<body> 
<ul> 
<li class="menu"> 
<div class="title"> 
<span>电脑数码类产品</span> 
</div> 
<ul class="content"> 
<li class="optn"><a href="#">笔记本</a> 
<ul class="tip"> 
<li><a href="#">笔记本1</a></li> 
<li><a href="#">笔记本1</a></li> 
<li><a href="#">笔记本1</a></li> 
<li><a href="#">笔记本1</a></li> 
</ul> 
</li> 

<li class="optn"><a href="#">移动硬盘</a> 
<ul class="tip"> 
<li><a href="#">移动硬盘1</a></li> 
<li><a href="#">移动硬盘1</a></li> 
<li><a href="#">移动硬盘1</a></li> 
<li><a href="#">移动硬盘1</a></li> 

</ul> 
</li> 
<li class="optn"><a href="#">电脑软件</a> 
<ul class="tip"> 
<li><a href="#">电脑软件1</a></li> 
<li><a href="#">电脑软件1</a></li> 
<li><a href="#">电脑软件1</a></li> 
<li><a href="#">电脑软件1</a></li> 

</ul> 
</li> 
<li class="optn"><a href="#">数码产品</a> 
<ul class="tip"> 
<li><a href="#">数码产品1</a></li> 
<li><a href="#">数码产品1</a></li> 
<li><a href="#">数码产品1</a></li> 
<li><a href="#">数码产品1</a></li> 
</ul> 
</li> 

</ul> 
</li> 

</ul> 
</body> 
</html> 

menu.css

复制代码代码如下:

 
@CHARSET "UTF-8"; 

*{ 
margin: 0px; 
padding: 0px; 

} 

ul,li{ 
list-style-type: none; 

} 

.menu{ 
width: 190px; 
border: 1px red solid; 
background-color: #fffdd2; 
} 

.optn{ 
width: 190px; 
line-height: 28px; 
border-top: 1px red dashed; 

} 


.content{ 
padding-top:10px; 
clear: left; 
} 


a{ 
text-decoration: none; 
color: #666; 
padding: 10px; 
} 
.optnFocus{ 
background-color: #fff; 
font-weight: bold; 

} 

div{ 
padding: 10px; 
} 

.tip{ 
width: 190px; 
border: 2px red solid; 
position: absolute; 
background-color: #fff; 
display: none; 
} 

.tip li{ 
line-height: 23px; 
} 

接下来就是主要的jquery代码:menu.js

复制代码代码如下:

 
$(function(){ 

var curY;//获取所选想的TOP 
var curH;//获取所选的Height 
var curW;//获取所选的width 
var objL;//获取当前对象 

//自定义函数用于获取当前位置 
function setInitValue(obj){ 
curY=obj.offset().top; 
curH=obj.height(); 
curW=obj.width(); 
} 

//设置当前所选项的鼠标滑动事件 
$(".optn").mouseover(function(){ 
objL=$(this);//获取当前对象 
setInitValue(objL); 
var allY=curY-curH +"px"; 

objL.addClass("optnFocus"); 
//获取气元素下的下一个ul 
$(".tip",this).show().css({"top":allY,"left":curW});; 

}); 
$(".optn").mouseout(function(){ 

$(this).removeClass("optnFocus"); 
$(".tip",this).hide(); 

}); 

//为了防止移到子菜单时子菜单不见，我们也要为子菜单设置鼠标事件 

$(".tip").mouseover(function(){ 

$(this).show(); 
objL=$(this).prev("li"); 
setInitValue(objL); 
objL.addClass("optnFocus"); 
}); 

$(".tip").mouseout(function(){ 
$(this).hide(); 
$(this).prev("li").removeClass("optnFocus"); 

}); 
}); 

注意要点：

1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp)，在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择

2.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在我们移动到子选项卡中，突然消失。

要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦

您可能感兴趣的文章:

级联菜单

详解jQuery中的DOM操作
本文主要对jQuery中的DOM操作进行了详细全面的介绍。文中举了简单例子，便于理解与学习，对初学者具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题，感兴趣的小伙伴们可以参考一下
2016-04-04
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts实现的MSBar2D图效果,结合实例形式分析了jQuery使用FusionCharts插件结合xml数据载入实现绘制MSBar2D图的相关实现技巧,并附带demo源码供读者下载,需要的朋友可以参考下
2017-03-03
jquery插件懒加载的示例
这篇文章主要介绍了jquery插件懒加载的示例，帮助大家更好的利用jQuery制作网页，感兴趣的朋友可以了解下
2020-10-10
jquery网页元素拖拽插件效果及实现
效果说明：配合已有css样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z-index的插件，模拟windows窗口点击置顶效果。
2013-08-08
jQuery学习笔记之Helloworld
刚学习jQuery，觉得有的东西确实有必要写下来，加深下记忆，本文纯属给自己写的，希望大家不要见笑。
2010-12-12
jQuery判断是否存在滚动条的简单方法
下面小编就为大家带来一篇jQuery判断是否存在滚动条的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JQuery的Alert消息框插件使用介绍
没有厌倦了原来那alert那个风格，总是一个感叹号。有时使得UE不好，今天我们介绍使用Jquery Alert插件，使用它可以用来替换JScript中的alert,confirm,prompt。
2010-10-10
JQuery遍历DOM节点的方法
这篇文章主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下
2015-06-06
jQuery之ajax技术的详细介绍
本篇文章是对jQuery中的ajax技术进行了详细的分析介绍，需要的朋友参考下
2013-06-06