Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //////////// sass
- /* the tasty burger */
- body
- -webkit-font-smoothing: antialiased
- .burger-menu
- position: relative;
- width: 50px;
- height: 50px;
- cursor: pointer;
- .burger
- position: absolute;
- background: rgba(111,111,111,1);
- width: 100%;
- height: 10px;
- top: 50%;
- right: 0px;
- margin-top: -5px;
- opacity: 1;
- .burger::before
- position: absolute;
- background: rgba(111,111,111,1);
- width: 50px;
- height: 10px;
- top: 20px;
- content: "";
- display: block;
- .burger::after
- position: absolute;
- background: rgba(111,111,111,1);
- width: 50px;
- height: 10px;
- bottom: 20px;
- content: "";
- display: block;
- .burger::after, .burger::before, .burger
- transition: all .3s ease-in-out;
- .burger-menu.menu-on .burger::after
- transform: rotate(-45deg);
- bottom: 0px;
- .burger-menu.menu-on .burger::before
- transform: rotate(45deg);
- top: 0px;
- .burger-menu.menu-on .burger
- background: rgba(111,111,111,.0);
- ////////// html
- <div class="burger-menu" id="burger">
- <div class="burger"></div>
- </div>
- /////////////// js
- function toggle() {
- if(burger.className != "burger-menu"){
- burger.classList.remove("menu-on");
- }else{
- burger.classList.add("menu-on");
- }
- }
- function ready() {
- burger.addEventListener("click", toggle);
- }
- document.addEventListener("DOMContentLoaded", ready);
Add Comment
Please, Sign In to add comment