一款纯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="https://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="https://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.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">  
16.                     </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a>  
17.                     </li>  
18.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-archive nav__item-icon">  
19.                     </i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a>  
20.                     </li>  
21.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-trash nav__item-icon">  
22.                     </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a>  
23.                     </li>  
24.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><span class="nav__item-text">  
25.                         Show all</span> </a></li>  
26.                 </ul>  
27.             </div>  
28.         </div>  
29.         <div class="menu menu--small">  
30.             <header class="menu__header">  
31.                 <h1 class="menu__header-title">  
32.                     Incoming</h1>  
33.             </header>  
34.             <div class="menu__body">  
35.                 <ul class="nav">  
36.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">  
37.                     </i><span class="badge badge--warning">32</span> </a></li>  
38.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-flag nav__item-icon">  
39.                     </i><span class="badge">8</span> </a></li>  
40.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">  
41.                     </i><span class="badge">0/17</span> </a></li>  
42.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-archive nav__item-icon">  
43.                     </i><span class="badge">3</span> </a></li>  
44.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-trash nav__item-icon">  
45.                     </i><span class="badge">9</span> </a></li>  
46.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><span class="nav__item-text">  
47.                         Show all</span> </a></li>  
48.                 </ul>  
49.             </div>  
50.         </div>  
51.     </div>  

　　css代码：

1. body   
2.         {   
3.             background: #F4F4F4;   
4.             font-family: Arial, sans-serif;   
5.             font-size: 14px;   
6.             font-weight: lighter;   
7.         }   
8.            
9.         .l-main   
10.         {   
11.             width: 530px;   
12.             margin: 0 auto;   
13.         }   
14.            
15.         .menu   
16.         {   
17.             width: 250px;   
18.             margin: 40px;   
19.             background: #fff;   
20.             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);   
21.             border-radius: 5px;   
22.             float: left;   
23.         }   
24.            
25.         .menu__header   
26.         {   
27.             background: #4B4F55;   
28.             border-bottom: 1px solid #353A40;   
29.             border-radius: 5px 5px 0 0;   
30.         }   
31.            
32.         .menu__header-title   
33.         {   
34.             color: #fff;   
35.             padding: 15px;   
36.             text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);   
37.         }   
38.            
39.         .menu__body   
40.         {   
41.             border-radius: 0 0 5px 5px;   
42.         }   
43.            
44.         .menu--small  
45.         {   
46.             width: 110px;   
47.         }   
48.            
49.         .nav   
50.         {   
51.             list-style: none;   
52.         }   
53.            
54.         .nav__item   
55.         {   
56.             position: relative;   
57.         }   
58.            
59.         .nav__item-link   
60.         {   
61.             padding: 10px 15px;   
62.             text-decoration: none;   
63.             color: #8B8E93;   
64.             display: block;   
65.             border-bottom: 1px solid #F0F0F0;   
66.         }   
67.         .nav__item-link:hover   
68.         {   
69.             background: #f0f0f0;   
70.         }   
71.         .nav__item-link.is-active   
72.         {   
73.             background: #6E757F;   
74.             color: #fff;   
75.             border-bottom-color: #4B4F55;   
76.             box-shadow: 0 1px 0 #7A828D inset;   
77.         }   
78.         .nav__item-link.is-active:after   
79.         {   
80.             content: '';   
81.             display: block;   
82.             position: absolute;   
83.             top: 50%;   
84.             rightright: -6px;   
85.             margin-top: -6px;   
86.             border-top: 6px solid transparent;   
87.             border-bottom: 6px solid transparent;   
88.             border-left: 6px solid #6E757F;   
89.         }   
90.         .nav__item-link.is-active .nav__item-icon  
91.         {   
92.             color: #fff;   
93.         }   
94.         .nav__item:last-child .nav__item-link   
95.         {   
96.             border-bottom: none;   
97.         }   
98.            
99.         .nav__item-icon  
100.         {   
101.             color: #D2D5DA;   
102.             width: 20px;   
103.             text-align: center;   
104.             font-size: 18px;   
105.             margin-right: 10px;   
106.         }   
107.            
108.         .badge   
109.         {   
110.             font-size: 12px;   
111.             padding: 2px 8px;   
112.             border: 1px solid #D1D1D1;   
113.             border-radius: 10px;   
114.             position: absolute;   
115.             top: 10px;   
116.             rightright: 15px;   
117.         }   
118.            
119.         .badge--warning   
120.         {   
121.             background: #ED373F;   
122.             border-color: #ED373F;   
123.         }  

　　以上就是今天分享的一款纯css实现的漂亮导航。谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。