左边商品分类导航菜单Jquery特效是商城必不可少的神兵利器之一,今天刚好有空就整理了这款绿色的左边商品分类导航菜单出来分享给大家用。
主要包括了以下特点:
1、鼠标悬浮事件
2、弹出右边提示层
3、可支持Ajax数据加载
4、兼容IE6显示所有select 元素
主要代码如下:
$('div#nav > ul > li').hover(
function(ev){
var $this = this;
allCateTimer = setTimeout(function() {
var bottomHeight = document.documentElement.clientHeight - ev.clientY;
if (bottomHeight <= 250) {
$($this).addClass('over').find('div.submenubox').addClass('submenuboxBottom').removeClass('disn');
} else {
$($this).addClass('over').find('div.submenubox').removeClass('submenuboxBottom').removeClass('disn');
}
//兼容IE6隐藏所有select 元素
$("select").each(function() {
if ($(this).css('visibility') != 'hidden') {
$(this).addClass('menuVisible').css('visibility', 'hidden');
}
});
if ($($this).find("div.subcate").size()<= 0) {
async_topMenu($this);
}
}, delay);
},
function(){
var $this = this;
if (allCateTimer) {
clearTimeout(allCateTimer);
}
allCateTimer = setTimeout(function() {
$($this).removeClass('over').find('div.submenubox').addClass('disn');}, delay);
}
);
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
导航菜单 弹出层 二级菜单 天猫左侧分类导航 分类导航菜单