左右式相應彈出選單欄
阿新 • • 發佈：2018-11-11
在做之前我們首先需要引入bootstrap和jquery
<script src="js/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" >
<----------------HTML部分----------------->
<div style="position: relative;">
<div class="productsAsideCategory" cid="1" style="display: none">
<div class="row">
<a href="#nowhere">
大屏影院
</a>
<a href="#nowhere" >
週末
</a>
<a href="#nowhere" >
新品特惠
</a>
<a href="#nowhere">
32吋電視機
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智慧網路
</a>
<div class="seperator"></div>
</div>
<div class="row">
<a href="#nowhere">
USB高清解
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
芒果TV線上
</a>
<a href="#nowhere">
搶購價
</a>
<a href="#nowhere">
USB解碼
</a>
<a href="#nowhere">
32英吋
</a>
<a href="#nowhere">
10核
</a>
<a href="#nowhere">
TCL品牌日
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
不要贈品
</a>
<a href="#nowhere">
新品上市
</a>
<a href="#nowhere">
4K硬屏
</a>
<a href="#nowhere">
領100元券
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智慧高清
</a>
<a href="#nowhere">
8月，酷暑
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
8月大促
</a>
<a href="#nowhere">
天貓定製
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智慧作業系統
</a>
<a href="#nowhere">
金色外觀
</a>
<a href="#nowhere">
三星螢幕
</a>
<a href="#nowhere">
客廳爆款
</a>
<a href="#nowhere">
八核配置
</a>
<a href="#nowhere">
限時特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
限時特惠
</a>
<a href="#nowhere">
熱銷爆款
</a>
<a href="#nowhere">
4K全高清
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
六核智慧
</a>
<a href="#nowhere">
14核4K
</a>
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
YUNOS
</a>
<a href="#nowhere">
64位處理器
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere">
微信電視
</a>
<a href="#nowhere">
4k超清
</a>
<a href="#nowhere"style="color: rgb(135, 206, 250);">
64位真4K
</a>
<a href="#nowhere">
10核機芯
</a>
<a href="#nowhere">
V字黑釉底座
</a>
<a href="#nowhere">
4K超清
</a>
<div class="seperator"></div>
</div>
<div class="row">
<a href="#nowhere">
64位14核
</a>
<a href="#nowhere">
海量影視
</a>
<a href="#nowhere">
人氣爆款
</a>
<a href="#nowhere">
限時特惠
</a>
<a href="#nowhere">
真4K屏
</a>
<a href="#nowhere">
65吋巨屏
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
4K超清視界
</a>
<a href="#nowhere">
限時特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
55寸旗艦
</a>
<a href="#nowhere">
4K機皇
</a>
<a href="#nowhere">
曲面機皇
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
輕薄4K
</a>
<div class="seperator"></div>
</div>
</div>
</div>
<------------------------CSS部分----------------------------------->
.categoryMenu{
width: 200px;
height: 500px;
background-color: #e2e2e3;
margin-left: 70px;
position: absolute;
z-index: 1;
top: -500px;
}
.categoryMenu a{
color: #000;
}
.categoryMenu a:hover{
color: #2aabd2;
text-decoration: none;
}
.productsAsideCategory{
width: 800px;
height: 500px;
background-color: #fff;
margin-left: 270px;
display: none;
position:absolute;
z-index: 1;
top: -500px;
}
.productsAsideCategory .row{
margin: 20px 0px 0px 80px;
}
.productsAsideCategory .row .seperator{
margin-top: 19px;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #e7e7e7;
}
.productsAsideCategory a{
color: #999;
font-size: 14px;
margin: 8px;
}
.productsAsideCategory a:hover{
color: #C40000;
text-decoration: none;
}
.eachCategory{
line-height: 29px;
padding-left: 10px;
font-size: 14px;
}
.eachCategory span{
margin-right: 10px;
}
.eachCategory:hover{
background-color: #fff;
}
<--------------------------JS部分---------------------------><script>
/*整體思路
1.先把所有右側產品列表隱藏
2.當滑鼠移動到左側選單欄上時，右側產品列表出現
3.當滑鼠移出左側選單到右側產品列表時，右側產品列表依然存在，直到移出右側產品列表消失。
*/
function showProductsAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","white");
$("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA");
$("div.productsAsideCategory[cid="+cid+"]").show();
}
function hideProductsAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
$("div.eachCategory[cid="+cid+"] a").css("color","#000");
$("div.productsAsideCategory[cid="+cid+"]").hide();
}
$(function(){
$("div.eachCategory").mouseenter(function(){
var cid = $(this).attr("cid");
showProductsAsideCategorys(cid);
});
$("div.eachCategory").mouseleave(function(){
var cid = $(this).attr("cid");
hideProductsAsideCategorys(cid);
});
$("div.productsAsideCategory").mouseenter(function(){
var cid = $(this).attr("cid");
showProductsAsideCategorys(cid);
});
$("div.productsAsideCategory").mouseleave(function(){
var cid = $(this).attr("cid");
hideProductsAsideCategorys(cid);
});
});
</script>