DIV+CSS實現仿京東商城導航條效果
阿新 • • 發佈：2018-11-05
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 6 <title>京東商城導航條</title> 7 <style type="text/css"> 8 .my_left_category{ 9 width:150px; 10 font-size:12px; 11 font-family:arial,sans-serif; 12 letter-spacing:2px; 13 } 14 .my_left_category h1{ 15 background-image:url(images/spring_06.gif); 16 height:20px; 17 background-repeat:no-repeat; 18 font-size:14px;19 font-weight:bold; 20 padding-left:15px; 21 padding-top:8px; 22 margin:0px; 23 color:#FFF; 24 } 25 .my_left_category .my_left_cat_list{ 26 width:148px; 27 border-color:#b60134; 28 border-style:solid; 29 border-width:0px 1px 1px 1px; 30 line-height:13.5pt; 31 } 32 .my_left_category .my_left_cat_list h2{ 33 margin:0px; 34 padding:3px 5px 0px 9px; 35 } 36 .my_left_category .my_left_cat_list h2 a { 37 color:#d6290b; 38 font-weight:bold; 39 font-size:14px; 40 line-height:22px; 41 } 42 .my_left_category .my_left_cat_list h2 a:hover { 43 color:#d6290b; 44 font-weight:bold; 45 font-size:14px; 46 line-height:22px; 47 } 48 .my_left_category .h2_cat{ 49 width:148px; 50 height:26px; 51 background-image:url(images/my_menubg.gif); 52 background-repeat:no-repeat; 53 line-height:26px; 54 font-weight:normal; 55 color:#333333; 56 position:relative; 57 } 58 .my_left_category .h2_cat_1{ 59 width:148px; 60 height:26px; 61 background-image:url(images/my_menubg_1.gif); 62 background-repeat:no-repeat; 63 line-height:26px; 64 font-weight:normal; 65 color:#333333; 66 position:relative; 67 } 68 .my_left_category a{ 69 font:12px; 70 text-decoration:none; 71 color:#333333; 72 } 73 .my_left_category a:hover{ 74 text-decoration:underline; 75 color:#ff3333; 76 } 77 .my_left_category h3{ 78 margin:0px; 79 padding:0px; 80 height:26px; 81 font-size:12px; 82 font-weight:normal; 83 display:block; 84 padding-left:8px; 85 } 86 .my_left_category h3 span{color:#999999; width:145px; float:right;} 87 .my_left_category h3 a{ line-height:26px;} 88 .my_left_category .h3_cat{ 89 display:none; 90 width:204px; 91 position:absolute; 92 left:123px; 93 margin-top:-26px; 94 cursor:auto; 95 } 96 .my_left_category .shadow{ 97 position:inherit; 98 background:url(images/shadow_04.gif) left top; 99 width:204px; 100 } 101 .my_left_category .shadow_border{ 102 position:inherit; 103 width:200px; 104 border:1px solid #959595; margin-top:1px; 105 border-left-width:0px; 106 background:url(images/shadow_border.gif) no-repeat 0px 21px; 107 background-color:#ffffff; 108 margin-bottom:3px 109 } 110 .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px} 111 .my_left_category .shadow_border ul li { 112 list-style:none; 113 padding-left:10px; 114 background-image:url(images/my_cat_sub_menu_dot.gif); 115 background-repeat:no-repeat; 116 background-position:0px 8px; 117 float:left; 118 width:75px; 119 height:26px; 120 overflow:hidden; 121 letter-spacing:0px; 122 } 123 .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;} 124 .my_left_category .active_cat h3 { font-weight:bold} 125 .my_left_category .active_cat h3 span{ display:none;} 126 .my_left_category .active_cat div{display:block;} 127 </style> 128 </head> 129 <body> 130 <div class="my_left_category"> 131 <h1>分類導航</h1> 132 <div class="my_left_cat_list"> 133 <h2><a href="#">按網站類別</a></h2> 134 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 135 <h3><a href="#">企業建站</a></h3> 136 <div class="h3_cat"> 137 <div class="shadow"> 138 <div class="shadow_border"> 139 <ul> 140 <li><a href="#">LOGO設計</a></li> 141 <li><a href="#">網站設計</a></li> 142 <li><a href="#">網站廣告</a></li> 143 <li><a href="#">推廣</a></li> 144 <li><a href="#">建網站</a></li> 145 <li><a href="#">網站推廣</a></li> 146 <li><a href="#">網站建設</a></li> 147 <li><a href="#">SEO</a></li> 148 </ul> 149 </div> 150 </div> 151 </div> 152 </div> 153 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 154 <h3><a href="#">韓國男裝</a></h3> 155 <div class="h3_cat"> 156 <div class="shadow"> 157 <div class="shadow_border"> 158 <ul> 159 <li><a href="#">LOGO設計</a></li> 160 <li><a href="#">網站設計</a></li> 161 <li><a href="#">網站廣告</a></li> 162 <li><a href="#">推廣</a></li> 163 <li><a href="#">建網站</a></li> 164 <li><a href="#">網站推廣</a></li> 165 <li><a href="#">網站建設</a></li> 166 <li><a href="#">SEO</a></li> 167 </ul> 168 </div> 169 </div> 170 </div> 171 </div> 172 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 173 <h3><a href="#">指令碼之家</a></h3> 174 <div class="h3_cat"> 175 <div class="shadow"> 176 <div class="shadow_border"> 177 <ul> 178 <li><a href="#">LOGO設計</a></li> 179 <li><a href="#">原始碼下載</a></li> 180 <li><a href="#">最新更新</a></li> 181 <li><a href="#">下載排行</a></li> 182 <li><a href="#">ASP</a></li> 183 <li><a href="#">PHP</a></li> 184 <li><a href="#">AJAX</a></li> 185 <li><a href="#">DELPHI</a></li> 186 </ul> 187 </div> 188 </div> 189 </div> 190 </div> 191 <!-- again --> 192 <h2><a href="#">按品牌選貨</a></h2> 193 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 194 <h3><a href="#" style="color:#ff3333;">熱銷推薦</a></h3> 195 <div class="h3_cat"> 196 <div class="shadow"> 197 <div class="shadow_border"> 198 <ul> 199 <li><a href="#">LOGO設計</a></li> 200 <li><a href="#">網站設計</a></li> 201 <li><a href="#">網站廣告</a></li> 202 <li><a href="#">推廣</a></li> 203 <li><a href="#">建網站</a></li> 204 <li><a href="#">網站推廣</a></li> 205 <li><a href="#">網站建設</a></li> 206 <li><a href="#">SEO</a></li> 207 </ul> 208 </div> 209 </div> 210 </div> 211 </div> 212 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 213 <h3><a href="#">網站建設</a></h3> 214 <div class="h3_cat"> 215 <div class="shadow"> 216 <div class="shadow_border"> 217 <ul> 218 <li><a href="#">LOGO設計</a></li> 219 <li><a href="#">網站設計</a></li> 220 <li><a href="#">推廣</a></li> 221 <li><a href="#">建網站</a></li> 222 <li><a href="#">網站推廣</a></li> 223 <li><a href="#">推廣</a></li> 224 <li><a href="#">LOGO設計</a></li> 225 <li><a href="#">網站設計</a></li> 226 <li><a href="#">網站廣告</a></li> 227 <li><a href="#">推廣</a></li> 228 <li><a href="#">建網站</a></li> 229 <li><a href="#">網站推廣</a></li> 230 <li><a href="#">網站建設</a></li> 231 <li><a href="#">LOGO設計</a></li> 232 <li><a href="#">網站設計</a></li> 233 <li><a href="#">網站建設</a></li> 234 <li><a href="#">SEO</a></li> 235 </ul> 236 </div> 237 </div> 238 </div> 239 </div> 240 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 241 <h3><a href="#">網站程式</a></h3> 242 <div class="h3_cat"> 243 <div class="shadow"> 244 <div class="shadow_border"> 245 <ul> 246 <li><a href="#">PHP</a></li> 247 <li><a href="#">ASP</a></li> 248 <li><a href="#">JSP</a></li> 249 <li><a href="#">ASP.Net</a></li> 250 </ul> 251 </div> 252 </div> 253 </div> 254 </div> 255 <div class="h2_cat_1" onmouseover="this.className='h2_cat_1 active_cat'" onmouseout="this.className='h2_cat_1'"> 256 <h3><a href="#">其他網站</a></h3> 257 </div> 258 <!-- again --> 259 <h2><a href="#">按價格選貨</a></h2> 260 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 261 <h3><a href="#">低端價位</a></h3> 262 <div class="h3_cat"> 263 <div class="shadow"> 264 <div class="shadow_border"> 265 <ul> 266 <li><a href="#">50元以下</a></li> 267 <li><a href="#">50-100元</a></li> 268 </ul> 269 </div> 270 </div> 271 </div> 272 </div> 273 <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 274 <h3><a href="#">中高階價位</a></h3> 275 <div class="h3_cat"> 276 <div class="shadow"> 277 <div class="shadow_border"> 278 <ul> 279 <li><a href="#">100-150元</a></li> 280 <li><a href="#">150-200元</a></li> 281 <li><a href="#">200-300元</a></li> 282 <li><a href="#">300元以上</a></li> 283 </ul> 284 </div> 285 </div> 286 </div> 287 </div> 288 <!-- again --> 289 <h2><a href="#">超值特價區</a></h2> 290 <h2><a href="#">現貨區</a></h2> 291 <!--測試複製end--> 292 </div> 293 </div> 294 </body> 295 </html>