仿京东左侧分类导航栏实现(Jquery)

---

前言

在做仿京东网站左侧分类导航栏的经验总结

---

一、效果图

二、使用步骤

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>

总结

有什么不懂的评论区或者私信我,大家一起学习进步,共励。