Adding a smooth, animated navigation bar (navbar) to your website can greatly improve the user experience and visual appeal. In this tutorial, we’ll walk through building an animated navbar using HTML, CSS, and Ionicons. This navbar will feature expanding links with icons that animate on hover using the CSS transform and transition properties.
Let's dive into the steps!
Prerequisites:
Before we start, you should be familiar with:
- Basic HTML for structure
- CSS for styling and animations
- Ionicons for adding icons
Video Tutorial if you don't like to read complete blog
Step 1: Setting Up the HTML Structure
We will begin by setting up a simple HTML structure. Ionicons is a free and open-source icon library, and we’ll be using it to add attractive icons to our navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Navbar with Icons</title>
<!-- Ionicons for icons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- Google Fonts for styling -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<ul>
<li class='link'>
<span class='link-icon'><ion-icon name="home-outline"></ion-icon></span>
<span class='link-title'>Home</span>
</li>
<li class='link'>
<span class='link-icon'><ion-icon name="mail-outline"></ion-icon></span>
<span class='link-title'>Message</span>
</li>
<li class='link'>
<span class='link-icon'><ion-icon name="search-outline"></ion-icon></span>
<span class='link-title'>Search</span>
</li>
<li class='link'>
<span class='link-icon'><ion-icon name="person-outline"></ion-icon></span>
<span class='link-title'>Profile</span>
</li>
<li class='link'>
<span class='link-icon'><ion-icon name="bag-handle-outline"></ion-icon></span>
<span class='link-title'>Cart</span>
</li>
</ul>
</div>
</body>
</html>
This HTML code includes:
- A menu container that holds the navbar.
- Ionicons for icons, providing visual cues for each navigation option (e.g., Home, Message, Search).
- Google Fonts to style the text with the "Poppins" font for a modern look.
Step 2: Styling the Navbar with CSS
Now that we have the structure, let’s add CSS to style and animate the navbar. Here’s the style.css file:
body {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f1f1f1;
font-family: "Poppins", sans-serif;
}
.menu {
width: calc(130px + 4 * 70px + 4rem);
height: 80px;
background: #fff;
border-radius: 40px 10px 40px;
display: flex;
align-items: center;
padding: 0 30px;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.075);
}
.menu > ul {
width: 100%;
list-style: none;
display: flex;
gap: 10px;
align-items: center;
justify-content: space-evenly;
padding: 0;
}
.link {
display: inline-flex;
justify-content: center;
align-items: center;
width: 70px;
height: 50px;
border-radius: 99em;
position: relative;
overflow: hidden;
transform-origin: center left;
transition: width 0.2s ease-in;
cursor: pointer;
}
.link:before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #eee;
border-radius: 99em;
transform: translateX(100%);
transition: transform 0.2s ease-in;
transform-origin: center right;
}
.link-icon {
font-size: 20px;
position: absolute;
left: 18px;
}
.link-title {
transform: translateX(100%);
transition: transform 0.2s ease-in;
text-indent: 28px;
font-size: 14px;
}
.link:hover,
.link:focus {
outline: 0;
width: 130px;
}
.link:hover:before,
.link:hover .link-title,
.link:focus:before,
.link:focus .link-title {
transform: translateX(0);
}
Explanation of Key CSS:
- Body: The body is styled to center the navbar horizontally and vertically, with a background color of light grey.
- Menu: The menu container is styled with a rounded shape and a shadow for depth.
- Links: Each link is an inline-flex container with animations applied via the transform and transition properties:
- On hover or focus, the width of each link expands from 70px to 130px.
- The link-title and before pseudo-element slide into view using transform: translateX(0), creating a sliding animation.
- The icon stays fixed while the text animates in when hovered.
Step 3: Testing and Customizing
Now that the CSS is in place, your navbar will animate when hovered over each link. The icons will remain in place while the text smoothly slides in. You can customize the following:
- Change the color of the background or icons.
- Adjust the hover effects by modifying the
transformortransitionproperties. - Experiment with different Ionicons for your icons by changing the
nameattribute in the HTML.
Conclusion
With just HTML and CSS, along with Ionicons for icons, we created a stylish, animated navbar that enhances user interaction. This solution provides a sleek, modern look and can easily be customized to fit any website design.
Using CSS transitions and transform, we created smooth animations that occur when users hover over or focus on the navbar items, making the navigation experience more engaging and dynamic.
Next Steps:
- Experiment with additional hover effects and animations.
- Try adding dropdown menus to each link for more complex navigation.
If you found this tutorial helpful, subscribe for more web development content!
Further Reading:
Subscribe to Newsletter: https://codewithghazi.substack.com/
Follow me for more content like this:
- LinkedIn: https://www.linkedin.com/in/ghazi-khan/
- Twitter: https://twitter.com/ghazikhan205
- YouTube: @codewithghazi
- Instagram: @codewithghazi
