【原创】【Jquery】仿亚马逊分类导航

由于css代码不是本人所写，所以本文中没有贴出css代码。

预览效果图：

js代码：

/******************************************
Functional Description: common.js
Write By zhxhdean
CopyRight@zyue.com
******************************************/
$(function () {
//首页左侧导航
//鼠标移上
$(".index_menu div span").bind("mouseover", function () {
$(".js_gdfl").css("display", "none");
$(this).addClass("js_span_fl");
var idsp = $(this).attr("id").replace("js_sp_", "");
var topsp = 25 * parseInt(idsp);
if (idsp <= 6) {
$(this).next("div").css({ "display": "block", "top": topsp + "px" });
} else if (idsp == 7) {
$(this).next("div").css({ "display": "block", "top": "150px" });
} else {
$(this).next("div").css({ "display": "block", "top": "163px" });
}

})
$(".js_gdfl").bind("mouseover", function () {
$(".js_gdfl").css("display", "none");
$(this).prev().addClass("js_span_fl");
$(this).css("display", "block");
})
//鼠标离开
$(".index_menu div span").bind("mouseout", function () {
$(".js_gdfl").css("display", "none");
$(this).removeClass("js_span_fl");
})
$(".js_gdfl").bind("mouseout", function () {
$(".js_gdfl").css("display", "none");
$(this).prev().removeClass("js_span_fl");
})
})

html部分核心代码：

 
<div class="js_inex_menu_div">
<span id="js_sp_0"><a href="#">精品婚纱 &gt;</a></span>
<div class="js_gdfl">
<ul class="tc_menu">
<li class="tczl">款 式：</li><li class="kslx"><a href="#">抹胸型</a><a href="#">一字肩</a><a
href="#">吊带型</a><a href="#">挂脖型</a><a href="#">深V领</a><a href="#">冬季婚纱</a> <a href="#">
孕妇婚纱</a></span></li>
</ul>
<ul class="tc_menu bj">
<li class="tczl">裙 摆：</li><li class="kslx"><a href="#">抹胸型</a><a href="#">一字肩</a><a
href="#">吊带型</a><a href="#">挂脖型</a><a href="#">深V领</a><a href="#">冬季婚纱</a> <a href="#">
孕妇婚纱</a></span></li>
</ul>
</div>
</div> 

转载于:https://www.cnblogs.com/zhxhdean/archive/2011/06/07/2074504.html