仿京东左侧菜单

html

<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/Fang.css" rel="stylesheet"/>
 </head>
 <body>
 <div class="nav-box">
  <div class="nav-top"><a href="">全部商品分类</a></div>
  <ul>
   <li>
    <a href="">家用电器</a><div><img src="img/b.png"/></div>
   </li>
   <li>
    <a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="img/d.png"/></div>
   </li>
   <li>
    <a href="">电脑</a>、<a href="">办公</a><div><img src="img/f.png"/></div>
   </li>
   <li>
    <a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="img/g.jpg"/></div>
   </li>
   <li>
    <a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="img/h.jpg"/></div>
   </li>
  </ul>
 </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/Fang.js"></script>
 </body>
</html>

 

 

 

 

css

*{padding:0;margin:0;}
a{text-decoration:none;}
.nav-box{
 width:210px;
 margin:5px 0 0 5px;
}
.nav-top a{
 display:block;
 height:45px;
 font-size:16px;
 line-height:45px;
 padding:0 10px;
 background:#B1191A;
 color:#fff;
}
ul{background:#c81623;list-style:none;padding-bottom:1px;}
ul li{
 height:30px;
 line-height:30px;
 font-size:14px;
 color:#fff;
 position:relative;
 padding-left: 5px;
}
.orange{background-color: orange;}
ul li a{color:#fff;}
ul li div{display:none; position: absolute; left: 211px; top:0px;}

js（jquery-1.12.4.js）

$(document).ready(function(){
 $("li").hover(
 function(){
  $(this).children("div").show();
  $(this).toggleClass("orange");
 },
 function(){
  $(this).children("div").hide();
  $(this).toggleClass("orange");
 }
 );
});

 

posted @ 2020-06-29 17:34  燃子  阅读(2461)  评论(0)    收藏  举报