一直困惑左側菜單導航欄怎么實現的，不過在學過jQuery庫后，可以簡單的代碼就能實現類似於京東，淘寶的左側菜單導航欄了。
下面是實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京東網左側導航實例</title>
<!-- 導入JQuery庫 -->
<script src="https://code.jquery.com/jquery-1.8.2.min.js" integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk=" crossorigin="anonymous"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#e3e4e5;
}
.left-nav{
margin-top: 30px;
height: 468px;
background: #f0f3ef;
}
.left-nav .right{
width: 989px;
height: 468px;
margin: 0 auto;
background-color: #eee;
position: relative;
}
.left-nav .right ul{
list-style: none;
width: 191px;
height: 468px;
background-color:#fff;
}
.left-nav .right ul li{
height: 26px;
text-align: center;
line-height:26px;
color:#636363;
font-size: 14px;
cursor:pointer;
}
.left-nav .right ul li span:hover{
color: red;
}
.left-nav .right ul li .div2{
position:absolute;
left: 191px;
top: 0px;
display:none;
width: 798px;
height: 468px;
text-align: center;
box-shadow: 1px 1px 2px #656565;
}
</style>
</head>
<body>
<div class="left-nav">
<div class="right">
<ul>
<li>
<span>家用電器</span>
<div class="div2">
<h1>家用電器</h1>
<p>收到佛奧東方紅抵抗力哈里還是哈奮達科技安徽分開的狂歡節的蝴蝶結的家伙 卡號對方法</p>
</div>
</li>
<li>
<span>電腦辦公</span>
<div class="div2">
<h1>電腦辦公</h1>
<p>收到佛奧東方紅抵抗力哈里還是哈奮達科技安徽分開的狂歡節的蝴蝶結的家伙 卡號對方法</p>
</div>
</li>
<li>
<span>禮品鮮花</span>
<div class="div2">
<h1>禮品鮮花</h1>
<p>收到佛奧東方紅抵抗力哈里還是哈奮達科技安徽分開的狂歡節的蝴蝶結的家伙 卡號對方法</p>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
//鼠標移入區域時
$('.left-nav .right ul li').mouseenter(function(){
$(this).css({'background':'#eee'});
$(this).find('div').css({'background':'#fff'}).show();//顯示div
$('.div2').not($(this).find('div')).hide();
$('.left-nav .right ul li').not($(this)).css({'background':'#fff'});
});
//鼠標移除區域時
$('.left-nav .right ul li').mouseleave(function(){
$(this).find('div').hide();//隱藏div
$(this).css({'background':'#fff'})
});
</script>
</html>實現效果圖：
