文章目录

前言一、效果图二、使用步骤1.源码jQueryCSS(需要自己导入bootstrap包)HTML总结

前言

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

一、效果图

二、使用步骤

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>

总结

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