内容介绍
一款基于jquery代码实现的简洁二级下拉导航代码,鼠标悬停后下拉显示二级内容,同时一级栏目背景保持高亮显示。B5教程网推荐下载!站长必备js网页特效及js广告代码,提供高质量js特效下载。
核心代码
<script>
function dropMenu(obj){
$(obj).each(function(){
var theSpan = $(this);
var theMenu = theSpan.find(".submenu");
var tarHeight = theMenu.height();
theMenu.css({height:0,opacity:0});
var t1;
function expand() {
clearTimeout(t1);
theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
}
function collapse() {
clearTimeout(t1);
t1 = setTimeout(function(){
theSpan.find('a').removeClass("selected");
theMenu.stop().animate({height:0,opacity:0},200,function(){
$(this).css({display:"none"});
});
}, 250);
}
theSpan.hover(expand, collapse);
theMenu.hover(expand, collapse);
});
}
$(document).ready(function(){
dropMenu(".drop-menu-effect");
});
</script>