一款纯css实现的漂亮导航菜单(也适用于个人中心)

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

　　实现的代码。

　　html代码：

1. <div class="l-main">  
2.         <div class="menu">  
3.             <header class="menu__header">  
4.                 <h1 class="menu__header-title">  
5.                     Incoming Messages</h1>  
6.             </header>  
7.             <div class="menu__body">  
8.                 <ul class="nav">  
9.                     <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link is-active">  
10.                         <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>  
11.                         <span class="badge badge--warning">32</span> </a></li>  
12.                     <li class="nav__item"><a href="http://www.jb51.net" class="nav__item-link"><i class="fa fa-flag nav__item-icon">  
13.                     </i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a>  
14.                     </li>  
15.