Learn how to create an animated navigation menu using HTML, CSS, and JavaScript. This tutorial will teach you how to create a menu with beautiful loading animation and awesome hover effects. You’ll find source code, screenshots, a video tutorial, and a demo of the animated navigation menu further in this blog post.
Navigation menus are an essential part of any website, if you want to add some excitement and visual interest to your site, you can create an animated navigation menu.
Animated navigation menus are a great way to add visual interest and interactivity to your website. They can also help to improve the user experience by making it easier for visitors to find the information they're looking for.
In this tutorial, we'll show you how to create an animated navigation menu using HTML, CSS, and JavaScript. This menu will load with a beautiful animation and have awesome hover effects. When the user hovers or clicks on any list item in the menu, a slider will slide to that list item in an animated way. You can see demo in below YouTube video.
You'll learn in this blog post:
- Animated Navigation Menu with Slider
- How to add animated navbar or menu bar with hover effects to your website.
- JavaScript hover effects.
- CSS hover effects.
- CSS and JavaScript animation.
Video Tutorial on Animated Navigation Menu.
Animated Navigation Menu.
So, we going to make animated navbar. Initially when page loads a whole navigation menu appears in animated way. And all the list items in menu bar or navbar have an awesome hover effect. All the animation is added through JavaScript. You can see demo in above YouTube video.
So, let’s start making this awesome animated navigation menu in HTML CSS and JavaScript step by step.
Step 1: Create basic structure of html.
First of all, create basic structure of html and add a basic CSS property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Navigation Bar</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background-color: #2e2e2e;
}
Output:
Step 2: Create a simple navbar.
Now let’s create a simple navigation menu, which have logo text (you can also use img, here I added text instead) and navbar with list items.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Navigation Bar</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navigation_bar">
<div class="box">
<div class="logo_text">Maketechstuff</div>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<span class="slider"></span>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS
.navigation_bar{
position: absolute;
left: 0px;
right: 0px;
background-color: #000;
padding: 10px 0px;
}
.box{
width: 1150px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px auto;
/* overflow: hidden; */
}
.logo_text{
font-size: 30px;
font-weight: bold;
color: #fff;
}
nav ul{
display: flex;
align-items: center;
position: relative;
}
nav ul li{
list-style: none;
padding: 0px 25px;
z-index: 10;
}
nav ul li a{
font-size: 25px;
color: #fff;
text-decoration: none;
padding: 15px 0px;
display: block;
}
.slider{
position: absolute;
width: 0px;
bottom: 0px;
height: 100%;
background-color: #ec407a;
z-index: 1;
border-radius: 5px;
left: 0;
pointer-events: none;
transition: 1s;
}
Output:
As you can see in above code (HTML) that I have added span tag with class="slider" at the last of list items inside unordered list.(it not visible right now, we'll do it later through JavaScript). That’s for slider, which going to slides to list item on which user have hovered or clicked.
We make that functional using JavaScript. Means we'll use JavaScript for the sliding functionality of slider with automatic or dynamically adjusting width and left position according to list item selected or hovered by user.
Hover effect on Navigation bar using JavaScript.
JavaScript
let slider = document.querySelector(".slider");
let list_items = document.querySelectorAll(".navigation ul li");
let logo_text = document.querySelector(".logo_text");
let index_value = 0;
let left_position = 0;
// Animation for slider to slide on menu items or list items.
list_items.forEach((list_item, index) => {
// Setting initial left position and width of slider.
slider.style.width = list_items[0].clientWidth + "px";
slider.style.left = "0px";
// Hover or click effect.
list_item.onmouseover = function () {
slider.style.width = list_item.clientWidth + "px";
index_value = index;
console.log(list_item.clientWidth)
get_left_position();
slider.style.left = left_position + "px";
left_position = 0;
}
});
function get_left_position() {
for (let i = 0; i < index_value; i++) {
const element = list_items[i];
left_position += element.clientWidth;
// console.log(left_position);
}
}
Output:
Here’s the hover effects with animation are done. Now when user click or hover on any list items the slider will slides to that list item by adopting automatically its width and left position or adopting automatically its width and sliding position.
For hover effects I have user mouseover event of JavaScript. So, when user make mouse over on any list item it stays there even after mouse out. So, for that we also have to add function that run on mouse out event so it makes a complete hover effect.
JavaScript
// Animation for slider to slide on menu items or list items.
list_items.forEach((list_item, index) => {
// Setting initial left position and width of slider.
slider.style.width = list_items[0].clientWidth + "px";
slider.style.left = "0px";
// Hover or click effect.
list_item.onmouseover = function () {
slider.style.width = list_item.clientWidth + "px";
index_value = index;
console.log(list_item.clientWidth)
get_left_position();
slider.style.left = left_position + "px";
left_position = 0;
}
list_item.onmouseout = function () {
slider.style.width = list_items[0].clientWidth + "px";
slider.style.left = "0px";
}
});
So here's the hover effects are done. Now let's add animation to navigation bar when page loads.
Loading animation on navigation menu.
Now let’s add animation to menu bar on page load or when user land on page or when user refereh the web page.
So, for that first we have to add some CSS properties to list items and logo of navbar to slightly shift down initially.
CSS
.logo_text{
font-size: 30px;
font-weight: bold;
color: #fff;
position: relative;
top: 50px;
opacity: 0;
transition: 0.8s;
}
nav ul li{
list-style: none;
padding: 0px 25px;
z-index: 10;
position: relative;
top: 50px;
opacity: 0;
transition: all 0.8s cubic-bezier(0.0075 , -0.95 , 0.100 , 2.5);
}
when page loads, After a half second we make logo and list items to top: 0px or at normal position with animation using JavaScript.
For list items we add delay in animation with forloop. So that animation on menu items looks like a wave animation.
JavaScript
// Animation for logo text and navigation list items on page load.
setTimeout(() => {
logo_animation();
menu_animation();
}, 500);
function logo_animation() {
logo_text.style.top = "0px";
logo_text.style.opacity = "1";
}
function menu_animation() {
for (let m = 0; m < list_items.length; m++) {
const element = list_items[m];
setTimeout(() => {
element.style.top = "0px";
element.style.opacity = "1";
}, m * 100);
}
}
So that’s it animated navbar is ready using HTML CSS and JavaScript. You can see demo in above YouTube video.
You may like:
- How to create a responsive animation using HTML & CSS.
- How to create a tab selection animation using HTML CSS and JavaScript.
- How to create a sidebar menu with open and close functionality using only HTML and CSS.
- How to create a animated dropdown select menu using HTML CSS & JavaScript.
- How to create a read more and read less functionality using HTML, CSS and JavaScript.
- Create and FAQ menu using HTML CSS and JavaScript.
Final code:
So that’s it animated navigation menu with awesome hover effects or tab animation is ready using HTML CSS and JavaScript. If you have any query or suggestion you can write in comment section.
Thanks for reading this far.
Share your thoughts.