相信初学htm+div+cssl的同学们肯定也想做出淘宝网首页的菜单动画吧。今天我们就带大家体会一下级联菜单的显示。小编我只是实现了简单地效果，不过总体来说原理是一样的哦，那么先让大家看看效果图吧。
那么要实现这个效果我们当然要使用到的是jquery,那么我就开始讲解怎么做的了，先上html和css的代码
复制代码 代码如下:
menu.html
电脑数码类产品
笔记本
笔记本1
笔记本1
笔记本1
笔记本1
移动硬盘
移动硬盘1
移动硬盘1
移动硬盘1
移动硬盘1
电脑软件
电脑软件1
电脑软件1
电脑软件1
电脑软件1
数码产品
数码产品1
数码产品1
数码产品1
数码产品1
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.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在我们移动到子选项卡中，突然消失。
要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦