ToolBar Menu纯CSS3下拉菜单

ToolBar Menu纯CSS3下拉菜单
 点击预览  点击下载

DIV代码

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

CSS代码:

  1. body { 
  2.   background-color#F6F8F8
  3. a { 
  4.   color#fff
  5. a:hover { 
  6.   color#3d61a2
  7.   text-decorationnone
  8. .demo { 
  9.   margin-top40px
  10.   min-height300px
  11. .page-menu-wrapper { 
  12.   width960px
  13.   line-height45px
  14.   margin0 auto
  15.   background-color#446cb3
  16. .page-menu-wrapper > ul > li { 
  17.   positionrelative
  18.   floatleft
  19.   border-left1px solid #3d61a2
  20.   border-right1px solid #3d61a2
  21.   margin-right-1px
  22. .menu-function { 
  23.   floatleft
  24. .menu-share { 
  25.   floatright
  26. .page-menu-wrapper > .menu-function > li:first-child { 
  27.   border-leftnone
  28. .page-menu-wrapper > .menu-share > li:last-child { 
  29.   border-rightnone
  30. .page-menu-wrapper a { 
  31.   positionrelative
  32.   displayblock
  33.   padding0 15px
  34.   transition: all .3s ease-out; 
  35. .page-menu-wrapper > ul > li:hover > a { 
  36.   color#3d61a2
  37.   background-color#fff
  38. .page-menu-wrapper > ul > li:hover .dropdown-menu { 
  39.   displayblock
  40. .dropdown-menu { 
  41.   displaynone
  42.   positionabsolute
  43.   width260px
  44.   font-size18px
  45.   font-weightbold
  46.   text-alignleft
  47.   background-color#fff
  48. .dropdown-menu.categories a { 
  49.   color#000
  50. .dropdown-menu.categories a:hover { 
  51.   color#5bc4be
  52.   margin-left10px
  53. #search:target a[href="#search"] { 
  54.   displaynone
  55. #search:target ~ #search-hidden { 
  56.   displayblock
  57. #search-hidden { 
  58.   displaynone
  59.   padding0 5px
  60.   background-color#fff
  61. #search-hidden input { 
  62.   bordernone
  63.   line-height24px
  64.   width180px
  65. #search-hidden a { 
  66.   floatright
  67.   padding0
  68.   width20px
  69.   height45px
  70. #search-hidden a:before { 
  71.   content"\7d"
  72.   left: 0
  73.   color#446cb3
  74. .menu-function > li > a,.menu-share > li > a { 
  75.   padding-left40px
  76. .page-menu-wrapper a:before { 
  77.   positionabsolute
  78.   left: 15px
  79.   font-family'icomoon'
  80.   font-stylenormal
  81.   speaknone
  82.   font-weightnormal
  83.   font-smoothing: antialiased; 
  84.   font-size18px
  85.   vertical-alignmiddle
  86. .menu-function > li:nth-child(1) > a:before { 
  87.   content"\e048"
  88. .menu-function > li:nth-child(2) > a:before { 
  89.   content"\3b"
  90. .menu-function > li:nth-child(3) > a:before { 
  91.   content"\7d"
  92. .menu-share > li:nth-child(1) > a:before { 
  93.   content"\e0a2"
  94. .menu-share > li:nth-child(2) > a:before { 
  95.   content"\e05b"
  96. /*follow*/ 
  97. .dropdown-menu.follow { 
  98.   width223px
  99. .dropdown-menu.follow a { 
  100.   padding-left35px
  101.   font-size14px
  102. .dropdown-menu.follow a:before { 
  103.   left: 10px
  104. .dropdown-menu.follow li:nth-child(1) a:before { 
  105.   content"\e0a5"
  106. .dropdown-menu.follow li:nth-child(2) a:before { 
  107.   content"\e0a2"
  108. .dropdown-menu.follow li:nth-child(3) a:before { 
  109.   content"\e04c"
  110. .dropdown-menu.follow li:nth-child(4) a:before { 
  111.   content"\e022"
  112. .dropdown-menu.follow li:nth-child(5) a:before { 
  113.   content"\e03d"
  114. .dropdown-menu.follow li:nth-child(1) a { 
  115.   color#ffaa31
  116. .dropdown-menu.follow li:nth-child(2) a { 
  117.   color#07beed
  118. .dropdown-menu.follow li:nth-child(3) a { 
  119.   color#314d91
  120. .dropdown-menu.follow li:nth-child(4) a { 
  121.   color#2d2d2d
  122. .dropdown-menu.follow li:nth-child(5) a { 
  123.   color#e84788
  124. .dropdown-menu.follow li:nth-child(1):hover { 
  125.   background-color#ffaa31
  126. }  
  127. .dropdown-menu.follow li:nth-child(2):hover { 
  128.   background-color#07beed
  129. }  
  130. .dropdown-menu.follow li:nth-child(3):hover { 
  131.   background-color#314d91
  132. }  
  133. .dropdown-menu.follow li:nth-child(4):hover { 
  134.   background-color#2d2d2d
  135. }  
  136. .dropdown-menu.follow li:nth-child(5):hover { 
  137.   background-color#e84788
  138. }  
  139. .dropdown-menu.follow li:hover a { 
  140.   color#fff
  141.   margin-left10px
  142. }  
  143. .dropdown-menu.share { 
  144.   width120px;   
  145.   right:0
  146. .dropdown-menu.share a { 
  147.   margin10px
  148.   line-height26px
  149.   font-size12px
  150.   padding-left20px
  151.   border1px solid #cbcbcb
  152.   border-radius: 2px
  153.   color#4c4c4c
  154.   background-color#efefef
  155. .dropdown-menu.share a:hover { 
  156.   background-color#fff
  157. .dropdown-menu.share li a:before { 
  158.   font-size12px
  159.   left: 5px
  160. .dropdown-menu.share li:nth-child(1) a:before { 
  161.   content"\e04c"
  162.   color#314d91
  163. .dropdown-menu.share li:nth-child(2) a:before { 
  164.   content"\e0a2"
  165.   color#07beed
  166. .dropdown-menu.share li:nth-child(3) a:before { 
  167.   content"\e022"
  168.   color#2d2d2d
  169. @font-face { 
  170.   font-family'icomoon'
  171.   src:url('fonts/icomoon.eot'); 
  172.   src:url('fonts/icomoon.eot?#iefix'format('embedded-opentype'), 
  173.     url('fonts/icomoon.svg#icomoon'format('svg'), 
  174.     url('fonts/icomoon.woff'format('woff'), 
  175.     url('fonts/icomoon.ttf'format('truetype'); 
  176.   font-weightnormal
  177.   font-stylenormal

转载请注明:代码家园 » ToolBar Menu纯CSS3下拉菜单

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)