jquery-9 京东和酒仙网左侧导航如何实现

一、总结

一句话总结：布局的话多用定位，由底往上一层层的来布。

1、如何实现导航向div的平滑滑动？

右侧div和左侧的li一定要放在一起

127                     <li>
128                         <span>家用电器</span>
129                         <div class='right'>
130                             <h3>家用电器</h3>
131                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
132                         </div>    
133                     </li>

二、京东和酒仙网左侧导航如何实现

酒仙网左侧导航

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>index</title>
  6     <style>
  7         *{
  8             font-family: 微软雅黑;
  9             margin:0px;
 10             padding:0px;
 11         }
 12 
 13         .top{
 14             width:1366px;
 15             height:90px;
 16             overflow: hidden;
 17         }
 18 
 19         .top img{
 20             margin-left:-250px;
 21         }
 22 
 23         .nav{
 24             height:15px;
 25         }
 26 
 27         .menu{
 28             height:470px;
 29             background:url('power.jpg') -300px;
 30         }
 31 
 32         .div1{
 33             height:40px;
 34             overflow: hidden;
 35             background: #900;
 36             color:#fff;
 37         }
 38 
 39         .div1 ul{
 40             width:1200px;
 41             margin:0 auto;
 42             list-style:none;
 43         }
 44 
 45         .div1 ul li{
 46             float: left;
 47             line-height: 40px;
 48             margin-left:30px;
 49             cursor: pointer;
 50         }
 51         .banner{
 52             background: #ce171f;
 53             width:150px;
 54             text-align: center;
 55             margin-left:0px!important;
 56         }
 57 
 58         .div2{
 59             width:1200px;
 60             height:470px;
 61             margin:0 auto;
 62             position: relative;
 63         }
 64 
 65         .div3{
 66             width:150px;
 67             height:470px;
 68             background: #b61d1d;
 69         }
 70         .div3 ul{
 71             list-style:none;
 72         }
 73 
 74         .div3 ul li{
 75             padding-left:15px;
 76             line-height: 30px;
 77         }
 78 
 79         .div3 ul li span{
 80             color:#fff;
 81         }
 82 
 83         .div3 ul li:hover{
 84             cursor: pointer;
 85         }
 86 
 87         .right{
 88             width:1020px;
 89             height:440px;
 90             background: #eee;
 91             position: absolute;
 92             top:0px;
 93             left:150px;
 94             padding:15px;
 95             color:#000;
 96             display: none;
 97         }
 98         .info{
 99             width:1200px;
100             margin:0 auto;
101         }
102     </style>
103     <script src="jquery.js"></script>
104 </head>
105 <body>
106     <div class='top'>
107         <img src="top.jpg" height='100%'>    
108     </div>
109 
110     <div class="nav"></div>
111     
112     <div class="div1">
113         <ul>
114             <li class='banner'>全部商品分类</li>
115             <li>首页</li>
116             <li>葡萄酒馆</li>
117             <li>清仓</li>
118             <li>团购</li>
119             <li>新品发现</li>
120         </ul>                
121     </div>    
122 
123     <div class="menu">
124         <div class="div2">
125             <div class="div3">
126                 <ul>
127                     <li>
128                         <span>家用电器</span>
129                         <div class='right'>
130                             <h3>家用电器</h3>
131                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
132                         </div>    
133                     </li>
134                     <li>
135                         <span>手机数码</span>
136                         <div class='right'>
137                             <h3>手机数码</h3>
138                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
139                         </div>    
140                     </li>
141                     <li>
142                         <span>电脑办公</span>
143                         <div class='right'>
144                             <h3>电脑办公</h3>
145                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
146                         </div>    
147                     </li>
148                     <li>
149                         <span>家居家装</span>
150                         <div class='right'>
151                             <h3>家居家装</h3>
152                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
153                         </div>    
154                     </li>
155                 </ul>
156             </div>
157         </div>    
158     </div>
159 
160     <div class="info">
161         <h1>linux is very much!</h1>
162         <h1>linux is very much!</h1>
163         <h1>linux is very much!</h1>
164         <h1>linux is very much!</h1>
165         <h1>linux is very much!</h1>
166         <h1>linux is very much!</h1>
167         <h1>linux is very much!</h1>
168         <h1>linux is very much!</h1>
169         <h1>linux is very much!</h1>
170         <h1>linux is very much!</h1>
171         <h1>linux is very much!</h1>
172         <h1>linux is very much!</h1>
173         <h1>linux is very much!</h1>
174         <h1>linux is very much!</h1>
175         <h1>linux is very much!</h1>
176         <h1>linux is very much!</h1>
177         <h1>linux is very much!</h1>
178         <h1>linux is very much!</h1>
179         <h1>linux is very much!</h1>
180         <h1>linux is very much!</h1>
181         <h1>linux is very much!</h1>
182     </div>
183 </body>
184 <script>
185 $('.div3 li').mouseenter(function(){
186     x=$(this).position().left+150;
187     y=$(this).position().top;
188 
189     $(this).css({'background':'#eee'});
190     $(this).find('span').css({'color':'#b61d1d'});
191     $('.div3 li').not($(this)).css({'background':'#b61d1d'});
192 
193 
194     $(this).find('.right').css({'top':y+'px','left':x+'px'}).show();
195     $('.right').not($(this).find('.right')).hide();
196 });
197 
198 $('.div3 li').mouseleave(function(){
199     $(this).find('.right').hide();
200     $(this).find('span').css({'color':'#fff'});
201     $(this).css({'background':'#b61d1d'});
202 });
203 </script>
204 </html>

相关阅读:
go语言基础之map赋值、遍历、删除、做函数参数
 go语言基础之map介绍和使用
 go语言基础之go猜数字游戏
 go语言基础之切片做函数参数
 ORA-28001: the password has expired解决方法
 windows10下设置Maven的本地仓库和阿里云的远程中央仓库
 mvn安装
 elk基于jolokia监控springboot应用jvm方案
 陌陌风控系统
 ElasticSearch SIEM方案
原文地址：https://www.cnblogs.com/Renyi-Fan/p/9235135.html