平武建站

怎么用CSS3实现多功能下拉菜单

这篇文章主要介绍“怎么用CSS3实现多功能下拉菜单”，在日常操作中，相信很多人在怎么用CSS3实现多功能下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS3实现多功能下拉菜单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联建站凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势，提供专业的网站策划、成都网站建设、成都网站设计、网站优化、软件开发、网站改版等服务，在成都10年的网站建设设计经验，为成都上1000家中小型企业策划设计了网站。

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

怎么用CSS3实现多功能下拉菜单

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

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

HTML代码:

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

  1.   

  3.   

  4. CATEGORIES  

  5.   

  7. Design
    8.   

  9. Freebies
    10.   

  11. Tutorials
    12.   

  13. Coding
    14.   

  15. Inspiration
    16.   

  17. WordPress
    18.   

  19. Resources
    20.   

  20.   

    22.   

  23. SHOP
    24.   

  24.   

  25. SEARCH  

    27.   

  27.   

  28.   

    30.   

  30.   

  31.   

  33.   

  34. FOLLOW US  

  35.   

  37. RSS
    38.   

  39. Twitter
    40.   

  41. Facebook
    42.   

  43. Google+
    44.   

  45. Dribbble
    46.   

  46.   

    48.   

  49.   

  50. SHARE  

  51.   

  53. Facebook
    54.   

  55. Twitter
    56.   

  57. Google+
    58.   

  58.   

    60.   

  60.   

这个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. }  

到此，关于“怎么用CSS3实现多功能下拉菜单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


本文名称：怎么用CSS3实现多功能下拉菜单
文章来源：http://pwwzsj.com/article/psscsg.html

其他资讯