仿淘寶左側菜單導航欄純Html + css 寫的
這倆天閒來沒事淘寶逛了一圈看到淘寶的左側導航菜單作的是真心的棒啊，一時興起，查了點資料抓了幾個圖片仿淘寶寫了個css，時間緊寫的不太好，大神勿噴，給小白作個參考javascript
廢話很少說先來個效果圖css
接下來直接上代碼，圖片無法傳，只能直接放代碼下邊，辛苦點一張一張扣去吧😝html
HTML部分java
<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div css仿淘寶下拉導航菜單分類代碼</title>
<LINK rel=stylesheet type=text/css href="css/main.css">
</head>
<body>
<div class="hc_lnav jslist">
<div class="allbtn">
<h2><a href="#"><strong> </strong>所有商品分類<i> </i></a></h2>
<ul style="width:190px" class="jspop box">
<li class="a1">
<div class="tx"><a href="#"><i> </i>各地名優茶</a> </div>
<dl>
<dt>熱門</dt>
<dd>
<a href="#">西湖龍井</a>
<a href="#">金駿眉</a>
<a href="#">大紅袍</a>
<a href="#">鐵觀音</a>
</dd>
</dl>
<dl>
<dt>名茶</dt>
<dd>
<a href="#">紅茶</a>
<a href="#">綠茶</a>
<a href="#">烏龍茶</a>
<a href="#">黑茶</a>
<a href="#">白茶 </a>
</dd>
</dl>
<div class="pop">
<h3><a href="#">各地名優茶</a></h3>
<dl>
<dl>
<dt>綠茶</dt>
<dd>
<a class="ui-link" href="#">西湖龍井</a>
<a class="ui-link" href="#">龍井</a>
<a class="ui-link" href="#">黃山毛峯</a>
<a class="ui-link" href="#">安吉白茶</a>
<a class="ui-link" href="#">其餘綠茶</a>
</dd>
</dl>
<dl>
<dt>烏龍茶</dt>
<dd>
<a class="ui-link" href="">鐵觀音</a>
<a class="ui-link" href="">大紅袍</a>
<a class="ui-link" href="">水仙</a>
<a class="ui-link" href="">肉桂</a>
<a class="ui-link" href="">臺灣烏龍</a>
<a class="ui-link" href="">其餘烏龍茶</a>
</dd>
</dl>
<dl>
<dt>紅茶</dt>
<dd>
<a class="ui-link" href="" >金駿眉</a>
<a class="ui-link" href="">正山小種</a>
<a class="ui-link" href="">祁門紅茶</a>
<a class="ui-link" href="">坦洋工夫</a>
<a class="ui-link" href="javascript:;">其餘紅茶</a>
<a class="un ui-link" href="">政和工夫</a>
<a class="ui-link" href="">滇紅工夫</a>
</dd>
</dl>
<dl>
<dt>黑茶</dt>
<dd>
<a class="ui-link" href="">白沙溪黑茶</a>
<a class="ui-link" href="">普洱茶餅</a>
<a class="ui-link" href="">普洱沱茶</a>
<a class="ui-link" href="">普洱茶磚</a>
<a class="ui-link" href="">普洱散茶</a>
<a class="ui-link" href="">其餘黑茶</a>
</dd>
</dl>
<dl>
<dt>白茶</dt>
<dd>
<a class="ui-link" href="#">白牡丹</a>
<a class="ui-link" href="">白毫銀針</a>
<a class="ui-link" href="">壽眉</a>
<a class="ui-link" href="">其餘白茶</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">滋恩</a>
<a href="">遠榮</a>
<a href="">頂峯</a>
<a href="">公泰</a>
<a href="">一品堂</a>
<a href="">好吉</a>
<a href="">綠雪芽</a>
<a href="">臺灣梅山製茶</a>
<a href="" >白沙溪</a>
<a href="">聯興茶葉</a>
</dd>
</dl>
<dl>
<dt>價格</dt>
<dd>
<a href="">100元及如下</a>
<a href="">100-300元</a>
<a href="">300元及以上</a>
</dd>
</dl>
<dl>
<dt>淨含量</dt>
<dd>
<a href="" >50g及如下</a>
<a href="">51-100g</a>
<a href="">101-250g</a>
<a href="">250g以上</a>
</dd>
</dl>
<dl>
<dt>包裝</dt>
<dd>
<a href="">經濟自飲裝</a>
<a href="" >精美禮品裝</a>
</dd>
</dl>
<div class="clr"></div>
<div class="act"><a href=""><img src="images/20150518092317.jpg" /></a> </div>
</div>
</li>
<li class="a2">
<div class="tx"><a href=""><i> </i>花草保健茶</a> </div>
<dl>
<dt>推薦</dt>
<dd>
<a href="">大麥茶</a>
<a href="">苦蕎茶</a>
<a href="" >玫瑰花茶</a>
<a href="">雪菊</a>
<a href="" >蜂蜜木瓜粉</a>
</dd>
</dl>
<div class="pop">
<h3><a href="">花草保健茶</a></h3>
<dl>
<dl>
<dt>瘦身</dt>
<dd>
<a class="ui-link" href="" >玫瑰荷葉茶</a>
<a class="ui-link" href="">玄米茶</a>
<a class="ui-link" href="">蘭香子</a>
<a class="ui-link" href="" >纖維泡騰片</a>
<a class="ui-link" href="" >青梅蘋果酸</a>
<a class="ui-link" href="">三草茶</a>
</dd>
</dl>
<dl>
<dt>美容</dt>
<dd>
<a class="ui-link" href="" >法蘭西玫瑰</a>
<a class="ui-link" href="" >凍幹檸檬片</a>
<a class="un ui-link" href="">果粒茶</a>
<a class="ui-link" href="" >大麥茶</a>
<a class="ui-link" href="">蜂蜜抹茶粉</a>
</dd>
</dl>
<dl>
<dt>豐胸</dt>
<dd>
<a class="ui-link" href="" >木瓜葛根粉</a>
<a class="ui-link" href="" >蜂蜜木瓜粉</a>
<a class="ui-link" href="">紅酒木瓜麗人飲</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">與花香</a>
<a href="">美麗快攻</a>
<a href="" >頂峯</a>
</dd>
</dl>
<dl>
<dt>價格</dt>
<dd>
<a href="" >100元及如下</a>
<a href="" >100-300元</a>
<a href="">300元及以上</a>
</dd>
</dl>
<dl>
<dt>淨含量</dt>
<dd>
<a href="">50g及如下</a>
<a href="">51-100g</a>
<a href="">101-250g</a>
<a href="">250g以上</a>
</dd>
</dl>
<dl>
<dt>包裝</dt>
<dd>
<a href="">經濟自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class="clr"></div>
<div class="act"><a href=""><img src="images/20150518092236.jpg" /></a></div>
</div>
</li>
<li class="a3">
<div class="tx"><a href=""><i> </i>精選茶具</a> </div>
<dl>
<dt>推薦</dt>
<dd>
<a href="" >功夫茶具</a>
<a href="">我的杯</a>
<a href="">茶寵</a>
<a href="">茶葉罐</a>
</dd>
</dl>
<div class="pop">
<h3><a href="">精選茶具</a></h3>
<dl>
<dl>
<dt>陶瓷</dt>
<dd>
<a class="ui-link" href="">茶葉罐</a>
<a class="ui-link" href="">功夫茶具</a>
<a class="ui-link" href="" >茶壺</a>
<a class="ui-link" href="">茶寵</a>
<a class="ui-link" href="" >茶杯</a>
<a class="ui-link" href="">茶具禮盒</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">恆越</a>
<a href="">卓越</a>
<a href="">國尊陶瓷</a>
<a href="">宏遠達</a>
<a href="">福萬利</a>
</dd>
</dl>
<dl>
<dt>價格</dt>
<dd>
<a href="">100元及如下</a>
<a href="">100-300元</a>
<a href="">300元及以上</a>
</dd>
</dl>
<dl>
<dt>包裝</dt>
<dd>
<a href="">經濟自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class="clr"></div>
<div class="act"><a href=""><img src="images/20150518092152.jpg" /></a></div>
</div>
</li>
<li class="a4">
<div class="tx"><a href=""><i> </i>可口茶食</a> </div>
<dl>
<dt>推薦</dt>
<dd>
<a href="">橄欖</a>
<a href="">冰糖楊梅</a>
<a href="">酸甜梅</a>
</dd>
</dl>
<div class="pop">
<h3><a href="">可口茶食</a></h3>
<dl>
<dl>
<dt>乾果</dt>
<dd>
<a class="ui-link" href="">杏仁</a>
<a class="ui-link" href="">瓜子</a>
<a class="un ui-link" href="">開心果</a>
</dd>
</dl>
<dl>
<dt>零食</dt>
<dd>
<a class="ui-link" href="">水晶檸檬片</a>
<a class="ui-link" href="">方塊酥</a>
<a class="ui-link" href="javascript:;">鳳梨酥</a>
<a class="ui-link" href="">燕麥巧克力</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">賽園</a>
<a href="">新味</a>
</dd>
</dl>
<dl>
<dt>價格</dt>
<dd>
<a href="">100元及如下</a>
<a href="">100-300元</a>
<a href="">300元及以上</a>
</dd>
</dl>
<dl>
<dt>淨含量</dt>
<dd>
<a href="" >50g及如下</a>
<a href="">51-100g</a>
<a href="">101-250g</a>
<a href="">250g以上</a>
</dd>
</dl>
<dl>
<dt>包裝</dt>
<dd>
<a href="">經濟自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class="clr"></div>
<div class="act"><a href=""><img src="images/20150518092213.jpg" /></a> </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
web
CSS部分jsp
@charset "utf-8";
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
}
body {
line-height: 2em;
background-color: #ffffff;
font-family: arial, helvetica, sans-serif;
color: #666666;
font-size: 12px
}
a {
color: #666666;
text-decoration: none;
-webkit-transition-property: color;
-moz-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-duration: .2s;
-moz-transition-timing-function: ease-in;
-o-transition-duration: .2s;
-o-transition-timing-function: ease-in;
transition-duration: .2s;
transition-timing-function: ease-in
}
a:hover {
color: #cd0606;
text-decoration: underline
}
/* hc_lnav */
.hc_lnav {
z-index: 9999;
position: relative;
width: 190px;
margin: 40px 0 0 120px;
}
.hc_lnav .allbtn {
z-index: 99999;
position: relative
}
.hc_lnav .allbtn h2 {
font-size: 14px;
box-shadow: 2px 0px 6px -3px #428000;
-webkit-box-shadow: 2px 0px 6px -3px #428000;
-moz-box-shadow: 2px 0px 6px -3px #428000
}
.hc_lnav .allbtn h2 a {
line-height: 36px;
background-color: #358000;
padding-left: 10px;
width: 180px;
display: block;
font-family: 微軟雅黑, 黑體;
height: 36px;
color: #ffffff;
font-size: 14px;
font-weight: normal
}
.hc_lnav .allbtn h2 a:hover {
background-color: #358000;
text-decoration: none;
}
.hc_lnav .allbtn h2 i {}
.hc_lnav .allbtn h2 strong {}
.hc_lnav .allbtn ul {
z-index: 99999;
position: absolute;
background-color: #60a411;
width: 190px;
display: block;/*能夠設置菜單是顯示仍是隱藏 display：none；爲隱藏*/
height: 486px;
top: 36px;
left: 0px
}
body.hc_home .hc_lnav .allbtn ul {
display: block
}
body.hc_list .hc_lnav .allbtn ul {
display: block
}
.hc_lnav .allbtn ul li {
padding-bottom: 7px;
zoom: 1;
clear: both;
cursor: default
}
.hc_lnav .allbtn ul li .tx {
background-image: url(../images/header/header_bg1.png);
line-height: 35px;
background-color: #559b0d;
padding-left: 10px;
background-repeat: no-repeat;
background-position: right center;
height: 35px;
_background-image: none
}
.hc_lnav .allbtn ul li .tx a {
font-family: 微軟雅黑, 黑體;
color: #ffffff;
font-size: 14px;
-webkit-transition: color 0.1s ease-out 0s;
-moz-transition: color 0.1s ease-out 0s;
-ms-transition: color 0.1s ease-out 0s;
-o-transition: color 0.1s ease-out 0s;
transition: color 0.1s ease-out 0s
}
.hc_lnav .allbtn ul li .tx a i {
line-height: 25px;
margin-top: 5px;
width: 25px;
background-position: 0px 0px;
float: left;
height: 25px;
margin-right: 10px;
text-decoration: none
}
.hc_lnav .allbtn ul li.a1 .tx a i {
background-image: url(../images/header_ico1.png)
}
.hc_lnav .allbtn ul li.a2 .tx a i {
background-image: url(../images/header_ico2.png)
}
.hc_lnav .allbtn ul li.a3 .tx a i {
background-image: url(../images/header_ico3.png)
}
.hc_lnav .allbtn ul li.a4 .tx a i {
background-image: url(../images/header_ico4.png)
}
.hc_lnav .allbtn ul li dl {
zoom: 1;
color: #ffffff;
clear: both;
overflow: auto;
padding-top: 4px
}
.hc_lnav .allbtn ul li dl a {
line-height: 22px;
white-space: nowrap;
float: left;
color: #d9e7ce;
margin-left: 6px;
margin-right: 6px;
-webkit-transition: color 0.1s ease-out 0s;
-moz-transition: color 0.1s ease-out 0s;
-ms-transition: color 0.1s ease-out 0s;
-o-transition: color 0.1s ease-out 0s;
transition: color 0.1s ease-out 0s
}
.hc_lnav .allbtn ul li dt {
padding-left: 10px;
width: 30px;
float: left;
padding-top: 1px
}
.hc_lnav .allbtn ul li dd {
line-height: 22px;
width: 150px;
float: left;
padding-top: 2px
}
.hc_lnav .allbtn ul li .pop {
border-bottom: #599900 2px solid;
position: absolute;
border-left: medium none;
padding-bottom: 10px;
background-color: #fcfcfc;
min-height: 466px;
padding-left: 30px;
width: 640px;
padding-right: 30px;
display: none;
height: 464px;
border-top: medium none;
top: 0px;
border-right: #599900 2px solid;
padding-top: 10px;
left: 190px;
box-shadow: 4px 4px 5px -1px #999999;
-webkit-box-shadow: 4px 4px 5px -1px #999999;
-moz-box-shadow: 4px 4px 5px -1px #999999
}
.hc_lnav .allbtn ul li .pop h3 {
display: none;
font-size: 14px
}
.hc_lnav .allbtn ul li .pop dl {
padding-bottom: 6px;
color: #666666;
padding-top: 6px
}
.hc_lnav .allbtn ul li .pop dl:hover {
background-color: #f3f3f3
}
.hc_lnav .allbtn ul li .pop dl a {
color: #666666;
margin-left: 12px;
margin-right: 12px
}
.hc_lnav .allbtn ul li .pop dl a.un {
color: #a5a5a5
}
.hc_lnav .allbtn ul li .pop dt {
padding-left: 0px;
width: 72px
}
.hc_lnav .allbtn ul li .pop dd {
width: 565px;
margin-left: -12px
}
.hc_lnav .allbtn ul li .pop .act {
width: 640px;
height: 80px;
overflow: hidden;
padding-top: 10px
}
.hc_lnav .allbtn:hover ul {
display: block
}
.hc_lnav .allbtn ul li:hover {
background-color: #fcfcfc
}
.hc_lnav .allbtn ul li:hover .tx {
background-color: #f5f5f5
}
.hc_lnav .allbtn ul li:hover .tx a {
color: #333333
}
.hc_lnav .allbtn ul li:hover .tx a i {
background-position: 0px -25px
}
.hc_lnav .allbtn ul li:hover .pop {
display: block;
top: 0px;
left: 190px
}
.hc_lnav .allbtn ul li:hover .pop dl a.un {
color: #a5a5a5;
text-decoration: none
}
.hc_lnav .allbtn ul li:hover dl {
color: #6e6e6e
}
.hc_lnav .allbtn ul li:hover a {
color: #666666
}
.hc_lnav .allbtn ul li:hover a:hover {
color: #cd0606
}ui
圖片url
不要忘記這個小圖標哦，其實能夠到阿里媽媽那使用矢量圖標spa
- 1. 左側菜單導航欄的實現
- 2. Html+Css+Jquery實現左側滑動拉伸導航菜單欄
- 3. jquery網頁左側導航菜單欄
- 4. 純CSS打造淘寶導航菜單欄
- 5. 左側菜單 html+css
- 6. css導航欄二級菜單寫法
- 7. 3.左側導航欄
- 8. 左側導航欄案例
- 9. HTML--點擊左側導航欄，更新右側頁面(iframe)
- 10. html純css實現導航欄下拉菜單（帶下拉三級菜單）
- 更多相關文章...
- • ionic 側欄菜單 - ionic 教程
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. 左側菜單導航欄的實現
- 2. Html+Css+Jquery實現左側滑動拉伸導航菜單欄
- 3. jquery網頁左側導航菜單欄
- 4. 純CSS打造淘寶導航菜單欄
- 5. 左側菜單 html+css
- 6. css導航欄二級菜單寫法
- 7. 3.左側導航欄
- 8. 左側導航欄案例
- 9. HTML--點擊左側導航欄，更新右側頁面(iframe)
- 10. html純css實現導航欄下拉菜單（帶下拉三級菜單）