 |
| Animated Hamburger Menu Button HTML CSS | CodingTuting |
Today's Web World is of Responsive Web Design. Where we have now is everything responsive. Image, Text, etc all are responsive. And Icons and Buttons also plays an important role in responsive web design.
Because it is not possible to show the content like Desktop in Small Screen Devices (Mobile, Tablet). So we use the Buttons and Menu Icon in HTML for the display that content.
And today we look about Hamburger Menu Button, it is the most important part of Responsive Design.
What is Hamburger Menu Button in Web Design?
It is a simple 3 Horizontal Graphic Lines on each other. It is a stack of 3 lines, and looks like burger stack, that's why it is known as Hamburger Menu Button . It is also called Menu Button. See the look of this button in the top image.
The use of Hamburger Menu Button is for expand and collapse the Main Menu, Navbar and other expandable content of the website. We can use Hamburger Menu for Mobile and Desktop as well.
We'll create Hamburger Menu to Cross CSS , Hamburger Menu and Back Button, Hamburger Menu to Sidebar Navigation Menu , etc in this tutorial.
We'll use below CSS trick for make Animated Hamburger Menu Button
- CSS Transform
- CSS Transition
- CSS Transition Delay
See the Preview of Hamburger Menu Animation
You may also like
Now Focus on Source Code
Before look at the source code, let's understand How I did this? Don't be hurry for source code.
- I took some empty <span> tags in a <div> and and gave them look of horizontal lines by CSS. I've used CSS before and after property for create the copy of <span> tag.
- I've also taken two <span> tags for some buttons.
- I've applied CSS Transform and Transition effect with the .active class of each button.
- At last, I've created a JavaScript function for toggle the class .active with the help of onclick() event on each button.
So toggle the class .active on <div> element, is giving the animation effect on the button.
Above is the summary for understanding the source code. Now let's focus on the full source code to understand in detail. I've written the CSS of each button saperately, so you'll not face any difficulty to find the CSS of perticular button.
If you've any doubt please let me know in the comment.
MenuBtn.html
<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
<head>
<title>Menu Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="StyleMenuBtn.css"/>
</head>
<body>
<div class="all-btn">
<div class="menu-btn-1" onclick="menuBtnFunction(this)">
<span></span>
</div>
<div class="menu-btn-2" onclick="menuBtnFunction(this)">
<span></span>
</div>
<div class="menu-btn-3" onclick="menuBtnFunction(this)">
<span></span>
</div>
<div class="menu-btn-4" onclick="menuBtnFunction(this)">
<span></span>
</div>
<div class="menu-btn-5" onclick="menuBtnFunction(this)">
<span></span>
<span></span>
</div>
<div class="menu-btn-6" onclick="menuBtnFunction(this)">
<span></span>
</div>
<div class="menu-btn-7" onclick="menuBtnFunction(this)">
<span></span>
<span></span>
</div>
<div class="menu-btn-8" onclick="menuBtnFunction(this)">
<span></span>
<span></span>
</div>
</div>
<script src="ScriptMenuBtn.js"></script>
</body>
</html>
StyleMenuBtn.css
/*Code by CodingTuting.Com Jignesh Panchal*/
body {
margin:0;
background-color: #eaeaea;
}
.all-btn {
padding:12% 5%;
}
.all-btn div {
float: left;
margin-right: 10%;
}
.all-btn div:last-child {
margin-right: 0;
}
/* Menu Button 1 */
.menu-btn-1 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-1 span,
.menu-btn-1 span::before,
.menu-btn-1 span::after {
background: red;
border-radius: 3px;
content: '';
position: absolute;
width: 40px;
height: 6px;
margin-top: 13px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu-btn-1 span::before {
margin-top:-12px;
}
.menu-btn-1 span::after {
margin-top:12px;
}
.menu-btn-1.active span {
background: transparent;
}
.menu-btn-1.active span::before {
margin-top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn-1.active span::after {
margin-top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu Button 2 */
.menu-btn-2 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-2 span,
.menu-btn-2 span::before,
.menu-btn-2 span::after {
background: black;
content: '';
position: absolute;
width: 40px;
height: 6px;
margin-top: 13px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotateY(180deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-btn-2 span::before {
margin-top:-12px;
}
.menu-btn-2 span::after {
margin-top:12px;
}
.menu-btn-2.active span {
background: transparent;
}
.menu-btn-2.active span::before {
margin-top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn-2.active span::after {
margin-top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-btn-2.active {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Menu Button 3 */
.menu-btn-3 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-3 span,
.menu-btn-3 span::before,
.menu-btn-3 span::after {
background: #394baf;
content: '';
position: absolute;
width: 40px;
height: 6px;
margin-top: 13px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(deg);
transform: rotate(180deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-btn-3 span::before {
margin-top:-12px;
}
.menu-btn-3 span::after {
margin-top:12px;
}
.menu-btn-3.active span {
background: transparent;
}
.menu-btn-3.active span::before {
margin-top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn-3.active span::after {
transform: rotate(-45deg);
margin-top: 0;
}
/* Menu Button 4 */
.menu-btn-4 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-4 span,
.menu-btn-4 span::before,
.menu-btn-4 span::after {
background: rgb(67, 181, 1);
content: '';
position: absolute;
width: 40px;
height: 3px;
margin-top: 13px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-btn-4 span::before {
margin-top:-12px;
}
.menu-btn-4 span::after {
margin-top:12px;
}
.menu-btn-4.active span {
border-radius: 1px 0px 0px 1px;
}
.menu-btn-4.active span::before {
right: 24px;
width: 17px;
top: 7.8px;
border-radius: 1px 0px 0px 1px;
-webkit-transform: rotate(-34deg);
-moz-transform: rotate(-34deg);
-o-transform: rotate(-34deg);
transform: rotate(-34deg);
}
.menu-btn-4.active span::after {
right: 24px;
width: 17px;
top: -7.8px;
border-radius: 1px 0px 0px 1px;
-webkit-transform: rotate(34deg);
-moz-transform: rotate(34deg);
-o-transform: rotate(34deg);
transform: rotate(34deg);
}
.menu-btn-4.active {
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
}
/* Menu Button 5 */
.menu-btn-5 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-5 span:nth-child(1),
.menu-btn-5 span:nth-child(1)::before,
.menu-btn-5 span:nth-child(1)::after {
background: #E91E63;
content: '';
position: absolute;
width: 40px;
height: 3px;
margin-top: 13px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu-btn-5 span:nth-child(1)::before {
margin-top:-12px;
-webkit-transition: .3s ease-in-out .3s;
-moz-transition: .3s ease-in-out .3s;
-o-transition: .3s ease-in-out .3s;
transition: .3s ease-in-out .3s;
}
.menu-btn-5 span:nth-child(1)::after {
margin-top:12px;
-webkit-transition: .3s ease-in-out .3s;
-moz-transition: .3s ease-in-out .3s;
-o-transition: .3s ease-in-out .3s;
transition: .3s ease-in-out .3s;
}
.menu-btn-5 span:nth-child(2) {
background: #E91E63;
content: '';
position: absolute;
width: 0px;
height: 3px;
margin-top: 13px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu-btn-5.active span:nth-child(1)::before,
.menu-btn-5.active span:nth-child(1)::after {
margin-top:0;
}
.menu-btn-5.active span:nth-child(1) {
-webkit-transition: .5s ease-in-out .6s;
-moz-transition: .5s ease-in-out .6s;
-o-transition: .5s ease-in-out .6s;
transition: .5s ease-in-out .5s;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menu-btn-5.active span:nth-child(2) {
width: 40px;
-webkit-transition: .3s ease-in-out .8s;
-moz-transition: .3s ease-in-out .8s;
-o-transition: .3s ease-in-out .8s;
transition: .3s ease-in-out .8s;
}
/* Menu Button 6 */
.menu-btn-6 {
height: 32px;
width: 40px;
cursor: pointer;
}
.menu-btn-6 span,
.menu-btn-6 span::before,
.menu-btn-6 span::after {
background: #795548;
content: '';
position: absolute;
width: 40px;
height: 3px;
margin-top: 13px;
-webkit-transition: .3s ease-in-out .3s;
-moz-transition: .3s ease-in-out .3s;
-o-transition: .3s ease-in-out .3s;
transition: .3s ease-in-out .3s;
}
.menu-btn-6 span::before {
margin-top:-12px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu-btn-6 span::after {
margin-top:12px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu-btn-6.active span {
background: transparent;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.menu-btn-6.active span::before {
margin-top:0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s;
}
.menu-btn-6.active span::after {
margin-top:0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: .6s;
-moz-transition-delay: .6s;
-o-transition-delay: .6s;
transition-delay: .5s;
}
/* Menu Button 7 */
.menu-btn-7 {
height: 40px;
width: 40px;
cursor: pointer;
position: relative;
border-radius: 100%;
border: 4px solid #00bcd4;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-btn-7 span:nth-child(1),
.menu-btn-7 span:nth-child(2) {
content: '';
position: absolute;
width: 20px;
height: 5px;
margin-top: 18px;
background: #00BCD4;
}
.menu-btn-7 span:nth-child(1) {
right: 15.1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn-7 span:nth-child(2) {
right: 4.5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-btn-7.active {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotateX(-180deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Menu Button 8 */
.menu-btn-8 {
height: 40px;
width: 40px;
cursor: pointer;
position: relative;
border-radius: 100%;
border: 4px solid #9C27B0;
}
.menu-btn-8 span:nth-child(1),
.menu-btn-8 span:nth-child(2) {
content: '';
position: absolute;
width: 20px;
height: 5px;
margin-top: 18px;
background: #9C27B0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-btn-8 span:nth-child(1) {
right: 15.1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn-8 span:nth-child(2) {
right: 4.5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-btn-8.active span:nth-child(1) {
margin-top: 16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-btn-8.active span:nth-child(2) {
margin-top: 16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
ScriptMenuBtn.js
/*Code by CodingTuting.Com Jignesh Panchal*/
function menuBtnFunction(menuBtn) {
menuBtn.classList.toggle("active");
}
We hope you got - How To Create Animated Hamburger Menu Button in HTML. You can use this idea of animation to anywhere as you like. And you can also make more animations like this.
If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Sharing is Caring
Thanks for Reading
Keywords & Queries covered in this tutorial are:
EmoticonEmoticon