Animated Menu Bar Design

The navigation menu is a standard feature of most websites. Navbar helps users to navigate the site and to make it easier for them to find the content they're looking for. In this blog, we'll build a basic navigation menu using HTML and CSS with an expansion animation. We'll be using CSS to style the menu, but HTML5 is also supported. Before collecting the source code, I recommend you watch the below video. You can use this method to understand the code better. If you want to learn front-end development, you can subscribe to our YouTube Channel.

I hope you have watched the video and understood the concept. This animated navigation menu is designed a little differently from the traditional navbar design. Here's a button like the hamburger icon. When we click on that button, the button expands and our navigation bar comes out of it. Clicking the button will change the hamburger icon to a cross icon. Clicking on that cross icon will close the navigation bar again. A hover effect is also provided for each anchor element of the menu. We used the CSS transition property for our snippet to make our animation smooth. This is a ready-to-go navigation menu design that you can use in your next project.

You may also like:

Animated Menu Bar using HTML CSS [ Source Code ]:

You must first create two files. one of them is HTML and the other one is CSS. You should add the external CSS file to your HTML file. Next, copy the code in the box below and paste it into your project. If the code does not work, you can get the source code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to Create Animated Menu Bar using HTML CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="wrapper">
      <input type="checkbox" id="box">
      <label for="box">
        <div id="button">
          <i class="fa fa-align-left"></i>
        </div>
      </label>
      <div class="menu-items">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #f4c405;
	font-family: montserrat;
}
.wrapper, label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#box:checked~label {
	left: 90%;
	transform: translateY(-50%);
}
.wrapper label {
	z-index: 1;
	transition: .35s ease-in;
}
.wrapper label #button {
	background: #262626;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 70px;
	width: 75px;
}
label #button i {
	color: #f5f5f5;
	transition: transform .2s linear;
	margin: auto;
	font-size: 30px;
}
#box:checked~label #button i:before {
	content: '\f00d';
}
.wrapper .menu-items {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s ease-in;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
	background: #f9f9f9;
	padding: 0 60px 0 0;
	border-radius: 50px;
}
#box:checked~.menu-items {
	transform: scaleX(1);
}
.menu-items ul {
	list-style: none;
	display: flex;
	padding: 20px 5px;
}
.menu-items ul li a {
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	color: #262626;
	font-size: 15px;
	margin: 0 10px;
	padding: 10px 20px;
}
.menu-items ul li a:hover {
	background: #262626;
	border-radius: 50px;
	color: #fff;
}
#box {
	display: none;
}

I hope you have implemented the code beautifully. We regularly provide a variety of source code for front-end development on our blog. If you are a beginner in front-end development then these snippets will definitely come in handy. Please share our blog posts with like-minded people like you. We all know sharing is caring. Learn for yourself and help others learn. Thank you so much for visiting our blog.

Animated Menu Bar using HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Menu Bar Design

Animated Menu Bar using HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form