jquery-9 京东和酒仙网左侧导航如何实现 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>