/ Menu

Hamburger Icon Animation to Cross underline with CSS

Hamburger Icon Animation to Cross underline with CSS

Hamburger Icon Animations

We animate the hamburger icon, which gives access to the responsive menu using transformations and CSS pseudo elements along with HTML, and turning the element into a new menu close icon that improves the UX in case the user wants to return to the previous view.

Made with

Html
Css
Javascript

Html

<h1>Hamburger Icon Animations</h1>
 <div class="menu-toggle first">
  <i></i>
</div>
<div class="menu-toggle second">
  <i></i>
  <i></i>
</div>
<div class="link-container">
  <a target="_blank" href="https://www.silocreativo.com/en/css-animations-hamburger-icon-responsive-menu/" class="more-link">Visit the original article</a>
</div>
                             

Css

* {
  margin: 0;
  padding: 0; 
}


.menu-toggle {
	height: 32px;
	position: relative;
	-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;
  margin: 90px auto;
	width: 40px;
}
.menu-toggle:hover {
	color: #999;
}
.menu-toggle i,
.menu-toggle i:after,
.menu-toggle i:before {
	display: block;
	position: absolute;
	height: 3px;
	width: 40px;
	right: 0;
	background: #999;
	border-radius: 2px;
	-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;
}
.menu-toggle i:after,
.menu-toggle i:before {
	content: '';
}
.menu-toggle i:after {
	top: -32px;
}
.menu-toggle i:before {
	top: -16px;
}
.menu-toggle i {
	top: 32px;
}
.menu-toggle.open i:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -22px;
}
.menu-toggle.open i:before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: -22px;
}


.menu-toggle.second i,
.menu-toggle.second i:after,
.menu-toggle.second i:before {
  width: 40px;
  border-radius: 0px;
}
.menu-toggle.second i:nth-child(1):after {
	top: 14px;
}
.menu-toggle.second i:nth-child(1):before {
	top: -14px;
}
.menu-toggle.second i:nth-child(1) {
	top: 14px;
  right: 0;
}
.menu-toggle.second i:nth-child(2):after {
	top: 14px;
}
.menu-toggle.second i:nth-child(2):before {
	top: 14px;
}
.menu-toggle.second i:nth-child(2) {
	top: 14px;
}
.menu-toggle.second.open i:nth-child(1) {
	right: 25px;
}
.menu-toggle.second.open i:nth-child(2) {
	right: -25px;
}
.menu-toggle.second.open i:before {
	top:0px
}
.menu-toggle.second.open i:after {
	top:0px
}
.menu-toggle.second.open i:nth-child(1):before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
  right: -25px;
}
.menu-toggle.second.open i:nth-child(1):after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
  right: -25px;
}
.menu-toggle.second.open i:nth-child(2):after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
  right: 25px;
}
.menu-toggle.second.open i:nth-child(2):before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
  right: 25px;
}

/* demo stuff */
body {
  background-color: #f7f5ef;
}
html, button, input, select, textarea {
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    color: #e8b935;
}
h1 {
  text-align: center;
  margin: 30px 15px;
}
.link-container {
  text-align: center;
}
a.more-link {
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    background-color: #e8b935;
    padding: 2px 10px;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    text-decoration: none;
}

Javascript

$(document).ready(function(){
	$('.menu-toggle').click(function(){
		$(this).toggleClass('open');
	});
});

Author

Ricardo Prieto

Demo

See the Pen Hamburger Icon Animation to Cross underline with CSS by Ricardo Prieto (@ricardpriet) on CodePen.