Animated Hamburger Menu Icon

Web designers add different design elements to the website in order to make it more modern, unique, and appealing. An example of an element that is used very frequently is the animated hamburger menu. Three horizontal lines are part of this design feature. They are placed on top of each other to create the hamburger menu icon. Its resemblance to two buns and a beef patty in the middle makes it a hamburger menu. The navigation menu on the website might appear as a popup or slide when someone clicks on the hamburger menu icon. Today we are going to make this design element using HTML, CSS, and Javascript. The process of making this element is shown in the following video. You can subscribe to our YouTube channel if you're new to front-end development.

Video Tutorial:

Hope you have watched the video tutorial. You must have seen the CSS hamburger menu or you know how to create a hamburger menu in CSS. We used a little javascript to make it on click event. This design element increases the navigation menu's interactivity and usability. As a result, it enhances the user experience of the website. Hamburger menu icons are normally used in responsive web design. Mobile devices are typically equipped with smaller screens, making hamburger menus especially popular since they are able to expand and collapse smoothly.

You May Also Like:

Animated Hamburger Menu Icon [ Source Code ]:

Creating HTML and CSS Files is the first step. Once you have linked the files correctly, copy and paste the code from the code box below and paste it into your project. If you encounter any errors after checking the code in your browser, you can download it by clicking the below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated hamburger Menu using HTML CSS and Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="lines">
            <span></span>
            <span></span>
            <span></span>
          </div>
    </div>

    <script>
      
        const X = document.querySelector('.lines');

        X.addEventListener('click', () => {
          X.classList.toggle('active');
        });

    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: #00b6c4;
}
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.lines {
	display: inline-block;
	cursor: pointer;
	padding: 10px;
}
.lines span {
	display: block;
	height: 15px;
	width: 120px;
	margin-bottom: 15px;
	position: relative;
	background: #fff;
	border-radius: 50px;
	z-index: 1;
	transition: transform 0.5s ease-out, opacity 0.2s ease-out;
}
.lines span:last-child {
	margin-bottom: 0;
}
.lines.active span:nth-child(1) {
	transform: translateY(30px) rotate(45deg);
}
.lines.active span:nth-child(2) {
	opacity: 0;
}
.lines.active span:nth-child(3) {
	transform: translateY(-30px) rotate(-45deg);
}

We hope the animated hamburger menu code is working properly for you. Go to our homepage and click on the load more button. You will find many similar source codes there. If you enjoy our website content, please share it with your friends. Thank you for stopping by our site.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box