實現(xiàn)如下菜單效果
屏幕快照 2017-05-20 下午5.47.54.png
第一步 先實現(xiàn)布局
<div class="wrap" id="menu">
<ul>
<li data-id="a">
<span>家用電器</span>
</li>
<li data-id="b">
<span>手機/運營商/數(shù)碼</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>醫(yī)療保健</span>
</li>
</ul>
</div>
左邊欄是一個列表，我們就用ul將這個列表所有信息都列出來,得到下面的效果
屏幕快照 2017-05-20 下午5.57.49.png
我們開始添加css樣式來實現(xiàn)左邊欄的樣式
.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進行絕對定位，這樣實現(xiàn)布局的效果
<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="#">互聯(lián)網(wǎng)品牌</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定位就是絕對定位，這樣實現(xiàn)貼合左邊布局顯示成功，這里的小括號使用了一個i標簽，同時這個i標簽,i相對于外層的dt進行了定位，同時這里設置的none是為了隱藏右邊，會通過js動態(tài)控制添加的class，同時li下的active也是通過js動態(tài)添加。
這里的js代碼已經(jīng)寫了詳細的注釋，大家可以下源碼，在本地自己打開看看
$(document).ready(function(){
var sub = $('#sub'); //jquey獲取頁面sub元素 sub元素為右側子菜單的div
var activeRow; //定義變量 鼠標動態(tài)放置的左側menu行
var activeMenu; //定義變量 右側動態(tài)展示的子菜單
var timer; //設置變量 讓鼠標移動放置菜單時 有一個延時
var mouseInsub = false; //定于變量 鼠標是否在右側子菜單上放置
//這里通過監(jiān)聽鼠標是否在右側子菜單設置 mouseInsub 是為true和false
sub.on('mouseenter',function(e){
mouseInsub = true;
}).on('mouseleave',function(e){
mouseInsub = false;
})
$('#menu') //menu是最外層的div，這里只要鼠標移至這個div下面就開始監(jiān)聽 并進行一系列控制
.on('mouseenter',function(e){
sub.removeClass('none'); //鼠標進入menu時就移除sub最外層的隱藏控制，sub用了兩層控制是否顯示和隱藏，可在html中看到兩個none
})
.on('mouseleave',function(e){
sub.addClass('none'); //鼠標移出menu添加none 隱藏sub
//這里判斷是否鼠標正放在某個菜單上，是的話移出已經(jīng)放上去的添加的class效果，并設置activeRow為空
if(activeRow){
activeRow.removeClass('active');
activeRow = null;
}
//同理這里判斷是否放在子菜單上
if(activeMenu){
activeMenu.addClass('none');
activeMenu = null;
}
})
//通過監(jiān)聽li的方式，使不必要每個li都寫觸發(fā)函數(shù)，這里監(jiān)聽li，在通過e找到當前鼠標所放的具體是哪個目標li
.on('mouseenter','li',function(e){
//如果鼠標之前沒有放在哪個菜單上執(zhí)行if里面的操作
if(!activeRow){
activeRow = $(e.target).addClass('active'); //給activeRow賦值為當前鼠標放上去的菜單
activeMenu = $('#' + activeRow.data('id')); //這里取到html頁面上設置data-id的值，對應sub下的id，可看html
activeMenu.removeClass('none');
return //因為鼠標之前沒有放在哪個菜單欄上，添加效果后，直接返回，不需要進行下面操作
}
//這里的timer添加判斷，是為了只執(zhí)行鼠標放上菜單的最后一次操作，不然劃過幾個菜單到目標菜單，之前的子菜單都會閃現(xiàn)
//這里添加后clear定時函數(shù)，讓之前劃過的不在執(zhí)行，只執(zhí)行最后停留的那個方法
if(timer){
clearTimeout(timer);
}
//定時函數(shù)，讓鼠標放上過300毫秒在出現(xiàn)效果
timer = setTimeout(function(){
//這里判斷鼠標是否愛子菜單，右側菜單上，如果在，直接return出去，不用執(zhí)行其他操作了，不然則繼續(xù)
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)
})
})
