More fun with hamburger icon transitions. I seem to keep coming back to these lately!
A Pen by Jesse Couch on CodePen.
Created
February 6, 2022 13:45
-
-
Save exidmen/09e27c2d534905d717bf5671f05ee685 to your computer and use it in GitHub Desktop.
Drawn Hamburger Transition
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="menu-toggle"> | |
| <div id="hamburger"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div id="cross"> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#menu-toggle').click(function(){ | |
| $(this).toggleClass('open'); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| transition:.25s ease-in-out; | |
| box-sizing:border-box; | |
| } | |
| body { | |
| background:#d9e4ea; | |
| } | |
| span { | |
| display:block; | |
| background:#566973; | |
| border-radius:2px; | |
| } | |
| #menu-toggle { | |
| width:100px; | |
| height:100px; | |
| margin:50px auto; | |
| position:relative; | |
| position:relative; | |
| cursor:pointer; | |
| background:rgba(255,255,255,.4); | |
| border-radius:5px; | |
| &:hover { | |
| background:rgba(255,255,255,.8); | |
| } | |
| #hamburger { | |
| position:absolute; | |
| height:100%; | |
| width:100%; | |
| span { | |
| width:60px; | |
| height:4px; | |
| position:relative; | |
| top:24px; | |
| left:20px; | |
| margin:10px 0; | |
| &:nth-child(1){ | |
| transition-delay:.5s; | |
| } | |
| &:nth-child(2){ | |
| transition-delay:.625s; | |
| } | |
| &:nth-child(3){ | |
| transition-delay:.75s; | |
| } | |
| } | |
| } | |
| #cross { | |
| position:absolute; | |
| height:100%; | |
| width:100%; | |
| transform:rotate(45deg); | |
| span{ | |
| &:nth-child(1){ | |
| height:0%; | |
| width:4px; | |
| position:absolute; | |
| top:10%; | |
| left:48px; | |
| transition-delay:0s; | |
| } | |
| &:nth-child(2){ | |
| width:0%; | |
| height:4px; | |
| position:absolute; | |
| left:10%; | |
| top:48px; | |
| transition-delay:.25s; | |
| } | |
| } | |
| } | |
| } | |
| #menu-toggle.open { | |
| #hamburger { | |
| span { | |
| width:0%; | |
| &:nth-child(1){ | |
| transition-delay:0s; | |
| } | |
| &:nth-child(2){ | |
| transition-delay:.125s; | |
| } | |
| &:nth-child(3){ | |
| transition-delay:.25s; | |
| } | |
| } | |
| } | |
| #cross { | |
| span { | |
| &:nth-child(1){ | |
| height:80%; | |
| transition-delay:.625s; | |
| } | |
| } | |
| span { | |
| &:nth-child(2){ | |
| width:80%; | |
| transition-delay:.375s; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment