仿淘宝商城菜单，智能定位子导航位置

答案：<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>仿淘宝商城菜单，智能定位子导航位置</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<style>
*{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;}
</style>
<div id="nav">
  <ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <div class="subcategory hidden">
    <div style="height:500px;">c1</div>
    <div style="height:300px;">c2</div>
    <div style="height:400px;">c3</div>
    <div style="height:200px;">c4</div>
    <div style="height:300px;">c5</div>
    <div style="height:600px;">c6</div>
  </div>
</div>
<script type="text/javascript"> 
$(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');
    });
	//鼠标进入动作结束
	
});
</script>
</body>
</html>
上一个：凡客网顶部菜单，可多次调用
下一个：桔黄色漂亮的js+css二级菜单代码
更多图片编程知识: