今天给大家分享一款纯css实现的漂亮导航，适合放在个人中心。还带来图标，效果不错。一起看下效果图：

HTML代码：

<div class="l-main">

    <div class="menu">

        <header class="menu__header">

            <h1 class="menu__header-title">  

                    Incoming Messages</h1> 

        </header>

        <div class="menu__body">

            <ul class="nav">

                <li class="nav__item">

                    <a href="http://www.jb51.net" class="nav__item-link is-active"> <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>  <span class="badge badge--warning">32</span> 

                    </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-flag nav__item-icon">  

                    </i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a> 

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">  

                    </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a> 

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-archive nav__item-icon">  

                    </i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a> 

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-trash nav__item-icon">  

                    </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a> 

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><span class="nav__item-text">  

                        Show all</span> </a>

                </li>

            </ul>

        </div>

    </div>

    <div class="menu menu--small">

        <header class="menu__header">

            <h1 class="menu__header-title">  

                    Incoming</h1> 

        </header>

        <div class="menu__body">

            <ul class="nav">

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">  

                    </i><span class="badge badge--warning">32</span> </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-flag nav__item-icon">  

                    </i><span class="badge">8</span> </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">  

                    </i><span class="badge">0/17</span> </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-archive nav__item-icon">  

                    </i><span class="badge">3</span> </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-trash nav__item-icon">  

                    </i><span class="badge">9</span> </a>

                </li>

                <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><span class="nav__item-text">  

                        Show all</span> </a>

                </li>

            </ul>

        </div>

    </div>

</div>

CSS代码：

body {

    background: #F4F4F4;

    font - family: Arial,

    sans - serif;

    font - size: 14px;

    font - weight: lighter;

}.l - main {

    width: 530px;

    margin: 0 auto;

}.menu {

    width: 250px;

    margin: 40px;

    background: #fff;

    box - shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

    border - radius: 5px;

    float: left;

}.menu__header {

    background: #4B4F55;   

            border-bottom: 1px solid # 353A40;

    border - radius: 5px 5px 0 0;

}.menu__header - title {

    color: #fff;

    padding: 15px;

    text - shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

}.menu__body {

    border - radius: 0 0 5px 5px;

}.menu--small {

    width: 110px;

}.nav {

    list - style: none;

}.nav__item {

    position: relative;

}.nav__item - link {

    padding: 10px 15px;

    text - decoration: none;

    color: #8B8E93;   

            display: block;   

            border-bottom: 1px solid # F0F0F0;

}.nav__item - link: hover {

    background: #f0f0f0;

}.nav__item - link.is - active {

    background: #6E757F;   

            color: # fff;

    border - bottom - color: #4B4F55;   

            box-shadow: 0 1px 0 # 7A828D inset;

}.nav__item - link.is - active: after {

    content: '';

    display: block;

    position: absolute;

    top: 50 % ;

    rightright: -6px;

    margin - top: -6px;

    border - top: 6px solid transparent;

    border - bottom: 6px solid transparent;

    border - left: 6px solid #6E757F;   

        }   

        .nav__item-link.is-active .nav__item-icon  

        {   

            color: # fff;

}.nav__item: last - child.nav__item - link {

    border - bottom: none;

}.nav__item - icon {

    color: #D2D5DA;

    width: 20px;

    text - align: center;

    font - size: 18px;

    margin - right: 10px;

}.badge {

    font - size: 12px;

    padding: 2px 8px;

    border: 1px solid# D1D1D1;

    border - radius: 10px;

    position: absolute;

    top: 10px;

    rightright: 15px;

}.badge--warning {

    background: #ED373F;

    border - color: #ED373F;

}