JQUERY实现天猫商城左侧菜单子导航位置定位-优快云博客

本文介绍了一种使用JQUERY实现的类似天猫商城的左侧菜单子导航位置定位效果。通过巧妙的鼠标悬停交互，使菜单项及其子内容能够平滑地展示，并自动调整位置以适应不同的屏幕高度。

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

演示地址：http://www.iiwnet.com/js_menu/1036.html

代码分享：

<!DOCTYPE HTML>
<html>
<head>
<FCK:meta charset="utf-8" />
<title>JQUERY实现天猫商城左侧菜单子导航位置定位丨爱微网 | BY:www.iiwnet.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></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>

转载于:https://my.oschina.net/xixios/blog/84532