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

网络
山水山水，有山有水才是好风光。夜色越来越浓了，村落啦，树林子啦，坑洼啦，沟渠啦，好象一下子全都掉进了神秘的沉寂里。

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

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

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

　　HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <ulclass=”menu-function”>
  2. <li>
  3. <arel="nofollow noopener noreferrer" href=”"title=”">CATEGORIES</a>
  4. <ulclass=”dropdown-menucategories”>
  5. <li><arel="nofollow noopener noreferrer" href=”"title=”">Design</a></li>
  6. <li><arel="nofollow noopener noreferrer" href=”"title=”">Freebies</a></li>
  7. <li><arel="nofollow noopener noreferrer" href=”"title=”">Tutorials</a></li>
  8. <li><arel="nofollow noopener noreferrer" href=”"title=”">Coding</a></li>
  9. <li><arel="nofollow noopener noreferrer" href=”"title=”">Inspiration</a></li>
  10. <li><arel="nofollow noopener noreferrer" href=”"title=”">WordPress</a></li>
  11. <li><arel="nofollow noopener noreferrer" href=”"title=”">Resources</a></li>
  12. </ul>
  13. </li>
  14. <li><arel="nofollow noopener noreferrer" href=”"title=”">SHOP</a></li>
  15. <liid=”search”>
  16. <arel="nofollow noopener noreferrer" href=”#search”title=”">SEARCH</a>
  17. </li>
  18. <liid=”search-hidden”>
  19. <inputtype=”text”name=”"id=”"><arel="nofollow noopener noreferrer" href=”#search-hidden”title=”"></a>
  20. </li>
  21. </ul>
  22. <ulclass=”menu-share”>
  23. <li>
  24. <arel="nofollow noopener noreferrer" href=”"title=”">FOLLOWUS</a>
  25. <ulclass=”dropdown-menufollow”>
  26. <li><arel="nofollow noopener noreferrer" href=”"title=”">RSS</a></li>
  27. <li><arel="nofollow noopener noreferrer" href=”"title=”">Twitter</a></li>
  28. <li><arel="nofollow noopener noreferrer" href=”"title=”">Facebook</a></li>
  29. <li><arel="nofollow noopener noreferrer" href=”"title=”">Google+</a></li>
  30. <li><arel="nofollow noopener noreferrer" href=”"title=”">Dribbble</a></li>
  31. </ul>
  32. </li>
  33. <li>
  34. <arel="nofollow noopener noreferrer" href=”"title=”">SHARE</a>
  35. <ulclass=”dropdown-menushare”>
  36. <li><arel="nofollow noopener noreferrer" href=”"title=”">Facebook</a></li>
  37. <li><arel="nofollow noopener noreferrer" href=”"title=”">Twitter</a></li>
  38. <li><arel="nofollow noopener noreferrer" 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:1pxsolid#3d61a2;
  5. border-right:1pxsolid#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-wrappera{
  21. position:relative;
  22. display:block;
  23. padding:015px;
  24. transition:all.3sease-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.categoriesa{
  43. color:#000;
  44. }
  45. .dropdown-menu.categoriesa:hover{
  46. color:#5bc4be;
  47. margin-left:10px;
  48. }
  49. #search:targeta[rel="nofollow noopener noreferrer" href="#search"]{
  50. display:none;
  51. }
  52. #search:target~#search-hidden{
  53. display:block;
  54. }
  55. #search-hidden{
  56. display:none;
  57. padding:05px;
  58. background-color:#fff;
  59. }
  60. #search-hiddeninput{
  61. border:none;
  62. line-height:24px;
  63. width:180px;
  64. }
  65. #search-hiddena{
  66. float:rightright;
  67. padding:0;
  68. width:20px;
  69. height:45px;
  70. }
  71. #search-hiddena: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-wrappera: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.followa{
  110. padding-left:35px;
  111. font-size:14px;
  112. }
  113. .dropdown-menu.followa:before{
  114. left:10px;
  115. }
  116. .dropdown-menu.followli:nth-child(1)a:before{
  117. content:“\e0a5″;
  118. }
  119. .dropdown-menu.followli:nth-child(2)a:before{
  120. content:“\e0a2″;
  121. }
  122. .dropdown-menu.followli:nth-child(3)a:before{
  123. content:“\e04c”;
  124. }
  125. .dropdown-menu.followli:nth-child(4)a:before{
  126. content:“\e022″;
  127. }
  128. .dropdown-menu.followli:nth-child(5)a:before{
  129. content:“\e03d”;
  130. }
  131. .dropdown-menu.followli:nth-child(1)a{
  132. color:#ffaa31;
  133. }
  134. .dropdown-menu.followli:nth-child(2)a{
  135. color:#07beed;
  136. }
  137. .dropdown-menu.followli:nth-child(3)a{
  138. color:#314d91;
  139. }
  140. .dropdown-menu.followli:nth-child(4)a{
  141. color:#2d2d2d;
  142. }
  143. .dropdown-menu.followli:nth-child(5)a{
  144. color:#e84788;
  145. }
  146. .dropdown-menu.followli:nth-child(1):hover{
  147. background-color:#ffaa31;
  148. }
  149. .dropdown-menu.followli:nth-child(2):hover{
  150. background-color:#07beed;
  151. }
  152. .dropdown-menu.followli:nth-child(3):hover{
  153. background-color:#314d91;
  154. }
  155. .dropdown-menu.followli:nth-child(4):hover{
  156. background-color:#2d2d2d;
  157. }
  158. .dropdown-menu.followli:nth-child(5):hover{
  159. background-color:#e84788;
  160. }
  161. .dropdown-menu.followli:hovera{
  162. color:#fff;
  163. margin-left:10px;
  164. }
  165. .dropdown-menu.share{
  166. width:120px;
  167. rightright:0;
  168. }
  169. .dropdown-menu.sharea{
  170. margin:10px;
  171. line-height:26px;
  172. font-size:12px;
  173. padding-left:20px;
  174. border:1pxsolid#cbcbcb;
  175. border-radius:2px;
  176. color:#4c4c4c;
  177. background-color:#efefef;
  178. }
  179. .dropdown-menu.sharea:hover{
  180. background-color:#fff;
  181. }
  182. .dropdown-menu.sharelia:before{
  183. font-size:12px;
  184. left:5px;
  185. }
  186. .dropdown-menu.shareli:nth-child(1)a:before{
  187. content:“\e04c”;
  188. color:#314d91;
  189. }
  190. .dropdown-menu.shareli:nth-child(2)a:before{
  191. content:“\e0a2″;
  192. color:#07beed;
  193. }
  194. .dropdown-menu.shareli: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如何实现多功能下拉菜单（带分享按）的好代码教程到此结束。世界上最遥远的距离不是生和死的距离，而是我刚联机的那一秒，你却脱机了。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例