Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- .container {
- display: inline-block;
- cursor: pointer;
- }
- .bar1, .bar2, .bar3 {
- width: 35px;
- height: 5px;
- background-color: #333;
- margin: 6px 0;
- transition: 0.4s;
- }
- .change .bar1 {
- transform: rotate(-45deg) translate(-8px, 7px);
- }
- .change .bar2 {opacity: 0;}
- .change .bar3 {
- transform: rotate(45deg) translate(-8px, -8px);
- }
- </style>
- </head>
- <body>
- <p>Click on the Menu Icon to transform it to "X":</p>
- <div class="container" onclick="myFunction(this)">
- <div class="bar1"></div>
- <div class="bar2"></div>
- <div class="bar3"></div>
- </div>
- <script>
- function myFunction(x) {
- x.classList.toggle("change");
- }
- </script>
Add Comment
Please, Sign In to add comment