php 左边导航菜单,JQUERY实现天猫商城左侧菜单子导航位置定位-CSDN博客

鼠标移到第6个会自动变化位置定位------------学习下很有用处，也可以直接拿来美化下就可以做导航了

代码分享：

JQUERY实现天猫商城左侧菜单子导航位置定位丨爱微网 | BY:www.iiwnet.com

*{margin:0;padding:0; font-size:100%;}

ul, ol {list-style:none;}

.hidden{display:none;}

#nav{position:relative; margin:50px;}

.menu {width:190px; background:#736867;}

.menu li{border-bottom:1px solid #847978; cursor:pointer; padding: 3px 0 4px; text-align:center; height:25px;}

.menu .cur{background:#958a89;}

.subcategory{width:400px; position:absolute;left:190px; top:0; background:#958a89;}

.subcategory div{background:#ccc; padding:10px;}

$(document).ready(function(){

//鼠标进入动作开始

var nav = $('#nav'), menu = $('.menu'), subcategory = $('.subcategory');

//鼠标进入主菜单开始

menu.delegate('li', 'mouseenter', function(){

subcategory.children().addClass('hidden'); //让子菜单隐藏

var i = $('li').index(this); //获得当前菜单序列

var s = subcategory.children().eq(i); //获得当前菜单子内容序列

s.removeClass('hidden'); //让当前子菜单显示

$(this).addClass('cur'); //当前菜单高亮

subcategory.removeClass('hidden'); //子菜单盒子显示

//智能定位

var e = $(this), z = 20, u = 0;

var c = e.offset(), //获取当前菜单的在当前视口的相对偏移位置

y = e.height(), //获取当前菜单的高度

v = nav.offset(), //获取导航在当前视口的相对偏移位置

t = subcategory.height(), //获取子菜单的高度

w = $(window).height(), //获取窗口的高度

q = $(window).scrollTop(), //获取滚动条上方的位置

r = w - t - (c.top - q),

x = Math.abs(c.top - q - v.top),

b = w - (c.top - q),

p = c.top - v.top;

if (r <= 0) {

r = Math.abs(r);

if (b > y) {

u = b - y;

if (u > z) {

p = p - r - z + 7;

} else {

p = p - r;

}

} else {

p = p - r + z + b + 20;

}

if (p < 0){p = 0;}

subcategory.css("top", p + "px");

//智能定位结束

//subcategory元素附加一个事件处理函数

subcategory.live("mouseenter", function(){

menu.children().removeClass("cur");

menu.children().eq(i).addClass("cur");

subcategory.removeClass("hidden");

});

//鼠标进入主菜单结束

//鼠标离开subcategory元素执行函数

subcategory.delegate(subcategory, 'mouseleave', function(){

$(this).addClass("hidden");

subcategory.addClass("hidden");

menu.children().removeClass("cur");

});

//鼠标离开menu元素执行函数

menu.delegate('li', 'mouseleave', function () {

$(this).removeClass('cur');

subcategory.addClass('hidden');

});

//鼠标进入动作结束

});