仿淘宝首页产品分类菜单栏的设计

这几天一直在给一家电商搞前端开发，首页做DIV页面重构的时候自然地做到每个电商平台都会有的部分——产品分类菜单栏，如下图截的是淘宝的效果：

其实实现鼠标移到左侧主分类（我们暂且称之为A部分）便显示出右侧详细分类部分（称之为B部分）的功能并不困难，但这里不得不说主流的电商平台在这个地方都有个很好的用户体验，就是B部分的底部总不会被浏览器底部遮住，看看下面的图片分析：

情况⑴——若B底部是不会被浏览器遮住的，那么A和B顶部默认在同一水平线上：

情况⑵——若B底部有可能超过浏览器底部，导致B下方内容被遮住的话，则采取“摒弃A和B顶部在同水平线上”的显示方式，以抬高B位置（抬多高呢？嗯，只要B底端刚好贴住浏览器底端，或者比浏览器低端高一点点就行）来解决问题：

 

下面先说下基础架构和功能的实现吧。首先架构很简单，不外乎是写一层A的DIV(class="maintip")，再写一层对应的B的DIV(class="tips")，HTML如下：

 

  <div class="maintip"><a href="#">服装类</a></div>
  <div class="tips">
     <p>
     <a href="http://www.baidu.com">各种衣服啊</a>
     </p> <br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <p>
     <a href="http://www.baidu.com">来百度一下找衣服啊</a>
     </p>
  </div>
  
  <div class="maintip">家电数码</div>
  <div class="tips">
     <p>
     M8卖那么贵，HTC请你继续flop好么
     </p>
  </div>
  
  <div class="maintip">美食</div>
  <div class="tips">
     <p>
     葡萄酒，白酒，啤酒 <br/><br/><br/><br/><br/><br/><br/><br/><br/>
     我特么只是想把这个框拉长
     </p>
  </div>
  
  <div class="maintip">玩具</div>
  <div class="tips">
     <p>
     <a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
     </p>
  </div>

 

 定义下CSS：

<style type="text/css">
body{
    margin:100px;
}
.maintip{
    position:relative;
    z-index:1;
    border:1px solid #E5D1A1;
    text-align:center; 
    width:200px;
    background:#FFFDD2;  
    height:35px;
    line-height:30px;
}
.tips{
    position:absolute;
    z-index:2;
    width:800px;
    min-height:100px;
    border:1px solid #E5D1A1;
    background:#fff;
    display:none; 
}
</style>

 

注意B部分的position设为absolute。（z-index是为了让A压在B上面，A被选中时，其border-right是不上色的，且要确保该边压在B上面）

接着写下JQuery代码让鼠标移到A的某行，就显示出对应的B的那行，且默认A和B等高：

$(function(){
 
    $(".maintip").each(function(index){   //遍历A部分，注意这里绑定事件用了index参数
        $(this).mouseover(function(){   //鼠标经过A时触发事件
            var obj=$(this).offset();   //获取被鼠标经过的A的偏移位置，offset()是个好东西，不懂的朋友得去了解下
            var xobj=obj.left+200+"px"; //后面要让B水平偏移的距离，这里的“200”是可自定义的，当然你可以改为$(this).width()来获得跟A一样的宽度
            var yobj=obj.top+"px";     //后面要让B垂直偏移的距离
            $(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"});  //A改变样式，变为选中状态的效果
            $(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show();   //对应的（这里利用了索引）B改变样式并显示出来
            })
        .mouseout(function(){     //鼠标离开A时触发的事件
            $(".tips").hide();     //B隐藏
            $(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})   //A变回原始样式
        })
    })
    
         $(".tips").each(function(){  //遍历B
            $(this).mouseover(function(){  //鼠标经过B时触发事件
            $(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})  //对应的A变为选中状态效果
            $(this).show();  //A不要隐藏了，解决因为上面写的鼠标离开A导致A隐藏
        })
        .mouseout(function(){  //鼠标离开B触发事件，其实就是让B隐藏，同时A变为原始状态
            $(this).hide();   
            $(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
        }) 
    })
})

 

 现在效果如下：

 但是现在还没有解决一个问题，就是如果B超过了浏览器下方，导致B的部分内容被遮住怎么办，如下图所示：

其实问题也不难解决，最终措施不外乎是当B超过浏览器底部时，把B往上挪到“B底部与浏览器底部齐平”的位置，如下图：

而具体要挪多高，这个只要获取浏览器当前可视区域的高度就能轻松获得：

如上图所示，B的顶部距离浏览器顶部的距离只要设为“win_h - b_h”即可解决问题。那么我们着手修改下js代码：

$(function(){

$(".maintip").each(function(index){
var tip_height=$(".tips:eq("+index+")").height();
$(this).mouseover(function(){
var win_height=$(window).height();    //获取浏览器当前可视区域高度
var obj=$(this).offset();    
var wobj=$(this).width();
if(obj.top+tip_height<win_height){    //判断B底部是否超过浏览器底部
    //没超过，按默认A和B顶端偏移位置一致即可
    var xobj=obj.left+wobj+"px";
    var yobj=obj.top+"px";
}
else{
    //超过了，那么抬高B顶部位置
    var tip_top=win_height-tip_height;
    var xobj=obj.left+wobj+"px";
    var yobj=tip_top+"px";
}
$(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"});
$(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show();
}).mouseout(function(){
$(".tips").hide();
$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})
})

 })
 
 $(".tips").each(function(){
$(this).mouseover(function(){
$(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})
$(this).show();  
}).mouseout(function(){
$(this).hide(); 
$(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
  }) 
 
      })
})

在JQ里使用$(window).height()来获取浏览器可视区域高度是解决本章所提问题的关键。

最后轻松搞定：

 

我认为一个优秀的前端工程师总会舍得以“更好的体验”为目标来绞尽脑汁、压榨自己，虽然我没达到“优秀前端工程师”的高度，但依旧相信一直强迫自己去实现更多的功能，总会让我有所建树，共勉啦 :)