Skip to content

Instantly share code, notes, and snippets.

@XeroXP

XeroXP/Menu "Hamburger" Icon Animations.markdown

Forked from dallrigo/Menu "Hamburger" Icon Animations.markdown
Created February 12, 2019 11:23
Show Gist options
  • Save XeroXP/5e6f950900a6a0283622e5e572b56706 to your computer and use it in GitHub Desktop.
Save XeroXP/5e6f950900a6a0283622e5e572b56706 to your computer and use it in GitHub Desktop.
Download ZIP
Menu "Hamburger" Icon Animations
Raw
index.html
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
Raw
Menu "Hamburger" Icon Animations.markdown

Menu "Hamburger" Icon Animations

Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least. These animations add a little more transparency to what it means from a UI perspective by transforming it into another recognizable icon - the closing "x". Full walkthrough here: http://designcouch.com/home/why/2014/06/23/playing-with-hamburger-icon-animations/

Forked from Jesse Couch's Pen Menu "Hamburger" Icon Animations.

A Pen by Rodrigo on CodePen.

License.

Raw
script.js
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 2 */
#nav-icon2 {
}
#nav-icon2 span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #d3531a;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 18px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 36px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment