欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一款CSS3實現(xiàn)多功能下拉菜單（帶分享按）的教程

  發(fā)布時間：2014-11-05 15:20:28   作者：佚名   我要評論
這篇文章主要為大家介紹了下拉菜單，這款菜單是基于CSS3的下拉菜單，功能非常強大，下拉菜單中不僅擁有背景色漸變的菜單項，而且還帶有分享按鈕的菜單項，為了讓菜單更加美觀，每一個菜單項都帶有非常漂亮的小圖標(biāo)，而且在下拉菜單中還有鼠標(biāo)滑過縮進(jìn)的動畫特效

　　今天要分享的這款菜單是基于CSS3的下拉菜單，功能非常強大，下拉菜單中不僅擁有背景色漸變的菜單項，而且還帶有分享按鈕的菜單項，為了讓菜單更加美觀，每一個菜單項都帶有非常漂亮的小圖標(biāo)，而且在下拉菜單中還有鼠標(biāo)滑過縮進(jìn)的動畫特效。

　　接下來我們來具體解說一下實現(xiàn)這款CSS3下拉菜單原理和過程，代碼主要是HTML和CSS。

　　首先是HTML代碼，主要是兩部分，左側(cè)的下拉菜單項和右側(cè)的分享按鈕菜單，分別用了一個ul li列表：

　　HTML代碼:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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結(jié)構(gòu)支撐了下拉菜單的基本骨架，應(yīng)該還算普通。

　　接下來是CSS3代碼，是實現(xiàn)這款CSS3下拉菜單的關(guān)鍵：

　　CSS3代碼:

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

　　這個代碼比較復(fù)雜，建議下載源碼研究。謝謝閱讀，希望能幫到大家，請繼續(xù)關(guān)注腳本之家，我們會努力分享更多優(yōu)秀的文章。

相關(guān)文章

  • HTML5/CSS3自定義浮動Select 超炫下拉菜單動畫源碼

    今天我們要分享一款HTML5/CSS3懸浮的自定義Select下拉菜單，這個CSS3菜單利用CSS3特性可以浮動在網(wǎng)頁上，并帶有陰影效果，同時，展開下拉框時會以旋轉(zhuǎn)形式彈出一個二級菜單
    2014-11-08

  • 純CSS3實現(xiàn)的帶小圖標(biāo)和tooltip提示框的垂直下拉菜單效果源碼

    這是一款效果非常不錯的CSS3垂直下拉菜單，菜單左側(cè)是每一個菜單項的功能小圖標(biāo)，右側(cè)也可以定義一些數(shù)字小圖標(biāo)，并且在菜單項最右側(cè)是tooltip的樣式
    2014-11-07

  • CSS3帶有多級下拉菜單的彈性展開下拉動畫效果源碼

    今天分享的這款CSS3多級下拉菜單可以方便地配置菜單的層級數(shù)，而且每一個菜單項都有自己的小圖標(biāo)，顯得非常清新亮麗。該CSS3下拉菜單在展開子級菜單時會有彈性展開的動畫特
    2014-10-27

  • 純CSS3實現(xiàn)的支持多菜單展開手風(fēng)琴下拉菜單效果源碼

    這又是款基于CSS3的下拉菜單，這款CSS3菜單是手風(fēng)琴樣式的，關(guān)于手風(fēng)琴菜單，大家也可以回顧一下這款CSS3手風(fēng)琴菜單 可同時折疊多個菜單
    2014-10-24

  • 純CSS3實現(xiàn)的寬屏二級下拉菜單特效源碼

    這是一款基于純CSS3實現(xiàn)的寬屏二級下拉菜單特效源碼，這款菜單的子菜單在展開的時候是很寬敞的，菜單項中可以自定義格式的內(nèi)容，非常實用，也很大氣。由于是用純CSS3實現(xiàn)，
    2014-08-18

  • CSS3帶分享按鈕菜單的多功能下拉菜單源碼

    這款菜單源碼功能非常的強大，在下拉菜單中不僅擁有背景色漸變的菜單項，而且還帶有分享按鈕的菜單項，為了讓菜單更加美觀，每一個菜單項都帶有非常漂亮的小圖標(biāo)，而且在下
    2014-08-05

  • jQuery/CSS3實現(xiàn)的帶表單的下拉菜單特效源碼

    這是一款基于jQuery和CSS3實現(xiàn)的下拉菜單特效源碼，這款jQuery下拉菜單非常特別，我們直接可以在下拉菜單項中填寫聯(lián)系表單、登錄表單等信息。并且整個下拉菜單的外觀呈現(xiàn)出
    2014-07-23

  • 菜單欄 “三” 變形為“X”css3過渡動畫

    本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動畫的實現(xiàn)方法。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-28

  • CSS3實現(xiàn)銀灰色動畫效果的導(dǎo)航菜單代碼

    這篇文章主要為大家介紹了CSS3實現(xiàn)銀灰色動畫效果的導(dǎo)航菜單代碼,采用純css3技術(shù)實現(xiàn)的導(dǎo)航效果,鼠標(biāo)滑過有背景變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-01

  • CSS3模擬動畫下拉菜單效果

    使用css3制作的下拉菜單外觀非常漂亮，在各大網(wǎng)站都適用，今天小編通過本文給大家分享基于css3制作的動畫下拉菜單效果，需要的的朋友參考下吧
    2017-04-12

最新評論