怎么用CSS3實現多功能下拉菜單

這篇文章主要介紹“怎么用CSS3實現多功能下拉菜單”，在日常操作中，相信很多人在怎么用CSS3實現多功能下拉菜單問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用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: &lsquo;icomoon&rsquo;;   

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&Prime;;   

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&Prime;;   

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&Prime;;   

118. }   

119. .dropdown-menu.follow li:nth-child(2) a:before {   

120. content: “\e0a2&Prime;;   

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&Prime;;   

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&Prime;;   

192. color: #07beed;   

193. }   

194. .dropdown-menu.share li:nth-child(3) a:before {   

195. content: “\e022&Prime;;   

196. color: #2d2d2d;   

197. }   

198. @font-face {   

199. font-family: &lsquo;icomoon&rsquo;;   

200. src:url(&lsquo;fonts/icomoon.eot&rsquo;);   

201. src:url(&lsquo;fonts/icomoon.eot?#iefix&rsquo;) format(&lsquo;embedded-opentype&rsquo;),   

202. url(&lsquo;fonts/icomoon.svg#icomoon&rsquo;) format(&lsquo;svg&rsquo;),   

203. url(&lsquo;fonts/icomoon.woff&rsquo;) format(&lsquo;woff&rsquo;),   

204. url(&lsquo;fonts/icomoon.ttf&rsquo;) format(&lsquo;truetype&rsquo;);   

205. font-weight: normal;   

206. font-style: normal;   

207. }  

到此，關于“怎么用CSS3實現多功能下拉菜單”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！