仿淘宝左侧菜单导航栏纯Html + css 写的-白红宇

仿淘宝左侧菜单导航栏纯Html + css 写的

阅读量：6042 次

发布时间：2019-06-20

本文共 11386 字，大约阅读时间需要 37 分钟。

这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊，一时兴起，查了点资料抓了几个图片仿淘宝写了个css，时间紧写的不太好，大神勿喷，给小白做个参考

废话不多说先来个效果图

接下来直接上代码，图片没法传，只能直接放代码下边，辛苦点一张一张扣去吧?

HTML部分

<!DOCTYPE HTML >

<html>

<head>

<title>div css仿淘宝下拉导航菜单分类代码</title>

</head>

<body>

<h2><a href="#"><strong> </strong>全部商品分类<i> </i></a></h2>

<div class="tx"><a href="#"><i> </i>各地名优茶</a> </div>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<h3><a href="#">各地名优茶</a></h3>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a class="ui-link" href="">其他乌龙茶</a>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a class="ui-link" href="">白沙溪黑茶</a>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">台湾梅山制茶</a>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">经济自饮装</a>

<a href="" >精美礼品装</a>

</dd>

</dl>

</div>

</li>

<div class="tx"><a href=""><i> </i>花草保健茶</a> </div>

<dl>

<dd>

<a href="" >蜂蜜木瓜粉</a>

</dd>

</dl>

<h3><a href="">花草保健茶</a></h3>

<dl>

<dd>

<a class="ui-link" href="" >玫瑰荷叶茶</a>

<a class="ui-link" href="" >纤维泡腾片</a>

<a class="ui-link" href="" >青梅苹果酸</a>

</dd>

</dl>

<dl>

<dd>

<a class="ui-link" href="" >法兰西玫瑰</a>

<a class="ui-link" href="" >冻干柠檬片</a>

<a class="ui-link" href="">蜂蜜抹茶粉</a>

</dd>

</dl>

<dl>

<dd>

<a class="ui-link" href="" >木瓜葛根粉</a>

<a class="ui-link" href="" >蜂蜜木瓜粉</a>

<a class="ui-link" href="">红酒木瓜丽人饮</a>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">经济自饮装</a>

<a href="">精美礼品装</a>

</dd>

</dl>

</div>

</li>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">经济自饮装</a>

<a href="">精美礼品装</a>

</dd>

</dl>

</div>

</li>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a class="ui-link" href="">水晶柠檬片</a>

<a class="ui-link" href="">燕麦巧克力</a>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">经济自饮装</a>

<a href="">精美礼品装</a>

</dd>

</dl>

</div>

</li>

</ul>

</div>

</body>

</html>

CSS部分

@charset "utf-8";

* {

margin: 0;

padding: 0;

list-style-type: none;

}

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 {

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 {

}

.hc_lnav .allbtn ul li.a2 .tx a i {

}

.hc_lnav .allbtn ul li.a3 .tx a i {

}

.hc_lnav .allbtn ul li.a4 .tx a i {

}

.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

}

图片

不要忘记这个小图标哦，其实可以到阿里妈妈那使用矢量图标

转载于:https://www.cnblogs.com/lihaolh/p/6796891.html

你可能感兴趣的文章

[SQL Server] 数据库日志文件自动增长导致连接超时的分析

查看>>

【常见Web应用安全问题】---6、Script source code disclosure

每日英语：China Seeks to Calm Anxiety Over Rice

查看>>

C++中struct和class的区别 [转]

查看>>

C++ ofstream和ifstream详细用法

查看>>

Mysql 连接查询 Mysql支持的连接查询有哪些

查看>>

Hive Streaming 追加 ORC 文件

Android笔记：通过RadioGroup/RadioButton自定义tabhost的简单方法

Postgres 中 to_char 格式化记录

查看>>

关于联合索引

查看>>

开源 java CMS - FreeCMS2.7 登录移动端管理中心

查看>>

Android FM模块学习之三 FM手动调频

查看>>

Python 设置系统默认编码以及其他编码问题大全

查看>>