一款CSS3实现多功能下拉菜单（带分享按）的教程

今天要分享的这款菜单是基于CSS3的下拉菜单，功能非常强大，下拉菜单中不仅拥有背景色渐变的菜单项，而且还带有分享按钮的菜单项，为了让菜单更加美观，每一个菜单项都带有非常漂亮的小图标，而且在下拉菜单中还有鼠标滑过缩进的动画特效。

接下来我们来具体解说一下实现这款CSS3下拉菜单原理和过程，代码主要是HTML和CSS。

首先是HTML代码，主要是两部分，左侧的下拉菜单项和右侧的分享按钮菜单，分别用了一个ul li列表：

HTML代码:

XML/HTML Code复制内容到剪贴板

1. <ul class=”menu-function”>  
2. <li>  
3. <a href=”" title=”">CATEGORIES</a>  
4. <ul class=”dropdown-menu categories”>  
5. <li><a href=”" title=”">Design</a></li>  
6. <li><a href=”" title=”">Freebies</a></li>  
7. <li><a href=”" title=”">Tutorials</a></li>  
8. <li><a href=”" title=”">Coding</a></li>  
9. <li><a href=”" title=”">Inspiration</a></li>  
10. <li><a href=”" title=”">WordPress</a></li>  
11. <li><a href=”" title=”">Resources</a></li>  
12. </ul>  
13. </li>  
14. <li><a href=”" title=”">SHOP</a></li>  
15. <li id=”search”>  
16. <a href=”#search” title=”">SEARCH</a>  
17. </li>  
18. <li id=”search-hidden”>  
19. <input type=”text” name=”" id=”"><a href=”#search-hidden” title=”"></a>  
20. </li>  
21. </ul>  
22. <ul class=”menu-share”>  
23. <li>  
24. <a href=”" title=”">FOLLOW US</a>  
25. <ul class=”dropdown-menu follow”>  
26. <li><a href=”" title=”">RSS</a></li>  
27. <li><a href=”" title=”">Twitter</a></li>  
28. <li><a href=”" title=”">Facebook</a></li>  
29. <li><a href=”" title=”">Google+</a></li>  
30. <li><a href=”" title=”">Dribbble</a></li>  
31. </ul>  
32. </li>  
33. <li>  
34. <a href=”" title=”">SHARE</a>  
35. <ul class=”dropdown-menu share”>  
36. <li><a href=”" title=”">Facebook</a></li>  
37. <li><a href=”" title=”">Twitter</a></li>  
38. <li><a href=”" title=”">Google+</a></li>  
39. </ul>  
40. </li>  
41. </ul>  

这个ul结构支撑了下拉菜单的基本骨架，应该还算普通。

接下来是CSS3代码，是实现这款CSS3下拉菜单的关键：

CSS3代码:

CSS Code复制内容到剪贴板

1. .page-menu-wrapper > ul > li {   
2. position: relative;   
3. float: left;   
4. border-left: 1px solid #3d61a2;   
5. border-right: 1px solid #3d61a2;   
6. margin-right: -1px;   
7. }   
8. .menu-function {   
9. float: left;   
10. }   
11. .menu-share {   
12. float: rightright;   
13. }   
14. .page-menu-wrapper > .menu-function > li:first-child {   
15. border-left: none;   
16. }   
17. .page-menu-wrapper > .menu-share > li:last-child {   
18. border-right: none;   
19. }   
20. .page-menu-wrapper a {   
21. position: relative;   
22. display: block;   
23. padding: 0 15px;   
24. transition: all .3s ease-out;   
25. }   
26. .page-menu-wrapper > ul > li:hover > a {   
27. color: #3d61a2;   
28. background-color: #fff;   
29. }   
30. .page-menu-wrapper > ul > li:hover .dropdown-menu {   
31. display: block;   
32. }   
33. .dropdown-menu {   
34. display: none;   
35. position: absolute;   
36. width: 260px;   
37. font-size: 18px;   
38. font-weight: bold;   
39. text-align: left;   
40. background-color: #fff;   
41. }   
42. .dropdown-menu.categories a {   
43. color: #000;   
44. }   
45. .dropdown-menu.categories a:hover {   
46. color: #5bc4be;   
47. margin-left: 10px;   
48. }   
49. #search:target a[href="#search"] {   
50. display: none;   
51. }   
52. #search:target ~ #search-hidden {   
53. display: block;   
54. }   
55. #search-hidden {   
56. display: none;   
57. padding: 0 5px;   
58. background-color: #fff;   
59. }   
60. #search-hidden input {   
61. border: none;   
62. line-height: 24px;   
63. width: 180px;   
64. }   
65. #search-hidden a {   
66. float: rightright;   
67. padding: 0;   
68. width: 20px;   
69. height: 45px;   
70. }   
71. #search-hidden a:before {   
72. content: “\7d”;   
73. left: 0;   
74. color: #446cb3;   
75. }   
76. .menu-function > li > a,.menu-share > li > a {   
77. padding-left: 40px;   
78. }   
79. .page-menu-wrapper a:before {   
80. position: absolute;   
81. left: 15px;   
82. font-family: ‘icomoon’;   
83. font-style: normal;   
84. speak: none;   
85. font-weight: normal;   
86. font-smoothing: antialiased;   
87. font-size: 18px;   
88. vertical-align: middle;   
89. }   
90. .menu-function > li:nth-child(1) > a:before {   
91. content: “\e048″;   
92. }   
93. .menu-function > li:nth-child(2) > a:before {   
94. content: “\3b”;   
95. }   
96. .menu-function > li:nth-child(3) > a:before {   
97. content: “\7d”;   
98. }   
99. .menu-share > li:nth-child(1) > a:before {   
100. content: “\e0a2″;   
101. }   
102. .menu-share > li:nth-child(2) > a:before {   
103. content: “\e05b”;   
104. }   
105. /*follow*/  
106. .dropdown-menu.follow {   
107. width: 223px;   
108. }   
109. .dropdown-menu.follow a {   
110. padding-left: 35px;   
111. font-size: 14px;   
112. }   
113. .dropdown-menu.follow a:before {   
114. left: 10px;   
115. }   
116. .dropdown-menu.follow li:nth-child(1) a:before {   
117. content: “\e0a5″;   
118. }   
119. .dropdown-menu.follow li:nth-child(2) a:before {   
120. content: “\e0a2″;   
121. }   
122. .dropdown-menu.follow li:nth-child(3) a:before {   
123. content: “\e04c”;   
124. }   
125. .dropdown-menu.follow li:nth-child(4) a:before {   
126. content: “\e022″;   
127. }   
128. .dropdown-menu.follow li:nth-child(5) a:before {   
129. content: “\e03d”;   
130. }   
131. .dropdown-menu.follow li:nth-child(1) a {   
132. color: #ffaa31;   
133. }   
134. .dropdown-menu.follow li:nth-child(2) a {   
135. color: #07beed;   
136. }   
137. .dropdown-menu.follow li:nth-child(3) a {   
138. color: #314d91;   
139. }   
140. .dropdown-menu.follow li:nth-child(4) a {   
141. color: #2d2d2d;   
142. }   
143. .dropdown-menu.follow li:nth-child(5) a {   
144. color: #e84788;   
145. }   
146. .dropdown-menu.follow li:nth-child(1):hover {   
147. background-color: #ffaa31;   
148. }   
149. .dropdown-menu.follow li:nth-child(2):hover {   
150. background-color: #07beed;   
151. }   
152. .dropdown-menu.follow li:nth-child(3):hover {   
153. background-color: #314d91;   
154. }   
155. .dropdown-menu.follow li:nth-child(4):hover {   
156. background-color: #2d2d2d;   
157. }   
158. .dropdown-menu.follow li:nth-child(5):hover {   
159. background-color: #e84788;   
160. }   
161. .dropdown-menu.follow li:hover a {   
162. color: #fff;   
163. margin-left: 10px;   
164. }   
165. .dropdown-menu.share {   
166. width: 120px;   
167. rightright:0;   
168. }   
169. .dropdown-menu.share a {   
170. margin: 10px;   
171. line-height: 26px;   
172. font-size: 12px;   
173. padding-left: 20px;   
174. border: 1px solid #cbcbcb;   
175. border-radius: 2px;   
176. color: #4c4c4c;   
177. background-color: #efefef;   
178. }   
179. .dropdown-menu.share a:hover {   
180. background-color: #fff;   
181. }   
182. .dropdown-menu.share li a:before {   
183. font-size: 12px;   
184. left: 5px;   
185. }   
186. .dropdown-menu.share li:nth-child(1) a:before {   
187. content: “\e04c”;   
188. color: #314d91;   
189. }   
190. .dropdown-menu.share li:nth-child(2) a:before {   
191. content: “\e0a2″;   
192. color: #07beed;   
193. }   
194. .dropdown-menu.share li:nth-child(3) a:before {   
195. content: “\e022″;   
196. color: #2d2d2d;   
197. }   
198. @font-face {   
199. font-family: ‘icomoon’;   
200. src:url(‘fonts/icomoon.eot’);   
201. src:url(‘fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’),   
202. url(‘fonts/icomoon.svg#icomoon’) format(‘svg’),   
203. url(‘fonts/icomoon.woff’) format(‘woff’),   
204. url(‘fonts/icomoon.ttf’) format(‘truetype’);   
205. font-weight: normal;   
206. font-style: normal;   
207. }  

这个代码比较复杂，建议下载源码研究。谢谢阅读，希望能帮到大家，请继续关注三水点靠木，我们会努力分享更多优秀的文章。