左侧导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<link href="bootstrap/bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="bootstrap/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
<style>
.categoryMenu{
width: 200px;
background-color: #e2e2e3;
margin-left: 20px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.categoryMenu a{
color: black;
}
.categoryMenu a:hover{
color: lightblue;
text-decoration: none;
}
.productAsideCategory{
width: 800px;
height: 510px;
margin-left: 220px;
background-color: white;
position: absolute;
top: 0;
left: 0px;
z-index: 1;
}
div.productAsideCategory div.row{
margin: 20px 80px 0px 80px;
}
div.seperator{
margin-top: 20px;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #e7e7e7;
}
div.productAsideCategory a{
color: #999;
font-size: 14px;
margin: 8px;
}
div.productAsideCategory a:hover{
color: #C40000;
text-decoration: none;
}
div.eachCategory{
padding-left: 10px;
line-height: 30px;
font-size: 14px;
}
div.eachCategory span{
margin-right: 10px;
}
div.eachCategory:hover{
background-color: white;
}
</style>
</head>
<body>
<script>
function showProductAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","white");
$("div.eachCategory[cid="+cid+"]").css("color","#87CEFA");
$("div.productAsideCategory[cid="+cid+"]").show();
}
function hideProductAsideCategorys(cid){
$("div.eachCategory[cid="+cid+"]").css("background-color","#E2E2E3");
$("div.eachCategory[cid="+cid+"]").css("color","#000");
$("div.productAsideCategory[cid="+cid+"]").hide();
}
$(function(){
$("div.eachCategory").mouseenter(function(){
var cid=$(this).attr("cid");
showProductAsideCategorys(cid);
})
$("div.eachCategory").mouseleave(function(){
var cid=$(this).attr("cid");
hideProductAsideCategorys(cid);
})
$("div.productAsideCategory").mouseenter(function(){
var cid=$(this).attr("cid");
showProductAsideCategorys(cid);
})
$("div.productAsideCategory").mouseleave(function(){
var cid=$(this).attr("cid");
hideProductAsideCategorys(cid);
})
})
</script>
<div style="position: relative;"></div>
<div class="categoryWithCarousel">
<div class="categoryMenu">
<div class="eachCategory" cid="83">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">平板电视</a>
</div>
<div class="eachCategory" cid="82" >
<span class="glyphicon glyphicon-link" ></span>
<a href="#">马桶</a>
</div>
<div class="eachCategory" cid="81">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">沙发</a>
</div><div class="eachCategory" cid="80">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">电热水器</a>
</div>
<div class="eachCategory" cid="79">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">平衡车</a>
</div>
<div class="eachCategory" cid="78">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">扫地机器人</a>
</div>
<div class="eachCategory" cid="77">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">原汁机</a>
</div>
<div class="eachCategory" cid="76">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">冰箱</a>
</div>
<div class="eachCategory" cid="75">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">空调</a>
</div>
<div class="eachCategory" cid="74">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">女表</a>
</div>
<div class="eachCategory" cid="73">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">男表</a>
</div>
<div class="eachCategory" cid="72">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">男士手拿包</a>
</div>
<div class="eachCategory" cid="71">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">男士西服</a>
</div>
<div class="eachCategory" cid="70">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">时尚男鞋</a>
</div>
<div class="eachCategory" cid="69">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">品牌女装</a>
</div>
<div class="eachCategory" cid="68">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">太阳镜</a>
</div>
<div class="eachCategory" cid="67">
<span class="glyphicon glyphicon-link" ></span>
<a href="#">安全座椅</a>
</div>
</div>
<div class="productAsideCategory" cid="83" style="display: none;">
<div class="row show1">
<a href="#">屏大影院</a>
<a href="#">周末</a>
<a href="#" style="color: lightblue;">新品特惠</a>
<a href="#">32吋电视机</a>
<a href="#" style="color: lightblue;">智能网络</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">USB高清解</a>
<a href="#">芒果TV在线</a>
<a href="#" style="color: lightblue;">抢购价</a>
<a href="#">USB解码</a>
<a href="#">32英寸</a>
<a href="#">10核</a>
<a href="#">TCL品牌日</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">不要赠品</a>
<a href="#">新品上市</a>
<a href="#"style="color: lightblue;">4K硬屏</a>
<a href="#">领100元券</a>
<a href="#">智能高清</a>
<a href="#"style="color: lightblue;">8月，酷暑</a>
<a href="#">8月大促</a>
<a href="#">天猫定制</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">智能操作系统</a>
<a href="#">金色外观</a>
<a href="#"style="color: lightblue;">三星屏幕</a>
<a href="#">客厅爆款</a>
<a href="#">八核配置</a>
<a href="#">限时特惠</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">限时特惠</a>
<a href="#">热销爆款</a>
<a href="#">4K全高清</a>
<a href="#"style="color: lightblue;">六核智能</a>
<a href="#">14核4K</a>
<a href="#">YUNOS</a>
<a href="#">YUNOS</a>
<a href="#">64位处理器</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">YUNOS</a>
<a href="#"style="color: lightblue;">微信电视</a>
<a href="#">4K超清</a>
<a href="#"style="color: lightblue;">64位真4K</a>
<a href="#">10核机芯</a>
<a href="#">V字黑釉底座</a>
<a href="#">4K超清</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">64位14核</a>
<a href="#">海量影视</a>
<a href="#">人气爆款</a>
<a href="#">限时特惠</a>
<a href="#"style="color: lightblue;">真4K屏</a>
<a href="#"style="color: lightblue;">65吋巨屏</a>
<a href="#">4K超清视界</a>
<a href="#">限时特惠</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">55吋旗舰</a>
<a href="#" style="color: royalblue">4K机皇</a>
<a href="#">曲面机皇</a>
<a href="#">轻薄4K</a>
<div class="seperator"></div>
</div>
</div>
<div class="productAsideCategory" cid="82" style="display: block;">
<div class="row show1">
<a href="#">fg</a>
<a href="#">gre</a>
<a href="#" style="color: lightblue;">新品特惠</a>
<a href="#">32吋电视机</a>
<a href="#" style="color: lightblue;">智能网络</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">USB高清解</a>
<a href="#">芒果TV在线</a>
<a href="#" style="color: lightblue;">抢购价</a>
<a href="#">USB解码</a>
<a href="#">32英寸</a>
<a href="#">10核</a>
<a href="#">TCL品牌日</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">不要赠品</a>
<a href="#">新品上市</a>
<a href="#"style="color: lightblue;">4K硬屏</a>
<a href="#">领100元券</a>
<a href="#">智能高清</a>
<a href="#"style="color: lightblue;">8月，酷暑</a>
<a href="#">8月大促</a>
<a href="#">天猫定制</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">智能操作系统</a>
<a href="#">金色外观</a>
<a href="#"style="color: lightblue;">三星屏幕</a>
<a href="#">客厅爆款</a>
<a href="#">八核配置</a>
<a href="#">限时特惠</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">限时特惠</a>
<a href="#">热销爆款</a>
<a href="#">4K全高清</a>
<a href="#"style="color: lightblue;">六核智能</a>
<a href="#">14核4K</a>
<a href="#">YUNOS</a>
<a href="#">YUNOS</a>
<a href="#">64位处理器</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">YUNOS</a>
<a href="#"style="color: lightblue;">微信电视</a>
<a href="#">4K超清</a>
<a href="#"style="color: lightblue;">64位真4K</a>
<a href="#">10核机芯</a>
<a href="#">V字黑釉底座</a>
<a href="#">4K超清</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">64位14核</a>
<a href="#">海量影视</a>
<a href="#">人气爆款</a>
<a href="#">限时特惠</a>
<a href="#"style="color: lightblue;">真4K屏</a>
<a href="#"style="color: lightblue;">65吋巨屏</a>
<a href="#">4K超清视界</a>
<a href="#">限时特惠</a>
<div class="seperator"></div>
</div>
<div class="row show1">
<a href="#">55吋旗舰</a>
<a href="#" style="color: royalblue">4K机皇</a>
<a href="#">曲面机皇</a>
<a href="#">轻薄4K</a>
<div class="seperator"></div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图如下：
浙公网安备 33010602011771号