實(shí)現(xiàn)如下菜單效果
屏幕快照 2017-05-20 下午5.47.54.png
第一步 先實(shí)現(xiàn)布局
<div class="wrap" id="menu">
<ul>
<li data-id="a">
<span>家用電器</span>
</li>
<li data-id="b">
<span>手機(jī)/運(yùn)營(yíng)商/數(shù)碼</span>
</li>
<li data-id="c">
<span>電腦辦公</span>
</li>
<li data-id="d">
<span>家居/家具/家裝/廚具</span>
</li>
<li data-id="e">
<span>男裝/女裝/童裝/內(nèi)衣</span>
</li>
<li data-id="e">
<span>個(gè)戶化妝/清潔用品/寵物</span>
</li>
<li data-id="f">
<span>鞋靴/箱包/珠寶/奢侈品</span>
</li>
<li data-id="g">
<span>運(yùn)動(dòng)/戶外/鐘表</span>
</li>
<li data-id="h">
<span>汽車/汽車用品</span>
</li>
<li data-id="i">
<span>女?huà)?玩具樂(lè)器</span>
</li>
<li data-id="j">
<span>食品/酒類/生鮮/特產(chǎn)</span>
</li>
<li data-id="k">
<span>醫(yī)療保健</span>
</li>
</ul>
</div>
左邊欄是一個(gè)列表竹宋，我們就用ul將這個(gè)列表所有信息都列出來(lái),得到下面的效果
屏幕快照 2017-05-20 下午5.57.49.png
我們開(kāi)始添加css樣式來(lái)實(shí)現(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設(shè)置div是相對(duì)定位侵蒙，因?yàn)榈葧?huì)我們的右邊的詳細(xì)信息會(huì)通過(guò)設(shè)置絕對(duì)定位，外層div是相對(duì)div蕉拢，內(nèi)層的div相對(duì)外層的div進(jìn)行絕對(duì)定位肾请，這樣實(shí)現(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="#">國(guó)產(chǎn)品牌</a>
<a href="#">互聯(lián)網(wǎng)品牌</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">空調(diào)<i>></i></a>
</dt>
<dd>
<a href="#">壁掛式空調(diào)</a>
<a href="#">柜式空調(diào)</a>
<a href="#">中央空調(diào)</a>
<a href="#">空調(diào)配件</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">洗衣機(jī)<i>></i></a>
</dt>
<dd>
<a href="#">滾筒洗衣機(jī)</a>
<a href="#">洗烘一體機(jī)</a>
<a href="#">波輪洗衣機(jī)</a>
<a href="#">迷你洗衣機(jī)</a>
<a href="#">洗衣機(jī)配件</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">冰箱<i>></i></a>
</dt>
<dd>
<a href="#">對(duì)門(mén)</a>
<a href="#">對(duì)開(kāi)門(mén)</a>
<a href="#">三門(mén)</a>
<a href="#">雙門(mén)</a>
<a href="#">冷柜/冰吧</a>
<a href="#">酒柜</a>
<a href="#">冰箱配件</a>
</dd>
</dl>
</div>
添加上右邊詳細(xì)菜單的div元旬，這里因?yàn)槭且粋€(gè)大類后面多個(gè)小類煎楣，使用dt和dd的語(yǔ)義化標(biāo)簽，更好,在添加上布局樣式
.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定位就是絕對(duì)定位以现，這樣實(shí)現(xiàn)貼合左邊布局顯示成功狠怨，這里的小括號(hào)使用了一個(gè)i標(biāo)簽佩抹，同時(shí)這個(gè)i標(biāo)簽,i相對(duì)于外層的dt進(jìn)行了定位，同時(shí)這里設(shè)置的none是為了隱藏右邊取董，會(huì)通過(guò)js動(dòng)態(tài)控制添加的class棍苹，同時(shí)li下的active也是通過(guò)js動(dòng)態(tài)添加。
這里的js代碼已經(jīng)寫(xiě)了詳細(xì)的注釋茵汰，大家可以下源碼枢里，在本地自己打開(kāi)看看
$(document).ready(function(){
var sub = $('#sub'); //jquey獲取頁(yè)面sub元素 sub元素為右側(cè)子菜單的div
var activeRow; //定義變量 鼠標(biāo)動(dòng)態(tài)放置的左側(cè)menu行
var activeMenu; //定義變量 右側(cè)動(dòng)態(tài)展示的子菜單
var timer; //設(shè)置變量 讓鼠標(biāo)移動(dòng)放置菜單時(shí) 有一個(gè)延時(shí)
var mouseInsub = false; //定于變量 鼠標(biāo)是否在右側(cè)子菜單上放置
//這里通過(guò)監(jiān)聽(tīng)鼠標(biāo)是否在右側(cè)子菜單設(shè)置 mouseInsub 是為true和false
sub.on('mouseenter',function(e){
mouseInsub = true;
}).on('mouseleave',function(e){
mouseInsub = false;
})
$('#menu') //menu是最外層的div，這里只要鼠標(biāo)移至這個(gè)div下面就開(kāi)始監(jiān)聽(tīng) 并進(jìn)行一系列控制
.on('mouseenter',function(e){
sub.removeClass('none'); //鼠標(biāo)進(jìn)入menu時(shí)就移除sub最外層的隱藏控制蹂午，sub用了兩層控制是否顯示和隱藏栏豺，可在html中看到兩個(gè)none
})
.on('mouseleave',function(e){
sub.addClass('none'); //鼠標(biāo)移出menu添加none 隱藏sub
//這里判斷是否鼠標(biāo)正放在某個(gè)菜單上，是的話移出已經(jīng)放上去的添加的class效果豆胸，并設(shè)置activeRow為空
if(activeRow){
activeRow.removeClass('active');
activeRow = null;
}
//同理這里判斷是否放在子菜單上
if(activeMenu){
activeMenu.addClass('none');
activeMenu = null;
}
})
//通過(guò)監(jiān)聽(tīng)li的方式奥洼，使不必要每個(gè)li都寫(xiě)觸發(fā)函數(shù)，這里監(jiān)聽(tīng)li晚胡，在通過(guò)e找到當(dāng)前鼠標(biāo)所放的具體是哪個(gè)目標(biāo)li
.on('mouseenter','li',function(e){
//如果鼠標(biāo)之前沒(méi)有放在哪個(gè)菜單上執(zhí)行if里面的操作
if(!activeRow){
activeRow = $(e.target).addClass('active'); //給activeRow賦值為當(dāng)前鼠標(biāo)放上去的菜單
activeMenu = $('#' + activeRow.data('id')); //這里取到html頁(yè)面上設(shè)置data-id的值灵奖，對(duì)應(yīng)sub下的id，可看html
activeMenu.removeClass('none');
return //因?yàn)槭髽?biāo)之前沒(méi)有放在哪個(gè)菜單欄上估盘，添加效果后瓷患，直接返回，不需要進(jìn)行下面操作
}
//這里的timer添加判斷遣妥，是為了只執(zhí)行鼠標(biāo)放上菜單的最后一次操作擅编，不然劃過(guò)幾個(gè)菜單到目標(biāo)菜單，之前的子菜單都會(huì)閃現(xiàn)
//這里添加后clear定時(shí)函數(shù)箫踩，讓之前劃過(guò)的不在執(zhí)行爱态，只執(zhí)行最后停留的那個(gè)方法
if(timer){
clearTimeout(timer);
}
//定時(shí)函數(shù)，讓鼠標(biāo)放上過(guò)300毫秒在出現(xiàn)效果
timer = setTimeout(function(){
//這里判斷鼠標(biāo)是否愛(ài)子菜單境钟，右側(cè)菜單上锦担，如果在，直接return出去吱韭，不用執(zhí)行其他操作了吆豹，不然則繼續(xù)
if(mouseInsub){
return
}
//如果鼠標(biāo)在移動(dòng)來(lái)之前放在其他菜單上，需要清除這些理盆，加一個(gè)if判斷，
//因?yàn)椴患优袛嘀苯訉?xiě)在外面凑阶，因?yàn)閟ettime的原因可能報(bào)錯(cuò)猿规，大家可以試試，但是不影響使用
if(activeRow){
activeRow.removeClass('active');
activeMenu.addClass('none');
}
//重新賦值宙橱，顯示菜單的效果
activeRow = $(e.target);
activeRow.addClass('active');
activeMenu = $('#' + activeRow.data('id'));
activeMenu.removeClass('none');
//最后將定時(shí)器設(shè)置為空
timer = null;
},300)
})
})
