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

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

【仿淘宝首页产品分类菜单栏的设计】其实实现鼠标移到左侧主分类(我们暂且称之为A部分)便显示出右侧详细分类部分(称之为B部分)的功能并不困难,但这里不得不说主流的电商平台在这个地方都有个很好的用户体验,就是B部分的底部总不会被浏览器底部遮住,看看下面的图片分析:
情况⑴——若B底部是不会被浏览器遮住的,那么A和B顶部默认在同一水平线上:
仿淘宝首页产品分类菜单栏的设计
文章图片

情况⑵——若B底部有可能超过浏览器底部,导致B下方内容被遮住的话,则采取“摒弃A和B顶部在同水平线上”的显示方式,以抬高B位置(抬多高呢?嗯,只要B底端刚好贴住浏览器底端,或者比浏览器低端高一点点就行)来解决问题:
仿淘宝首页产品分类菜单栏的设计
文章图片


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

仿淘宝首页产品分类菜单栏的设计
文章图片
仿淘宝首页产品分类菜单栏的设计
文章图片

1 2 10 11
家电数码
12
13 14M8卖那么贵,HTC请你继续flop好么 15
16
17 18
美食
19
20 21葡萄酒,白酒,啤酒








22我特么只是想把这个框拉长 23
24
25 26
玩具
27

View Code
定义下CSS:
仿淘宝首页产品分类菜单栏的设计
文章图片
仿淘宝首页产品分类菜单栏的设计
文章图片
1 2 body{ 3margin:100px; 4 } 5 .maintip{ 6position:relative; 7z-index:1; 8border:1px solid #E5D1A1; 9text-align:center; 10width:200px; 11background:#FFFDD2; 12height:35px; 13line-height:30px; 14 } 15 .tips{ 16position:absolute; 17z-index:2; 18width:800px; 19min-height:100px; 20border:1px solid #E5D1A1; 21background:#fff; 22display:none; 23 } 24

View Code
注意B部分的position设为absolute。(z-index是为了让A压在B上面,A被选中时,其border-right是不上色的,且要确保该边压在B上面)
接着写下JQuery代码让鼠标移到A的某行,就显示出对应的B的那行,且默认A和B等高:
1 $(function(){ 2 3$(".maintip").each(function(index){//遍历A部分,注意这里绑定事件用了index参数 4$(this).mouseover(function(){//鼠标经过A时触发事件 5var obj=$(this).offset(); //获取被鼠标经过的A的偏移位置,offset()是个好东西,不懂的朋友得去了解下 6var xobj=obj.left+200+"px"; //后面要让B水平偏移的距离,这里的“200”是可自定义的,当然你可以改为$(this).width()来获得跟A一样的宽度 7var yobj=obj.top+"px"; //后面要让B垂直偏移的距离 8$(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"}); //A改变样式,变为选中状态的效果 9$(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show(); //对应的(这里利用了索引)B改变样式并显示出来 10}) 11.mouseout(function(){//鼠标离开A时触发的事件 12$(".tips").hide(); //B隐藏 13$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})//A变回原始样式 14}) 15}) 16 17$(".tips").each(function(){//遍历B 18$(this).mouseover(function(){//鼠标经过B时触发事件 19$(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})//对应的A变为选中状态效果 20$(this).show(); //A不要隐藏了,解决因为上面写的鼠标离开A导致A隐藏 21}) 22.mouseout(function(){//鼠标离开B触发事件,其实就是让B隐藏,同时A变为原始状态 23$(this).hide(); 24$(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"}); 25}) 26}) 27 })


现在效果如下:
仿淘宝首页产品分类菜单栏的设计
文章图片

但是现在还没有解决一个问题,就是如果B超过了浏览器下方,导致B的部分内容被遮住怎么办,如下图所示:
仿淘宝首页产品分类菜单栏的设计
文章图片

其实问题也不难解决,最终措施不外乎是当B超过浏览器底部时,把B往上挪到“B底部与浏览器底部齐平”的位置,如下图:
仿淘宝首页产品分类菜单栏的设计
文章图片

而具体要挪多高,这个只要获取浏览器当前可视区域的高度就能轻松获得:
仿淘宝首页产品分类菜单栏的设计
文章图片

如上图所示,B的顶部距离浏览器顶部的距离只要设为“win_h - b_h”即可解决问题。那么我们着手修改下js代码:
1 $(function(){ 2 3 $(".maintip").each(function(index){ 4 var tip_height=$(".tips:eq("+index+")").height(); 5 $(this).mouseover(function(){ 6 var win_height=$(window).height(); //获取浏览器当前可视区域高度 7 var obj=$(this).offset(); 8 var wobj=$(this).width(); 9 if(obj.top+tip_height
在JQ里使用$(window).height()来获取浏览器可视区域高度是解决本章所提问题的关键。
最后轻松搞定:
仿淘宝首页产品分类菜单栏的设计
文章图片


我认为一个优秀的前端工程师总会舍得以“更好的体验”为目标来绞尽脑汁、压榨自己,虽然我没达到“优秀前端工程师”的高度,但依旧相信一直强迫自己去实现更多的功能,总会让我有所建树,共勉啦 :)
仿淘宝首页产品分类菜单栏的设计
文章图片

转载于:https://www.cnblogs.com/vajoy/p/3631378.html

    推荐阅读