In this tutorial, we will create a responsive and animated navigation bar using HTML and CSS. This navigation bar will be mobile-friendly and will have a hamburger menu that transforms into a close icon when clicked.
HTML Structure
First, let’s look at the HTML structure of our navigation bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Animated Nav Bar</title>
</head>
<body>
<nav id="mobile-menu">
<input type="checkbox" id="menu-toggle" />
<label class="menu-btn" for="menu-toggle">
<div></div>
<div></div>
<div></div>
</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Explanation
<nav id="mobile-menu">: This is the container for our navigation bar.<input type="checkbox" id="menu-toggle" />: This checkbox will be used to toggle the visibility of the menu.<label class="menu-btn" for="menu-toggle">: This label acts as a button for the checkbox.<div></div>: These divs inside the label create the hamburger icon.<ul>: This unordered list contains the navigation links.
CSS Styling
Now, let’s style our navigation bar using CSS.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav#mobile-menu {
background-color: #333;
position: relative;
}
nav#mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
display: none;
}
nav#mobile-menu ul li {
display: block;
}
nav#mobile-menu ul li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: block;
}
nav#mobile-menu ul li a:hover {
background-color: #555;
}
.menu-btn {
display: block;
cursor: pointer;
width: 30px;
height: 30px;
position: absolute;
top: 15px;
right: 20px;
}
.menu-btn div {
width: 100%;
height: 4px;
background-color: black;
margin: 6px 0;
transition: 0.3s;
}
/* Alternative */
.menu-btn {
display: block;
cursor: pointer;
width: 30px;
height: 30px;
position: absolute;
top: 15px;
right: 20px;
& div {
width: 100%;
height: 4px;
background-color: white;
margin: 6px 0;
transition: 0.3s;
}
}
/* ---------------------------------------- */
#menu-toggle {
display: none;
}
#menu-toggle:checked + .menu-btn div:nth-child(1) {
transform: rotate(-45deg) translate(-9px, 5px);
background-color: white;
}
#menu-toggle:checked + .menu-btn div:nth-child(2) {
opacity: 0;
}
#menu-toggle:checked + .menu-btn div:nth-child(3) {
transform: rotate(45deg) translate(-9px, -5px);
background-color: white;
}
#menu-toggle:checked ~ ul {
display: flex;
}
/* Alternative */
#menu-toggle {
display: none;
&:checked + .menu-btn div:nth-child(1) {
transform: rotate(-45deg) translate(-9px, 5px);
}
&:checked + .menu-btn div:nth-child(2) {
opacity: 0;
}
&:checked + .menu-btn div:nth-child(3) {
transform: rotate(45deg) translate(-9px, -5px);
}
&:checked ~ ul {
display: flex;
}
}
/* ---------------------------------------- */
@media screen and (min-width: 768px) {
nav#mobile-menu ul {
display: flex;
flex-direction: row;
justify-content: center;
}
nav#mobile-menu ul li {
display: inline-block;
}
nav#mobile-menu ul li a {
padding: 15px 20px;
}
.menu-btn {
display: none;
}
}
/* Alternative */
@media screen and (min-width: 768px) {
nav#mobile-menu ul {
display: flex;
flex-direction: row;
justify-content: center;
& li {
display: inline-block;
& a {
padding: 15px 20px;
}
}
}
.menu-btn {
display: none;
}
}
Explanation
body: Sets the font family, margin, and padding for the entire page.nav#mobile-menu: Styles the navigation bar container with a background color and relative positioning.nav#mobile-menu ul: Styles the unordered list inside the navigation bar. It hides the list by default and aligns the items in a column.nav#mobile-menu ul li: Styles the list items to be displayed as blocks.nav#mobile-menu ul li a: Styles the links inside the list items with color, padding, and display properties.nav#mobile-menu ul li a:hover: Changes the background color of the links when hovered..menu-btn: Styles the hamburger menu button with dimensions, cursor, and positioning..menu-btn div: Styles the individual bars of the hamburger menu with dimensions, background color, margin, and transition.#menu-toggle: Hides the checkbox input.#menu-toggle:checked + .menu-btn div:nth-child(1): Rotates and changes the color of the first bar when the checkbox is checked.#menu-toggle:checked + .menu-btn div:nth-child(2): Hides the second bar when the checkbox is checked.#menu-toggle:checked + .menu-btn div:nth-child(3): Rotates and changes the color of the third bar when the checkbox is checked.#menu-toggle:checked ~ ul: Displays the menu when the checkbox is checked.@media screen and (min-width: 768px): Media query to style the navigation bar for larger screens. It displays the menu items in a row and hides the hamburger menu button.
Conclusion
With this HTML and CSS code, you have created a responsive and animated navigation bar. The hamburger menu transforms into a close icon when clicked, and the menu items are displayed in a column on smaller screens and in a row on larger screens. Feel free to customize the styles to match your website’s design.
Share this post