实现电商菜单切换效果
2017-05-20 本文已影响96人
我叫陈小宝T_T
实现如下菜单效果
屏幕快照 2017-05-20 下午5.47.54.png
第一步 先实现布局
<div class="wrap" id="menu">
<ul>
<li data-id="a">
<span>家用电器</span>
</li>
<li data-id="b">
<span>手机/运营商/数码</span>
</li>
<li data-id="c">
<span>电脑办公</span>
</li>
<li data-id="d">
<span>家居/家具/家装/厨具</span>
</li>
<li data-id="e">
<span>男装/女装/童装/内衣</span>
</li>
<li data-id="e">
<span>个户化妆/清洁用品/宠物</span>
</li>
<li data-id="f">
<span>鞋靴/箱包/珠宝/奢侈品</span>
</li>
<li data-id="g">
<span>运动/户外/钟表</span>
</li>
<li data-id="h">
<span>汽车/汽车用品</span>
</li>
<li data-id="i">
<span>女婴/玩具乐器</span>
</li>
<li data-id="j">
<span>食品/酒类/生鲜/特产</span>
</li>
<li data-id="k">
<span>医疗保健</span>
</li>
</ul>
</div>
左边栏是一个列表，我们就用ul将这个列表所有信息都列出来,得到下面的效果
屏幕快照 2017-05-20 下午5.57.49.png
我们开始添加css样式来实现左边栏的样式
.wrap{
position: relative;
width: 200px;
top: 50px;
left: 50px;
}
ul{
padding: 15px 0;
margin: 9px 0;
list-style: none;
background-color: #6c6669;
color: #fff;
border-right-width: 0;
}
li{
display: block;
height: 30px;
line-height: 30px;
padding-left: 12px;
cursor: pointer;
font-size: 14px;
position: relative;
}
li.active{
background: #999395;
}
li span:hover{
color: #c81623;
}
这里我们最外层的div设置div是相对定位，因为等会我们的右边的详细信息会通过设置绝对定位，外层div是相对div，内层的div相对外层的div进行绝对定位，这样实现布局的效果
<div id="sub" class="">
<div id="a" class="sub_content ">
<dl>
<dt>
<a href="#">电视<i>></i></a>
</dt>
<dd>
<a href="#">合资品牌</a>
<a href="#">国产品牌</a>
<a href="#">互联网品牌</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">空调<i>></i></a>
</dt>
<dd>
<a href="#">壁挂式空调</a>
<a href="#">柜式空调</a>
<a href="#">中央空调</a>
<a href="#">空调配件</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">洗衣机<i>></i></a>
</dt>
<dd>
<a href="#">滚筒洗衣机</a>
<a href="#">洗烘一体机</a>
<a href="#">波轮洗衣机</a>
<a href="#">迷你洗衣机</a>
<a href="#">洗衣机配件</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">冰箱<i>></i></a>
</dt>
<dd>
<a href="#">对门</a>
<a href="#">对开门</a>
<a href="#">三门</a>
<a href="#">双门</a>
<a href="#">冷柜/冰吧</a>
<a href="#">酒柜</a>
<a href="#">冰箱配件</a>
</dd>
</dl>
</div>
添加上右边详细菜单的div，这里因为是一个大类后面多个小类，使用dt和dd的语义化标签，更好,在添加上布局样式
.none{
display: none;
}
#sub{
width: 600px;
position: absolute;
border: 1px solid #f7f7f7;
background: #f7f7f7;
box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
left: 200px;
top: 0;
box-sizing: border-box;
margin: 0;
padding: 10px;
}
.sub_content a{
font-size: 12px;
color: #666;
text-decoration: none
}
.sub_content dd a{
border-left: 1px solid #e0e0e0;
padding: 0 10px;
margin: 4px 0;
}
.sub_content dl {
overflow: hidden;
}
.sub_content dt{
float: left;
width: 70px;
font-weight: bold;
clear: left;
position: relative;
}
.sub_content dd{
float: left;
margin-left: 5px;
border-top: 1px solid #eee;
margin-bottom: 5px;
}
.sub_content dt i{
width: 4px;
height: 14px;
font: 400 9px/14px consolas;
position: absolute;
right: 5px;
top: 5px;
}
屏幕快照 2017-05-20 下午6.17.48.png
这里的sub定位就是绝对定位，这样实现贴合左边布局显示成功，这里的小括号使用了一个i标签，同时这个i标签,i相对于外层的dt进行了定位，同时这里设置的none是为了隐藏右边，会通过js动态控制添加的class，同时li下的active也是通过js动态添加。
这里的js代码已经写了详细的注释，大家可以下源码，在本地自己打开看看
$(document).ready(function(){
var sub = $('#sub'); //jquey获取页面sub元素 sub元素为右侧子菜单的div
var activeRow; //定义变量 鼠标动态放置的左侧menu行
var activeMenu; //定义变量 右侧动态展示的子菜单
var timer; //设置变量 让鼠标移动放置菜单时 有一个延时
var mouseInsub = false; //定于变量 鼠标是否在右侧子菜单上放置
//这里通过监听鼠标是否在右侧子菜单设置 mouseInsub 是为true和false
sub.on('mouseenter',function(e){
mouseInsub = true;
}).on('mouseleave',function(e){
mouseInsub = false;
})
$('#menu') //menu是最外层的div，这里只要鼠标移至这个div下面就开始监听 并进行一系列控制
.on('mouseenter',function(e){
sub.removeClass('none'); //鼠标进入menu时就移除sub最外层的隐藏控制，sub用了两层控制是否显示和隐藏，可在html中看到两个none
})
.on('mouseleave',function(e){
sub.addClass('none'); //鼠标移出menu添加none 隐藏sub
//这里判断是否鼠标正放在某个菜单上，是的话移出已经放上去的添加的class效果，并设置activeRow为空
if(activeRow){
activeRow.removeClass('active');
activeRow = null;
}
//同理这里判断是否放在子菜单上
if(activeMenu){
activeMenu.addClass('none');
activeMenu = null;
}
})
//通过监听li的方式，使不必要每个li都写触发函数，这里监听li，在通过e找到当前鼠标所放的具体是哪个目标li
.on('mouseenter','li',function(e){
//如果鼠标之前没有放在哪个菜单上执行if里面的操作
if(!activeRow){
activeRow = $(e.target).addClass('active'); //给activeRow赋值为当前鼠标放上去的菜单
activeMenu = $('#' + activeRow.data('id')); //这里取到html页面上设置data-id的值，对应sub下的id，可看html
activeMenu.removeClass('none');
return //因为鼠标之前没有放在哪个菜单栏上，添加效果后，直接返回，不需要进行下面操作
}
//这里的timer添加判断，是为了只执行鼠标放上菜单的最后一次操作，不然划过几个菜单到目标菜单，之前的子菜单都会闪现
//这里添加后clear定时函数，让之前划过的不在执行，只执行最后停留的那个方法
if(timer){
clearTimeout(timer);
}
//定时函数，让鼠标放上过300毫秒在出现效果
timer = setTimeout(function(){
//这里判断鼠标是否爱子菜单，右侧菜单上，如果在，直接return出去，不用执行其他操作了，不然则继续
if(mouseInsub){
return
}
//如果鼠标在移动来之前放在其他菜单上，需要清除这些，加一个if判断，
//因为不加判断直接写在外面，因为settime的原因可能报错，大家可以试试，但是不影响使用
if(activeRow){
activeRow.removeClass('active');
activeMenu.addClass('none');
}
//重新赋值，显示菜单的效果
activeRow = $(e.target);
activeRow.addClass('active');
activeMenu = $('#' + activeRow.data('id'));
activeMenu.removeClass('none');
//最后将定时器设置为空
timer = null;
},300)
})
})
