脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery实现级联菜单效果(仿淘宝首页菜单动画)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
相信初学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">
<p class="title">
<span>电脑数码类产品</span>
</p>
<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>
. 代码如下:
@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;
}
p{
padding: 10px;
}
.tip{
width: 190px;
border: 2px red solid;
position: absolute;
background-color: #fff;
display: none;
}
.tip li{
line-height: 23px;
}
. 代码如下:
$(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");
});
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery实现级联菜单效果(仿淘宝首页菜单动画)全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery实现级联菜单效果(仿淘宝首页菜单动画)所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。