API tools faq
paste
silbrigthemes

Gooey Menu (fixed code)

silbrigthemes
Feb 12th, 2018
401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- Necessary for the icon font to work. -->
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. /** GLOBAL **/
  10. body {
  11. background: #8bc34a; /* green background color of the page*/
  12. color: white; /* text color of the page */
  13. text-align: center;
  14. /* could also be set to left, right, or justify */
  15. }
  16.  
  17. /** LINKS **/
  18. a {
  19. color: inherit;
  20. /* links will have the same color as the global text; in this case , white */
  21. }
  22.  
  23. /** HEADINGS **/
  24. h1, h2, h3, h4 {
  25. margin: 0;
  26. margin-bottom: 10px; /* margin to elements above */
  27. margin-top: 10px; /* margin to elements below */
  28. }
  29.  
  30. /** FIRST HEADING **/
  31. h1 {
  32. font-size: 3em; /* 1em = 16px ; 3em = 48px */
  33. }
  34.  
  35. /* I have played with this by commenting out the .menu{}, and apparently it does not affect the styling on the customization page. */
  36. .menu {
  37. filter: url("#goo");
  38. }
  39.  
  40. /* These lines are very important as they are responsible for styling the whole menu. Without them, the icons just appear in one row. */
  41. .menu-item, .menu-open-button {
  42. background: #e91e63; /* pink background of the menu*/
  43. border-radius: 100%; /* minimum is 50% for a perfect circle */
  44. width: 80px; /* circle width */
  45. height: 80px; /* circle height */
  46. margin-left: -40px; /* offset from the left */
  47. position: absolute;
  48. top: 20px; /* offset from the top */
  49. color: white; /* color of the icons */
  50. text-align: center; /* horizontal centering of icons */
  51. line-height: 80px; /* vertical centering of icons */
  52. transform: translate3d(0, 0, 0);
  53. transition: transform ease-out 200ms;
  54. /* transformation and duration of the transformation */
  55. }
  56.  
  57. /* These lines seemingly only affect the margin to the left. */
  58. .menu-open {
  59. display: none;
  60. }
  61.  
  62. /* Hamburger menu (≡) within the pink circle. */
  63. .hamburger {
  64. width: 25px; /* line width */
  65. height: 3px; /* line height */
  66. background: white; /* color of the lines (≡) */
  67. display: block;
  68. position: absolute;
  69. top: 50%; /* offset from top */
  70. left: 50%; /* offset from left */
  71. /* since the lines are 25px long and 3px high, the following lines are necessary to center-align the menu properly */
  72. margin-left: -12.5px;
  73. margin-top: -1.5px;
  74. /* transformation duration */
  75. transition: transform 200ms;
  76.  
  77. }
  78.  
  79. .hamburger-1 {
  80. transform: translate3d(0, -8px, 0);
  81. /* (-8px) is the offset to the second line*/
  82. }
  83.  
  84. .hamburger-2 {
  85. transform: translate3d(0, 0, 0);
  86. }
  87.  
  88. .hamburger-3 {
  89. transform: translate3d(0, 8px, 0);
  90. /* (8px) is the offset to the second line*/
  91. }
  92.  
  93. /* Upon clicking on the menu, the lines of the hamburger menu rotate and realign. The middle line is scaled down to 0, so that it disappeares. The top and bottom lines will be rotated so that they form an (x). */
  94. .menu-open:checked + .menu-open-button .hamburger-1 {
  95. transform: translate3d(0, 0, 0) rotate(45deg);
  96. }
  97. .menu-open:checked + .menu-open-button .hamburger-2 {
  98. transform: translate3d(0, 0, 0) scale(0, 1);
  99. }
  100. .menu-open:checked + .menu-open-button .hamburger-3 {
  101. transform: translate3d(0, 0, 0) rotate(-45deg);
  102. }
  103.  
  104. .menu {
  105. position: absolute;
  106. left: 50%;
  107. margin-left: -190px;
  108. padding-top: 20px;
  109. padding-left: 190px;
  110. width: 380px;
  111. height: 250px;
  112. box-sizing: border-box;
  113. font-size: 20px;
  114. text-align: left;
  115. }
  116.  
  117. .menu-item:hover {
  118. background: white;
  119. color: #e91e63;
  120. }
  121.  
  122. /*
  123. duration for the items to be displayed
  124. the items are displayed after one another
  125. */
  126. .menu-item:nth-child(3) {
  127. transition-duration: 180ms;
  128. }
  129. .menu-item:nth-child(4) {
  130. transition-duration: 180ms;
  131. }
  132. .menu-item:nth-child(5) {
  133. transition-duration: 180ms;
  134. }
  135. .menu-item:nth-child(6) {
  136. transition-duration: 180ms;
  137. }
  138. .menu-item:nth-child(7) {
  139. transition-duration: 180ms;
  140. }
  141. .menu-item:nth-child(8) {
  142. transition-duration: 180ms;
  143. }
  144. .menu-item:nth-child(9) {
  145. transition-duration: 180ms;
  146. }
  147.  
  148. .menu-open-button {
  149. z-index: 2;
  150. transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  151. transition-duration: 400ms;
  152. transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  153. cursor: pointer;
  154. }
  155.  
  156. .menu-open-button:hover {
  157. transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  158. }
  159.  
  160. .menu-open:checked + .menu-open-button {
  161. transition-timing-function: linear;
  162. transition-duration: 200ms;
  163. transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  164. }
  165.  
  166. .menu-open:checked ~ .menu-item {
  167. transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  168. }
  169. .menu-open:checked ~ .menu-item:nth-child(3) {
  170. transition-duration: 180ms;
  171. transform: translate3d(0.08361px, -104.99997px, 0);
  172. }
  173. .menu-open:checked ~ .menu-item:nth-child(4) {
  174. transition-duration: 280ms;
  175. transform: translate3d(90.9466px, -52.47586px, 0);
  176. }
  177. .menu-open:checked ~ .menu-item:nth-child(5) {
  178. transition-duration: 380ms;
  179. transform: translate3d(90.9466px, 52.47586px, 0);
  180. }
  181. .menu-open:checked ~ .menu-item:nth-child(6) {
  182. transition-duration: 480ms;
  183. transform: translate3d(0.08361px, 104.99997px, 0);
  184. }
  185. .menu-open:checked ~ .menu-item:nth-child(7) {
  186. transition-duration: 580ms;
  187. transform: translate3d(-90.86291px, 52.62064px, 0);
  188. }
  189. .menu-open:checked ~ .menu-item:nth-child(8) {
  190. transition-duration: 680ms;
  191. transform: translate3d(-91.03006px, -52.33095px, 0);
  192. }
  193. .menu-open:checked ~ .menu-item:nth-child(9) {
  194. transition-duration: 780ms;
  195. transform: translate3d(-0.25084px, -104.9997px, 0);
  196. }
  197.  
  198. </style>
  199. </head>
  200. <!-- Everything after this cut is what actually can be seen on the page (the elements of the page), everything above is just for styling. -->
  201. <body>
  202. <!-- First Heading -->
  203. <h1>Gooey Menu</h1>
  204. <!-- Second Heading -->
  205. <h2>Using CSS and SVG Filters</h2>
  206. <!-- Third Heading -->
  207. <h3>
  208. By <a href="https://codepen.io/lbebber">Lucas Bebber</a>
  209. </h3>
  210. <!-- Fourth Heading -->
  211. <h4>
  212. <a href="https://codepen.io/lbebber/pen/LELBEo" target="_blank">
  213. Version 1
  214. </a>
  215. - Version 2 -
  216. <a href="https://codepen.io/lbebber/pen/pvwZJp" target="_blank">
  217. Version 3
  218. </a> -
  219. <a href="https://codepen.io/lbebber/pen/rawQKR" target="_blank">
  220. Version 4
  221. </a>
  222. </h4>
  223.  
  224. <!-- Hamburger menu within the pink circle. -->
  225. <nav class="menu">
  226. <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  227. <label class="menu-open-button" for="menu-open">
  228. <span class="hamburger hamburger-1"></span>
  229. <span class="hamburger hamburger-2"></span>
  230. <span class="hamburger hamburger-3"></span>
  231. </label>
  232.  
  233. <!-- This is where the menu links start. -->
  234. <!-- Replace the '#' with the link of your choice. -->
  235. <!-- i.e.: <a href="#"></a> ==> <a href="/ask"></a> -->
  236. <!-- If you want to change the displayed icons, just change i.e.
  237. 'fa fa-heart' to 'fa fa-adjust' or any icon of your choice.
  238. -->
  239. <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
  240. <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
  241. <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
  242. <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  243. <a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
  244. <a href="#" class="menu-item"> <i class="fa fa-ellipsis-h"></i> </a>
  245.  
  246. </nav>
  247.  
  248.  
  249. <!-- Filters -->
  250. <!-- Keep those lines.-->
  251. <!-- Only delete / change them if you know what you are doing. -->
  252. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  253. <defs>
  254. <filter id="shadowed-goo">
  255.  
  256. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  257. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  258. <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
  259. <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
  260. <feOffset in="shadow" dx="1" dy="1" result="shadow" />
  261. <feComposite in2="shadow" in="goo" result="goo" />
  262. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  263. </filter>
  264. <filter id="goo">
  265. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  266. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  267. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  268. </filter>
  269. </defs>
  270. </svg>
  271. </body>
  272. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!