【京东商城首页实战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：

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

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