仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊，一时兴起，查了点资料抓了几个图片仿淘宝写了个css，时间紧写的不太好，大神勿喷，给小白做个参考
废话不多说先来个效果图
接下来直接上代码，图片没法传，只能直接放代码下边，辛苦点一张一张扣去吧?
HTML部分
<!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="data: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="data: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="data: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="data:images/20150518092213.jpg" /></a> </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS部分
@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
}
图片
不要忘记这个小图标哦，其实可以到阿里妈妈那使用矢量图标
转载于:https://www.cnblogs.com/lihaolh/p/6796891.html
仿淘宝左侧菜单导航栏纯Html + css 写的相关推荐
- Android仿淘宝底部图标导航栏
在上一篇中,简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本控件加上布局的方式,没有任 ...
- 左侧菜单导航栏的实现
一直困惑左侧菜单导航栏怎么实现的,不过在学过jQuery库后,可以简单的代码就能实现类似于京东,淘宝的左侧菜单导航栏了. 下面是实例代码: <!DOCTYPE html> <html ...
- jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
- 浅析我对Web（淘宝网）导航栏的深入理解
首先刚拿到这个项目的实现我也一脸迷茫的,不知道数据库和jsp以及Controller之间的传递流程,下面我为大家浅析一下我对此类导航栏的理解吧. 首先:项目界面大概UI是这个样子的. 一级目录:化妆品 ...
- 模仿淘宝首页横向导航栏
@TOC在这里插入代码片 <nav class="w"><div class="nav-scroll"><!-- 列表信息 --& ...
- 仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...
- 仿淘宝网站的TabPage导航效果
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
最新文章
- APP测试入门之性能测试
- 什么是系统调用?为什么要用系统调用?
- deltasql 1.5.5 发布，数据库模型版本控制
- php中的static
- MySQL 存储引擎
- 空间谱专题16：信号个数估计
- 力荐联邦学习系统，据说英伟达Clara“上架”新进展！
- php 同时导出两个文件_使用orangehill/iseed自动反向生成数据填充文件
- 在电脑上怎么打印文件_电脑上怎么mov格式怎么转换成mp4
- 异常 try – finally 注意的地方
- C++程序设计方法3：类中的静态成员
- 2017百度之星程序设计大赛 - 资格赛 1004
- VB VBA 文本框回车键换行
- java餐饮系统需求总结,基于java的餐饮管理系统的设计与实现开题报告
- 如何理解冲突域和广播域？（转）
- JAVA程序运行原理——知其然，而知其所以然
- AI算法工程师 | 02人工智能基础-Python基础（四）os模块_打开读取文件
- 经典例题：判断给定数组是否已经排好序
- freesurfer recon-all命令
- 网站中轮播图的制作方法