DIV CSS 佈局教程網

之前已經分享很多css3實現的導航菜單，今天再分享一款純CSS實現的漂亮導航，這款也是適合放在個人中心。還帶來圖標，效果不錯。需要的朋友可以參考下

　　今天給大家分享一款純CSS實現的漂亮導航。之前為大家分享過jquery實現的個人中心導航菜單，今天這款也是適合放在個人中心。還帶來圖標，效果不錯。一起看下效果圖：

　　實現的代碼。

　　Html代碼：

XML/Html Code復制內容到剪貼板

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. <li class="nav__item"><a href="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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代碼：

CSS Code復制內容到剪貼板

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: 0 auto;
13. }
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. }
25. .menu__header
26. {
27. background: #4B4F55;
28. border-bottom: 1px solid #353A40;
29. border-radius: 5px 5px 0 0;
30. }
32. .menu__header-title
33. {
34. color: #fff;
35. padding: 15px;
36. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
37. }
39. .menu__body
40. {
41. border-radius: 0 0 5px 5px;
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: 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. }
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: 2px 8px;
112. border: 1px solid #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實現的漂亮導航。謝謝閱讀，希望能幫到大家，請繼續關注，我們會努力分享更多優秀的文章。