【京东商城首页实战9】导航菜单栏和下拉列表

接下来开始做下面的部分，包括红色背景部分、导航菜单栏、右边的图片，如图：

图1

分析：

1.构架：全部商品分类是一个盒子、导航菜单是一个盒子，图片是一个盒子。
2.点击红色部分会出现下拉列表，从语义上讲它是定义列表。
3.导航菜单栏上有绿色小图标

1.左边下拉列表上部分

先做全部商品分类部分：

HTML代码：

<div class="jd-nav clearfix">
<!--最外层盒子负责通栏，要清除浮动--><div class="w"><!--添加版心盒子--><div class="dropdown"><!--全部商品分类和下拉列表的父亲盒子--><div class="dt"><!--全部商品分类盒子，后面再做下拉列表盒子--><a href="#">全部商品分类</a></div></div></div>
</div>

CSS代码：

.jd-nav {width: 100%;height: 44px;border-bottom: 2px solid #B1191A;
}
/*效果1*/
.dropdown {width: 210px;height: 44px;float: left;position: relative;z-index: 10;/*标准流的盒子层级是0，脱标的的盒子层级是1（浮动、定位）.因为下拉列表会盖住其他的盒子，所以要单独设定层级*/overflow: visible;/*dropdown盒子有点特殊，它自身和父亲盒子一样大小，下拉列表实际上就是它的兄弟，只是溢出了父亲盒子。这里用overflow: visible;就是要溢出的兄弟显示出来*/
}
/*效果2*/

效果1：

效果2：

2.中间导航菜单栏制作

导航菜单用无序列表做。

HTML代码：

<div class="navitems"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li class="new"><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">金融</a></li><li><a href="#">智能</a></li></ul>
</div>

CSS代码：

.navitems {width: 680px;height: 44px;float: left;
}
.navitems li {float: left;
}
.navitems li a {display: block;color: #333;font:400 15px/44px "微软雅黑";padding:0 20px;
}
.navitems li a:hover {color: #B1191A;
}
/*效果3*/
.navitems li.new {background: url(../images/new.jpg) no-repeat right top;/*设定一个单独的类，有盒子需要添加图标，就给所在的盒子添加类名即可*/
}
/*效果4*/

效果3：

效果4：

附上效果4上边的绿色图标：

插入右边的图片
右边的图片紧靠右侧版心，所以是右浮动。点击图片可以进入活动主页，里面应该包含一个a标签。
附上图片：

HTML代码：

<div class="bike"><a href="#"></a>
</div>

CSS代码：

.bike a {float: right;height: 44px;width: 140px;background:url(../images/bike.jpg) no-repeat;
}

效果5：

3.下拉列表完整

在做导航菜单使已经做了一部分下拉列表，就是有红色背景的“全部商品分类”。这节重点说下拉列表的做法。
原理：
父盒子无法装下子盒子，子盒子会溢出。
分析样本图，从语义上讲“全部商品分类”和下面的列表是意义有关联，应该归入一个盒子。但是第二个盒子的显现又不是静态的。当它出现的时候，覆盖住下面的内容，当不出现的时候不占空间。要做出这样的效果，可以利用盒子溢出原理，因为隐藏溢出不占用空间。这样，后面就可以利用JS做交互效果：当点击第一个儿子，就overflow：visible；当鼠标离开时，overflow：hidden。
所以，处理这个案例时，就可以使第一个盒子的宽高和父盒子相同，第二个子盒子完全溢出父盒子外。

HTML代码：

<div class="dropdown"><div class="dt"><a href="#">全部商品分类</a></div><div class="dd"><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>家用电器</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div><div class="items"><h3>手机、数码、京东通信</h3><span>></span></div>
</div>

下拉效果1：

CSS代码：

.dropdown {width: 210px;height: 44px;float: left;position: relative;z-index: 10;/*标准流的盒子层级是0，脱标的的盒子层级是1（浮动、定位）.因为下拉列表会盖住其他的盒子，所以要单独设定层级*/overflow: visible;/*dropdown盒子有点特殊，它自身和父亲盒子一样大小，下拉列表实际上就是它的兄弟，只是溢出了父亲盒子。这里用overflow: visible;就是要溢出的兄弟显示出来*/
}
.dropdown .dt a {display: block;font: 400 15px/44px "microsoft yahei";background-color: #B1191A;color: #fff;padding-left: 10px;/*文字和边框之间有距离*/
}
.dropdown .dd {height: 465px;/*先给第二个儿子设定宽高，宽高可由内容自动撑开，后面可以去掉*/background-color: #C81623;margin-top: 2px;/*第二个儿子没有压住祖父盒子的下border，所以下移2px*/
}
/*下拉效果2*/
.dropdown .items {height: 31px;/*有行高撑开，这里的高可以删掉*/line-height: 31px;border-left: 1px solid #B61D1D;padding-left: 10px;/*左边距离dd盒子有10px间距*/color: #fff;font-size: 15px;font-family:"微软雅黑";/*给每个列表设置样式*/
}
/*下拉效果3*/
.dropdown .items h3 {float: left;/*每个div里有两个元素，字向左浮动，＞图标向右浮动*/
}
.dropdown .items span {float: right;margin-right: 15px;font-family: "宋体";font-weight: 600;/*给＞图标设置样式*/
}
/*下拉效果4*/

下拉效果2：

下拉效果3：

下拉效果4：

好啦！导航菜单和下拉列表已经完成了，至此，京东网页也完成了一小半，成果如下图，感受一下，嘻嘻~：

谢谢大家,欢迎指正!欲知后事如何，且听明天分解。晚安！