Guest User

Untitled

a guest
Nov 18th, 2017
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.26 KB | None | 0 0
  1. //////////// sass
  2. /* the tasty burger */
  3. body
  4. -webkit-font-smoothing: antialiased
  5. .burger-menu
  6. position: relative;
  7. width: 50px;
  8. height: 50px;
  9. cursor: pointer;
  10.  
  11. .burger
  12. position: absolute;
  13. background: rgba(111,111,111,1);
  14. width: 100%;
  15. height: 10px;
  16. top: 50%;
  17. right: 0px;
  18. margin-top: -5px;
  19. opacity: 1;
  20.  
  21. .burger::before
  22. position: absolute;
  23. background: rgba(111,111,111,1);
  24. width: 50px;
  25. height: 10px;
  26. top: 20px;
  27. content: "";
  28. display: block;
  29.  
  30. .burger::after
  31. position: absolute;
  32. background: rgba(111,111,111,1);
  33. width: 50px;
  34. height: 10px;
  35. bottom: 20px;
  36. content: "";
  37. display: block;
  38.  
  39. .burger::after, .burger::before, .burger
  40. transition: all .3s ease-in-out;
  41.  
  42. .burger-menu.menu-on .burger::after
  43. transform: rotate(-45deg);
  44. bottom: 0px;
  45. .burger-menu.menu-on .burger::before
  46. transform: rotate(45deg);
  47. top: 0px;
  48.  
  49. .burger-menu.menu-on .burger
  50. background: rgba(111,111,111,.0);
  51.  
  52.  
  53. ////////// html
  54. <div class="burger-menu" id="burger">
  55. <div class="burger"></div>
  56. </div>
  57.  
  58. /////////////// js
  59. function toggle() {
  60. if(burger.className != "burger-menu"){
  61. burger.classList.remove("menu-on");
  62. }else{
  63. burger.classList.add("menu-on");
  64. }
  65. }
  66.  
  67. function ready() {
  68. burger.addEventListener("click", toggle);
  69. }
  70.  
  71. document.addEventListener("DOMContentLoaded", ready);
Add Comment
Please, Sign In to add comment