仿京东商品分类导航

最新推荐文章于 2024-08-22 14:34:47 发布

「已注销」

最新推荐文章于 2024-08-22 14:34:47 发布

阅读量1.3k

点赞数

看一看最终的效果:

下面我们就按照分析→设计→实现三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。

我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)

因为我是用纯css+html写的，所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).

接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东导航</title>
<link href="css/cssreset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>

<body>
<nav>
<div class="all">
<a href="#">全部商品分类</a>
</div>
<ul>
<li class="nav_item"><a href="#">家用电器</a><span class="jt">></span>
<div class="sub_menu">
<div class="leftmenu">
<dl>
<dt><a href="#">大家电</a></dt>
<dd>
<a href="#" >平板电视</a>
<a href="#">空调</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">家庭影院</a>
<a href="#">DVD</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><a href="#">生活电器</a></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>
<a href="#">除湿机</a>
<a href="#">干衣机</a>
<a href="#">收录/音机</a>
</dd>
</dl>
<dl>
<dt><a href="#">厨房电器</a></dt>
<dd>
<a href="#">电压力锅</a>
<a href="#">空调</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">家庭影院</a>
<a href="#">DVD</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><a href="#">个护健康</a></dt>
<dd>
<a href="#" >平板电视</a>
<a class="test" href="#">空调</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">家庭影院</a>
<a href="#">DVD</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><a href="#">五金家装</a></dt>
<dd>
<a href="#">平板电视</a>
<a href="#">空调</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">家庭影院</a>
<a href="#">DVD</a>
<a href="#">迷你音响</a>
<a href="#">烟机/灶具</a>
<a href="#"> 热水器</a>
<a href="#">消毒柜/洗碗机</a>
<a href="#">冷柜/冰吧</a>
<a href="#">酒柜</a>
<a href="#">家电配件</a>
</dd>
</dl>

</div>
<div class="rightmenu">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img10.360buyimg.com/vclist/jfs/t1198/21/1061230330/3619/48ee51cc/556ed3a0N9004a8f7.jpg"
width="168" height="134" title="by:罗坚元">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img11.360buyimg.com/vclist/jfs/t1531/43/307393451/3092/229dc57a/557194e1N0d5188f3.jpg"
width="168" height="134" title="by:罗坚元">
</a>
</dd>
</dl>

</div>
</div>
</li>

main.css

/* CSS Document */
nav{
position:absolute;
left:100px;
top:100px;
border:1px solid #b61d1d;
}
/*全部商品分类*/
.all{
width:190px;
height:44px;
line-height:44px;
background:#b1191a;
padding:0 10px;
}
.all a{
color:white;
font-size:16px;

}
/*导航菜单*/
.nav_item{

width:190px;
height:31px;
line-height:31px;
color:white;
background:#b61d1d;
padding:0 10px;
}
ul li a{color:white;}

.jt{
color:white;
float:right;
width:12px;
padding-top:10px;
font: 13px consolas;
}
/*hover*/
ul li:hover {
background:white;
}
ul li:hover a{
color:#b61d1d;
}
/*submenu*/
.sub_menu{
display:none;
width:790px;
position:absolute;
left:210px;
top:44px;
background:#f7f7f7;
}
ul li:hover .sub_menu{display:block;}
.leftmenu{
width: 550px;
overflow:hidden;
float:left;
}
.leftmenu dl{
overflow:hidden;
display:block;
margin: 20px 0;

}
.leftmenu dl dt{
float:left;
font-weight:bold;
color:#737373;
padding:0 8px;

}

.leftmenu dl dd a{
color: #737373;
float:left;
height:20px;
line-height:20px;
padding:0 10px;
border-left: 1px solid #e0e0e0;
font-size:12px;
margin-top:5px;
}
.rightmenu{
float:right;
}
.rightmenu dl {
margin-top:20px;

}
.rightmenu dl dd {
padding:0;
margin-bottom:2px;
}

cssreset.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
border: none;
font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";
font-size: 14px;
}
ol,ul{
list-style: none;
}
fieldset,img{
border:0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
a{
text-decoration: none;
color: #737373;
}
img, iframe {
border: none;
text-decoration:none;
}
---------------------
作者：Jy_code
来源：CSDN
原文：https://blog.csdn.net/sunyuan_software/article/details/46425575
版权声明：本文为博主原创文章，转载请附上博文链接！