bootstrap导航栏内容垂直居中_天猫商城垂直导航栏如何制作呢？

css导航栏

小编：阳光就好

导航栏的运用

在各网站中我们都会发现有各式各样的导航栏，那什么是导航栏呢？小编给大家举个例子？大家就会明白了，以河北软件职业技术学院官网为例。

红色边框里面的就是导航栏。

导航栏

在上面案例中，我们看到了水平的导航栏，那必然也会有垂直的导航栏，小编用天猫商城为例，让大家认识一下垂直导航栏。

红色边框是垂直导航栏，紫色边框是水平导航栏。

那么导航栏该如何用css样式来展示呢？

那小编就用天猫商城的导航栏为例。来给大家介绍一下。

首先肯定需要一个最外层的盒子来装载全部的内容。然后就是商品分类那一栏和下面的导航区。因为有的网页比较喜欢隐藏导航栏，然后通过滑动鼠标或者点击鼠标到商品导航栏。所以比较建议把商品分类和下面的导航区域分成两个不同的div装载。

那么第一步我们应该先创建放载导航栏的div盒子

"nav1">

"nav_tit">   "iconfont icon-list">  

"sort">商品分类

"nav2">

清除并改变一下一些浏览器的默认样式

* {    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标签控制，以防后面可能作出改变有地方进行修改。

             class=        "">女装        "dline">/        "">内衣      

对全部的li列完之后,再修改他们的样式。这里有一点很关键的就是垂直导航栏的盒子宽高设定,一是因为影响到样式的一些变化，比如内容过长时设置超出部分隐藏等，假如宽度没有设置好，就很容易出现一些内容被隐藏起来。再者就是一级垂直导航栏设置也会决定右侧的二级垂直导航栏的一些改变。所以对一些数值要求会比较严格。

#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;}

部分代码可见。实际就是做一个垂直框的过程，当完成上面部分时则可有垂直导航栏的雏形了。

我们可以适当给他一些交互的样式效果，比如当鼠标移动子项时，字体、图标和背景发生一点改变。

#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时，二级导航栏中菜单进行变化即可。

   class=   "">女装   "dline">/   "">内衣

"nav_content">      

"nav_pannel">          

"nav_list">              

"nav_list_title">                    

"title_text">当季流行

                   "iconfont icon-jiantou">              

             

"nav_list_content">               "" class="content_text hot">女装新品               "" class="content_text">商城同款               "" class="content_text">仙女连衣裙              "" class="content_text">T恤              "" class="content_text hot">时髦外套              "" class="content_text">商城同款              "" class="content_text">休闲裤              "" class="content_text hot">牛仔裤              "" class="content_text">无痕文胸              "" class="content_text hot">运动文胸              "" class="content_text">潮流家居服              "" class="content_text">百搭船袜          

       

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为红色，当需要时调用类名即可。

扫码关注我们

学习前端一小时

主编｜阳光就好

期待你们的学习与关注欧！