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

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

　　实现的代码。

　　html代码：

1. <divclass="l-main">
2. <divclass="menu">
3. <headerclass="menu__header">
4. <h1class="menu__header-title">
5. IncomingMessages</h1>
6. </header>
7. <divclass="menu__body">
8. <ulclass="nav">
9. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-linkis-active">
10. <iclass="fafa-envelopenav__item-icon"></i><spanclass="nav__item-text">News</span>
11. <spanclass="badgebadge--warning">32</span></a></li>
12. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-flagnav__item-icon">
13. </i><spanclass="nav__item-text">Priority</span><spanclass="badge">8</span></a>
14. </li>
15. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-space-shuttlenav__item-icon">
16. </i><spanclass="nav__item-text">Assigned</span><spanclass="badge">0/17</span></a>
17. </li>
18. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-archivenav__item-icon">
19. </i><spanclass="nav__item-text">Archived</span><spanclass="badge">3</span></a>
20. </li>
21. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-trashnav__item-icon">
22. </i><spanclass="nav__item-text">Deleted</span><spanclass="badge">9</span></a>
23. </li>
24. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><spanclass="nav__item-text">
25. Showall</span></a></li>
26. </ul>
27. </div>
28. </div>
29. <divclass="menumenu--small">
30. <headerclass="menu__header">
31. <h1class="menu__header-title">
32. Incoming</h1>
33. </header>
34. <divclass="menu__body">
35. <ulclass="nav">
36. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-linkis-active"><iclass="fafa-envelopenav__item-icon">
37. </i><spanclass="badgebadge--warning">32</span></a></li>
38. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-flagnav__item-icon">
39. </i><spanclass="badge">8</span></a></li>
40. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-space-shuttlenav__item-icon">
41. </i><spanclass="badge">0/17</span></a></li>
42. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-archivenav__item-icon">
43. </i><spanclass="badge">3</span></a></li>
44. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><iclass="fafa-trashnav__item-icon">
45. </i><spanclass="badge">9</span></a></li>
46. <liclass="nav__item"><ahref="https://www.jb51.net"class="nav__item-link"><spanclass="nav__item-text">
47. Showall</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. }
9. .l-main
10. {
11. width:530px;
12. margin:0auto;
13. }
15. .menu
16. {
17. width:250px;
18. margin:40px;
19. background:#fff;
20. box-shadow:01px4pxrgba(0,0,0,0.3);
21. border-radius:5px;
22. float:left;
23. }
25. .menu__header
26. {
27. background:#4B4F55;
28. border-bottom:1pxsolid#353A40;
29. border-radius:5px5px00;
30. }
32. .menu__header-title
33. {
34. color:#fff;
35. padding:15px;
36. text-shadow:01px0rgba(0,0,0,0.4);
37. }
39. .menu__body
40. {
41. border-radius:005px5px;
42. }
44. .menu--small
45. {
46. width:110px;
47. }
49. .nav
50. {
51. list-style:none;
52. }
54. .nav__item
55. {
56. position:relative;
57. }
59. .nav__item-link
60. {
61. padding:10px15px;
62. text-decoration:none;
63. color:#8B8E93;
64. display:block;
65. border-bottom:1pxsolid#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:01px0#7A828Dinset;
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:6pxsolidtransparent;
87. border-bottom:6pxsolidtransparent;
88. border-left:6pxsolid#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. }
99. .nav__item-icon
100. {
101. color:#D2D5DA;
102. width:20px;
103. text-align:center;
104. font-size:18px;
105. margin-right:10px;
106. }
108. .badge
109. {
110. font-size:12px;
111. padding:2px8px;
112. border:1pxsolid#D1D1D1;
113. border-radius:10px;
114. position:absolute;
115. top:10px;
116. rightright:15px;
117. }
119. .badge--warning
120. {
121. background:#ED373F;
122. border-color:#ED373F;
123. }

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