今天继续组件文章的分享。结合上一次讲到的水平导航栏，今天就讲讲垂直导航栏。其实原理和水平导航栏原理其实差不多类似，那么就来谈谈。
说到垂直导航栏，用到最多的地方就是电商网页，特别像淘宝，天猫，京东，苏宁这些网站都有垂直导航栏。垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。这里结合天猫的垂直导航栏来说说垂直导航栏如何写完成。
首先肯定需要一个最外层的盒子来装载全部的内容。然后就是商品分类那一栏和下面的导航区。因为有的网页比较喜欢隐藏导航栏，然后通过滑动鼠标或者点击鼠标到商品导航栏。所以比较建议把商品分类和下面的导航区域分成两个不同的div装载。
第一步：先创建放载导航栏的div盒子
**
代码清单:html代码
<div id="nav1"> <div id="nav_tit"> <i class="iconfont icon-list"></i> <div class="sort">商品分类</div> </div> <div id="nav2"></div> </div> 清除并改变一下一些浏览器的默认样式
代码清单:css代码
* { 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; background-color: lightblue; } a { color: #FFFFFF; text-decoration: none; } a:hover { color: #cd0606; } 第二步：创建一级垂直导航
有了盒子,那么就来做垂直导航部分。当然最好就是使用ul和li啦。那么就以一个li为例，分析一下垂直导航栏中有什么结构。
以这个来说，这个就是最基础的li标签包含的东西。最左边是图标，最右边就是链接。
首先谈谈图标。一般实现方案有两种，一种是雪碧图背景设置，另外一种就是图标文字。对于我而言，图标文字可能我会更加喜欢用，因为可以通过改变字体的样式来改变图标的一些样式从而实现不同的效果。我这里用到了阿里的iconfont。把可能要用到的图标放在一个项目下载下来，通过类名即可以调用，十分方便。
谈完左边的图标文字，右边的文字部分可控的大多为超级链接的a标签控制的文字，而对于文字之间隔开的“/”符号，不同网站实现方法不同，有的直接是在a标签后加“/”，有的用em标签控制,有的则用span或者i标签。实际取决于对其的实用性是否有特殊要求。我这里用了span标签控制，以防后面可能作出改变有地方进行修改。
代码清单:html代码
<ul> <li> <i class="iconfont icon-dress"></i> <a href="">女装</a> <span class="dline">/</span> <a href="">内衣</a> </li> </ul> 对全部的li列完之后,再修改他们的样式。这里有一点很关键的就是垂直导航栏的盒子宽高设定,一是因为影响到样式的一些变化，比如内容过长时设置超出部分隐藏等，假如宽度没有设置好，就很容易出现一些内容被隐藏起来。再者就是一级垂直导航栏设置也会决定右侧的二级垂直导航栏的一些改变。所以对一些数值要求会比较严格。
代码清单:css代码
#nav1 { position: relative; width: 100%; height: 900px; } #nav_tit { width: 200px; height: 36px; line-height: 36px; font-size: 16px; color: #FFFFFF; background: #FF0036; } #nav_tit>i { font-size: 20px; margin-left: 14px; display: inline-block; } #nav_tit div { display: inline-block; } #nav2 { width: 200px; height: 600px; position: relative; background-color: rgba(0, 0, 0, .5); color: #FFFFFF; font-size: 14px; } #nav2 li { height: 32px; line-height: 32px; } #nav2 li>i { margin-left: 14px; } .hot { color: #e54077!important; } 部分代码可见。实际就是做一个垂直框的过程，当完成上面部分时则可有垂直导航栏的雏形了。
第二步实现出的效果
我们可以适当给他一些交互的样式效果，比如当鼠标移动子项时，字体、图标和背景发生一点改变。
代码清单:css代码
#nav2>ul>li:hover { background: #FFFFFF; color: rgb(229, 64, 119); } #nav2>ul>li:hover>a { color: rgb(229, 64, 119);} 
效果如上图所示
第三步：创建二级垂直导航
然后对于二级导航栏放置的盒子的位置有两种，一种就是包裹在li标签内，这种可以通过绝对定位直接控制好二级导航栏与一级之间的位置保持高度一致，但是这种对于后期处理和维护比较复杂，代码比较臃肿不太建议。第二种就是通过在左侧盒子之外再建一个盒子，装载右侧二级导航的所有菜单。然后通过js控制其对应。
当创建了盒子之后，先对一个盒子里进行样式改变。当完成这一个菜单的样式时通过改变这个盒子display：none进行隐藏。然后对其他二级导航栏的菜单进行结构和样式的改变。当完成全部结构和样式之后。对其全部进行隐藏display：none处理。
通过css或者js，当鼠标移到对应li时，二级导航栏中菜单进行变化即可。
代码清单:html代码
<li> <i class="iconfont icon-dress"></i> <a href="">女装</a> <span class="dline">/</span> <a href="">内衣</a> <div class="nav_content"> <div class="nav_pannel"> <div class="nav_list"> <div class="nav_list_title"> <div class="title_text">当季流行</div> <i class="iconfont icon-jiantou"></i> </div> <div class="nav_list_content"> <a href="" class="content_text hot">女装新品</a> <a href="" class="content_text">商城同款</a> <a href="" class="content_text">仙女连衣裙</a> <a href="" class="content_text">T恤</a> <a href="" class="content_text hot">时髦外套</a>`在这里插入代码片` <a href="" class="content_text">商城同款</a> <a href="" class="content_text">休闲裤</a> <a href="" class="content_text hot">牛仔裤</a> <a href="" class="content_text">无痕文胸</a> <a href="" class="content_text hot">运动文胸</a> <a href="" class="content_text">潮流家居服</a> <a href="" class="content_text">百搭船袜</a> </div> </div> </div> </div> </li> 代码清单:css代码
.nav_content{ width: 782px; height: 600px; position: absolute; left: 200px; top: 0px; background-color: #FFFFFF; overflow: hidden; display: none; } #nav2>ul>li:hover .nav_content{ display: block; } .nav_list{ margin: 19px 30px; height: 60px; } .nav_list_title{ width: 60px; color: #333; position: relative; font-size: 14px; font-weight: 700; height: 22px; line-height: 22px; float: left; margin-right: 30px; } .title_text{ display: inline-block; overflow: hidden; text-align: justify; } .nav_list_title>i{ display: block; position: absolute; top: 0; right: -15px; } .nav_list_content{ height: 22px; line-height: 22px; width: 600px; float: left; } .content_text{ color: #666; float: left; margin-left: 13px; } 最终效果如下：
对于垂直导航栏，经常我们能看到一些小徽章在文字上面。我们可以通过编写一些类，设置好其样式，设置为position：absolute。给文字设置position：relative；然后需要使用时给他对应的类名实现即可。或者我们想改变个别字体的颜色，也可以通过这种方法，比如有的字体我想要其红色效果，那么我们写一个css类color为红色，当需要时调用类名即可，