>

HTML
  1. /***************************
  2. *Variables
  3. **************************/
  4. /***************************
  5. *Project Main Styles
  6. **************************/
  7. *,
  8. *:before,
  9. *:after {
  10. box-sizing: border-box;
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15. .menu__body {
  16. position: absolute;
  17. width: 7em;
  18. height: 7em;
  19. margin: 0;
  20. padding: 0;
  21. background-color: #fcfcfc;
  22. border-bottom-right-radius: 100%;
  23. box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  24. z-index: 10;
  25. -webkit-animation: checkboxUncheckedAnimation 0.35s both;
  26. animation: checkboxUncheckedAnimation 0.35s both;
  27. }
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34. body {
  35. font-family: "Open Sans", sans-serif;
  36. font-size: 1em;
  37. background-color: #e2e2e2;
  38. }
  39.  
  40. /***************************
  41. *Application Main Styles
  42. **************************/
  43. #menu--toggle[type="checkbox"]:not(:checked),
  44. #menu--toggle[type="checkbox"]:checked {
  45. display: none;
  46. }
  47.  
  48. .menu--toggle__trigger,
  49. .menu--toggle__burger,
  50. .menu--toggle__burger:before,
  51. .menu--toggle__burger:after {
  52. position: absolute;
  53. top: 1.6em;
  54. left: 1.6em;
  55. width: 2em;
  56. height: 5px;
  57. background-color: #282828;
  58. border-radius: 2px;
  59. cursor: pointer;
  60. z-index: 100;
  61. -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  62. transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  63. }
  64.  
  65. .menu--toggle__trigger {
  66. height: 2em;
  67. background: none;
  68. }
  69.  
  70. .menu--toggle__burger:before {
  71. content: "";
  72. top: 10px;
  73. left: 0;
  74. }
  75. .menu--toggle__burger:after {
  76. content: "";
  77. top: 20px;
  78. left: 0;
  79. }
  80.  
  81. .menu__body {
  82. position: absolute;
  83. width: auto em;
  84. height: auto em;
  85. margin: 0;
  86. padding: 0;
  87. background-color: #fcfcfc;
  88. border-bottom-right-radius: 100%;
  89. box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  90. z-index: 10;
  91. -webkit-animation: checkboxUncheckedAnimation 0.35s both;
  92. animation: checkboxUncheckedAnimation 0.35s both;
  93. }
  94.  
  95. .menu__body-element,
  96. .menu__body-link {
  97. display: none;
  98. margin: 4.4em 0 -3.3em -.1em;
  99. font-weight: normal;
  100. color: #282828;
  101. text-decoration: none;
  102. text-transform: none;
  103. list-style: none;
  104. outline: 0;
  105. }
  106.  
  107. .menu__body-element {
  108. text-indent: 2em;
  109. }
  110.  
  111. .menu__body-link:hover {
  112. display: block;
  113. width: 0;
  114. color: #282828;
  115. background-color: #e2e2e2;
  116. -webkit-animation: changeWidthOfElementAnimation 0.35s both;
  117. animation: changeWidthOfElementAnimation 0.35s both;
  118. }
  119.  
  120. #menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger {
  121. top: 35px;
  122. -webkit-transform: rotate(405deg);
  123. transform: rotate(405deg);
  124. -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  125. transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  126. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  127. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  128. }
  129. #menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:before {
  130. top: 0;
  131. -webkit-transform: rotate(-90deg);
  132. transform: rotate(-90deg);
  133. -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  134. transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  135. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  136. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  137. }
  138. #menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:after {
  139. top: 0;
  140. -webkit-transform: rotate(90deg);
  141. transform: rotate(90deg);
  142. -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  143. transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  144. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  145. transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  146. }
  147. #menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger + .menu__body {
  148. -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  149. animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  150. }
  151. #menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-element, #menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-link {
  152. display: block;
  153. }
  154.  
  155.  
  156.  
  157. /**
  158. *Animations
  159. */
  160. @-webkit-keyframes checkboxCheckedAnimation {
  161. 50%, 100% {
  162. width: 50vw;
  163. height: 50vh;
  164. }
  165. 100% {
  166. border-radius: 0;
  167. }
  168. }
  169. @keyframes checkboxCheckedAnimation {
  170. 50%, 100% {
  171. width: 50vw;
  172. height: 50vh;
  173. }
  174. 100% {
  175. border-radius: 0;
  176. }
  177. }
  178. @-webkit-keyframes checkboxUncheckedAnimation {
  179. 0% {
  180. width: 50vw;
  181. height: 50vh;
  182. }
  183. }
  184. @keyframes checkboxUncheckedAnimation {
  185. 0% {
  186. width: 50vw;
  187. height: 50vh;
  188. }
  189. }
  190. @-webkit-keyframes changeWidthOfElementAnimation {
  191. 50% {
  192. width: 0;
  193. }
  194. 100% {
  195. width: auto;
  196. }
  197. }
  198. @keyframes changeWidthOfElementAnimation {
  199. 50% {
  200. width: 0;
  201. }
  202. 100% {
  203. width: auto;
  204. }
  205. }
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216. <div class="menu">
  217. <ul class="menu__body">
  218. <input id="menu--toggle"
  219. type="checkbox" />
  220.  
  221. <!-- /#menu--toggle -->
  222. <label class="menu--toggle__trigger"
  223. for="menu--toggle"></label>
  224.  
  225.  
  226.  
  227. <!-- /.menu--toggle__trigger -->
  228. <label class="menu--toggle__burger"
  229. for="menu--toggle"></label>
  230. <!-- /.menu--toggle__burger -->
  231.  
  232.  
  233. <ul class="menu__body">
  234.  
  235.  
  236. <li class="menu__body-element">
  237. <a class=""
  238. href="#"
  239. target="_blank">
  240. menu
  241.  
  242. <!-- /.menu__body-link -->
  243. </li>
  244. <!-- /.menu__body-element -->
  245.  
  246. <li class="menu__body-element">
  247. <a class=""
  248. href="#"
  249. target="_blank">
  250. menu
  251. </a>
  252. <!-- /.menu__body-link -->
  253. </li>
  254. <!-- /.menu__body-element -->
  255.  
  256. <li class="menu__body-element">
  257. <a class=""
  258. href="#">
  259. menu
  260. </a>
  261. <!-- /.menu__body-link -->
  262. </li>
  263. <!-- /.menu__body-element -->
  264. </ul>
  265. <!-- /.menu__body -->
  266. </div>
  267.  
  268.  
  269.  
  270. <div class="promotion">
  271. </div>
  272. <!-- /.promotion -->

Demo:

[IMAGE]

DMCA.com Protection Status
Cùng Chuyên Mục
Xem thêm
Comment
Tên bạn
Nội dung


user Nizarzduent (ngày 12/09/17 lúc 08:53) : payday loans houston payday loans direct lenders only <a href="http://paydayloans2017.com"> payday loans online no credit check</a> guaranteed payday loans payday loan no credit check
ảnh cm Contact Facebook
ảnh cm Contact Google+
ảnh cm Blog Trương Minh Đức
Facebook Google+ YouTube
Được tài trợ bởi