前言
在做仿京东网站左侧分类导航栏的经验总结
一、效果图
二、使用步骤
1.源码
代码如下(示例):
jQuery
$(function(){
var $titles=$('.nav1-l li');
$titles.each(function(index){
$(this).hover(function(){
$(".item div").eq(index).css({"display":"block"});
}, function(){
$(".item div").eq(index).css({"display":"none"});
});
});
$('.nav1-l ul').hover(function(){
$('.nav1-on').removeClass("hidden");
},function(){
$('.nav1-on').addClass("hidden");
});
});
CSS(需要自己导入bootstrap包)
.hidden{
display: none;
}
.nav1{
width: 100%;
height: 480px;
background-color:rgb(244,244,244);
}
.nav1-l{
float: left;
width: 190px;
height: 470px;
background-color: #fff;
margin-top: 10px;
}
.nav1-l ul li:hover{
background-color: #8f8f8f;
transition: 1s ease;
}
.nav1-l ul li a{
color: black;
}
.nav1-on{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 199;
box-shadow:0px 0px 10px #e9e9e9;
}
.nav1-l-on1{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on2{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on3{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on4{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on5{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on6{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on7{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on8{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on9{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on10{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on11{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on12{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on13{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on14{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on15{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on16{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l-on17{
position: absolute;
width: 950px;
height: 470px;
margin-top: 10px;
margin-left: 190px;
background-color: white;
z-index: 200;
box-shadow:0px 0px 10px #e9e9e9;
display: none;
}
.nav1-l ul li{
display: block;
padding: 3.8px;
}
.nav1-m{
float: left;
width: 590px;
height: 470px;
margin-left: 10px;
margin-top: 10px;
}
.carousel-control:hover, .carousel-control:focus {
opacity: 1;
}
.carousel-control.left {
background-image: none;
}
.carousel-control.right {
background-image: none;
}
.nav1-r{
float: left;
width: 340px;
height: 470px;
margin-left: 10px;
margin-top: 10px;
background-color:white;
}
.nav1-r-l{
width: 340px;
height: 470px;
}
.nav1-r-l img{
display: block;
float: left;
width: 100%;
height: 230px;
}
.nav1-r-l img:nth-child(2){
margin-top: 10px;
}
HTML
<div class="nav1">
<div class="container">
<div class="nav1-l">
<ul>
<li class="test1"><a href="">家用电器</a></li>
<li>
<a href="">手机</a>/
<a href="">运营商</a>/
<a href="">数码</a>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
</li>
<li><a href="">家居</a>
</li>
<li><a href="">男装</a></li>
<li><a href="">美妆</a></li>
<li><a href="">女鞋</a></li>
<li><a href="">房产</a></li>
<li><a href="">母婴</a></li>
<li><a href="">食品</a></li>
<li><a href="">艺术</a></li>
<li><a href="">医药保健</a></li>
<li><a href="">图书</a></li>
<li><a href="">机票</a></li>
<li><a href="">理财</a></li>
<li><a href="">安装</a></li>
<li><a href="">工业品</a></li>
</ul>
</div>
<div class="nav1-on hidden">
</div>
<div class="item">
<div class="nav1-l-on1">
数据1
</div>
<div class="nav1-l-on2">
数据2
</div>
<div class="nav1-l-on3">
数据3
</div>
<div class="nav1-l-on4">
数据4
</div>
<div class="nav1-l-on5">
数据5
</div>
<div class="nav1-l-on6">
数据6
</div>
<div class="nav1-l-on7">
数据7
</div>
<div class="nav1-l-on8">
数据8
</div>
<div class="nav1-l-on9">
数据9
</div>
<div class="nav1-l-on10">
数据10
</div>
<div class="nav1-l-on11">
数据11
</div>
<div class="nav1-l-on12">
数据12
</div>
<div class="nav1-l-on13">
数据13
</div>
<div class="nav1-l-on14">
数据14
</div>
<div class="nav1-l-on15">
数据15
</div>
<div class="nav1-l-on16">
数据16
</div>
<div class="nav1-l-on17">
数据17
</div>
</div>
<div class="nav1-m">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href=""><img src="img/1.jpg" alt="..."></a>
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<a href=""><img src="img/2.jpg" alt="..."></a>
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<a href=""><img src="img/3.jpg" alt="..."></a>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="nav1-r">
<div class="nav1-r-l">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
</div>
</div>
</div>
总结
有什么不懂的评论区或者私信我,大家一起学习进步,共励。