淘宝首页左侧的产品分类菜单栏是竖向的,鼠标移至一级菜单上面,右侧会列举显示所有二级菜单。不仅美观大方,而且节约空间。对于信息量比较大的网站首页而言,这是一种很值得参考的做法,今天我们就来仿制一套淘宝首页竖向菜单效果。
先看淘宝首页竖向菜单效果图:
这里面值得一提的是:
情况⑴——若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()来获取浏览器可视区域高度是解决本章所提问题的关键。
最后轻松搞定:
以上就是效果图。和淘宝首页产品分类菜单效果还有些差距,但是大体已经有了,具体细节还需要大家自己动手继续努力吧。