Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="menuToggle">
- <input type="checkbox" />
- <span id="span1"></span>
- <span id="span2"></span>
- <span id="span3"></span>
- </div>
- #menuToggle {
- overflow: hidden;
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- #menuToggle input {
- display: flex;
- width: 60px;
- height: 60px;
- position: absolute;
- cursor: pointer;
- opacity: 0; /* hide input */
- z-index: 1; /* top of the menu */
- }
- #menuToggle span{
- width: 55px;
- height: 8px;
- margin-bottom: 10px;
- background: #7f8fa6;
- border-radius: 4px;
- -webkit-transition: all .5s cubic-bezier(.08,.81,.87,.71);
- -moz-transition: all .5s cubic-bezier(.08,.81,.87,.71);
- -ms-transition: all .5s cubic-bezier(.08,.81,.87,.71);
- -o-transition: all .5s cubic-bezier(.08,.81,.87,.71);
- transition: all .5s cubic-bezier(.08,.81,.87,.71);
- }
- #span1 {
- transform-origin: 4px 0px;
- }
- #span3 {
- transform-origin: bottom right;
- }
- #menuToggle input:checked ~ #span1 {
- background-color: #0c2461;
- transform: rotate(45deg) translate(8px);
- }
- #menuToggle input:checked ~ #span2 {
- background-color: #0c2461;
- transform: rotate(495deg) translate(4px);
- }
- #menuToggle input:checked ~ #span3 {
- background-color: #0c2461;
- transform: rotate(45deg);
- opacity: 0;
- }
Add Comment
Please, Sign In to add comment