一款纯css实现的漂亮导航

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

在线预览   源码下载

实现的代码。

html代码：

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.w2bc.com" 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.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" 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="http://www.w2bc.com" class="nav__item-link"><span class="nav__item-text">  
47.                         Show all</span> </a></li>  
48.                 </ul>  
49.             </div>  
50.         </div>  
51.     </div>  

 css代码：

Html代码  

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.             right: -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.             right: 15px;  
117.         }  
118.           
119.         .badge--warning  
120.         {  
121.             background: #ED373F;  
122.             border-color: #ED373F;  
123.         }  

 注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10143