Create Amazing Web Dev Projects Without Using JavaScript

Update: 2025-02-23

Description

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.

Animated Nav Bar

Explanation

: This is the container for our navigation bar.

* <input id="menu-toggle" type="checkbox" />: 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.

: These divs inside the label create the hamburger icon.

: 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.

norbertbmwebdev.substack.com/subscribe