In this article you'll learn how to create an animated menu selection or tab selection using HTML, CSS, and JavaScript.
This tutorial covers all the steps, from creating the basic navigation menu to adding the active tab selection or menu option selection animation effects. The tutorial is easy to follow and includes codes, screenshots, demo tutorial which can understand by even beginners.
Actually, it’s a navigation menu, where there is a slider that slide smoothly to list items where user have clicked or selected. The slider change its position and width dynamically according to selected list items. You can see demo in below YouTube video.
You'll learn in this blog post:
- How to make active menu or tab animation?
- How to calculate widths of array items.?
- How to calculate widths of array items till selected array?
- How to create animated navigation menu?
- Active tab animation.
Video Tutorial on Menu selection or Tab selection Animation.
Menu Item Selection or Tab Selection Animation.
How we going to make menu item selection animation?
It's simple actually, first we going to make simple navigation menu with list items, then we going to set width to each list items (li tags) individually and also create one span tag, to make box that move or slide on list items you can say it's a slider which slide on menu.
Now to move or slide the slider, we need to take care of its width and left or right position because the list items text or width may be larger or smaller comparatively. So, slider's width and left or right position should be change when move from one list item to another.
We going to slide or move (here move means, change the width and left position) slider using JavaScript. Initially its width and left position set according to first list item of menu. After that on click on any list item its width and left position set according to that list item.
You have to change only the CSS width of list items to make it responsive. The slider changes its width and sliding position automatic according to list item (menu item) on which user have clicked.
For changing width of slider, we going to make it through client width of that clicked list item.
And for its left positions we going to calculate the previous list items widths from selected list item and sum it and add that sum value to slider left position.
Means if total 5 list items are there in navigation menu. So, if user click on 3rd list item so we going to calculate widths of 1st and 2nd list item and sum it up(addition). And add that sum value to slider left position.
Likewise, if user click on 5th list item, then we calculate widths of 1st 2nd 3rd and 4th list items and sum it up and add that value to slider left position.
Now let's start making menu item selection or tab selection animation using HTML CSS and JavaScript step by step.
Step 1: Create basic structure of html.
Create basic structure of html.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Menu or Tab Animation</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;
display: flex;
align-items: center;
justify-content: center;
}
Output:
Step 2: Create simple navigation menu.
First, we going create simple horizontal navigation menu with slider using HTML and CSS.
Also read: Side navigation menu that close on click outside of it using HTML CSS and JavaScript.
HTML
<div class="navigation">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<span class="slider"></span>
</ul>
</div>
CSS
.navigation ul{
display: flex;
background-color: #000;
border-radius: 5px;
position: relative;
}
.navigation ul li{
text-align: center;
list-style: none;
z-index: 2;
}
.home{
width: 120px;
}
.services{
width: 180px;
}
.about{
width: 150px;
}
.contact{
width: 180px;
}
.navigation ul li a{
font-size: 25px;
text-decoration: none;
color: #fff;
padding: 15px 0px;
display: block;
}
.slider{
position: absolute;
width: 100px;
height: 100%;
left: 0px;
background-color: #ec407a;
border-radius: 5px;
z-index: 1;
transition: 0.5s ease;
}
Output:
Above slider (pink colour element bar) width is just to show you right now. Later its going to be dynamic.
Step 3: Add functionality for selection of menu items with animation.
I have explained above how we going to make this active tab selection animation.
So first we define variables.
JavaScript
let slider = document.querySelector(".slider");
let li = document.querySelectorAll(".navigation ul li");
let index_value = 0;
let left_position = 0;
First, we set the initial width and left position of slider to first list item of navigation menu.
Then Add click functionality to list items (menu items). When user click on it, we going to make slider width equal to that list item width on which user have clicked.
So, for that we use for each method of JavaScript to target each list items.
JavaScript
li.forEach((item , index) => {
// Setting initial width and left position to slider.
slider.style.width = li[0].clientWidth + "px";
slider.style.left = left_position + "px";
item.onclick = function(){
slider.style.width = item.clientWidth + "px";
}
});
Now the slider width and left position is dynamic initially (when page load). And width is changing according to clicked list items. But we also have to change it left position too, so that slider will move to that list item.
So, for that we have to calculate the widths of all list items till the list item which is selected or clicked by user. For that we going to use for loop of JavaScript.
So, to get the widths of all list items till the list item which is selected by user, we first take the index value of that selected list item (by for each loop).
And then run for loop till that index value and when for loop run, we get the width (client width) of each list item from start to that list item where user clicked.
Then we store that width in one variable (left_position) with addition and add that variable (left_position) value to left position of slider.
After setting left position we have to make it zero because if not then it will add further calculation in previous ones.
See below code.
JavaScript
li.forEach((item , index) => {
// Setting initial width and left position to slider.
slider.style.width = li[0].clientWidth + "px";
slider.style.left = left_position + "px";
item.onclick = function(){
slider.style.width = item.clientWidth + "px";
// console.log(index);
index_value = index;
get_left_position();
slider.style.left = left_position + "px";
left_position = 0;
}
});
// Getting left position for slider to slide.
function get_left_position(){
for (let i = 0; i < index_value; i++) {
const element = li[i];
left_position += element.clientWidth;
// console.log(left_position);
}
}
You can see demo in above YouTube video.
So tab selection animation is ready using HTML CSS and JavaScript.
You may like:
- How to create an animated navigation menu using HTML CSS and JavaScript.
- How to create a side navigation with open and close functionality with just HTML and CSS.
- How to create an navigation bar with search bar using HTML, CSS and JavaScript.
- How to create an custom select dropdown menu using HTML CSS & JavaScript.
- How to create vertical navigation menu with only image with tool tip using HTML and CSS.
- How to create an multi dropdown menu using HTML and CSS.
Final code:
So that’s how you can make this animated active menu animation using html CSS & JavaScript. If you have any query or suggestion you can write in comment section.
Thanks for reading this far.
Share your thoughts.