Build an Interactive Bottom Navigation Menu using HTML CSS and JS
Navigation menus play a pivotal role in enhancing user experience on websites. In this tutorial, we'll delve into creating a sleek and stylish navigation menu with a distinctive highlighter effect. Combining HTML, CSS, and a touch of JavaScript, we'll guide you through the steps to craft an engaging menu for your web projects.
Also Read: Realistic Credit Card Animation using HTML CSS and JS
HTML Structure
In this section, we'll delve into the HTML structure that forms the foundation of our dynamic navigation menu. The HTML code is designed to create a visually appealing and interactive menu. Let's break it down:
<div id="main-container" class="flex-c">
<div class="nav-container flex-c">
<ul class="menu flex-c">
<div class="highlighter"></div>
<li class="item flex-c active">
<a href="#" class="icon flex-c"><span class="fas fa-home"></span></a>
<span class="dot"></span>
</li>
<li class="item flex-c">
<a href="#" class="icon flex-c"><span class="fas fa-search"></span></a>
<span class="dot"></span>
</li>
<li class="item flex-c">
<a href="#" class="icon flex-c"><span class="fas fa-plus"></span></a>
<span class="dot"></span>
</li>
<li class="item flex-c">
<a href="#" class="icon flex-c"><span class="fas fa-bell"></span></a>
<span class="dot"></span>
</li>
<li class="item flex-c">
<a href="#" class="icon flex-c"><span class="fas fa-user"></span></a>
<span class="dot"></span>
</li>
</ul>
</div>
</div> - Main Container (#main-container): This container wraps the entire navigation menu. It uses flex properties to center its content both horizontally and vertically.
- Navigation Container (nav-container): This container holds the menu items and the highlighter. It has a fixed width (420px), a background gradient, and rounded corners for a sleek appearance.
- Menu (menu): The unordered list (<ul>) contains the menu items. It is a flex container with centered content.
- Highlighter (highlighter): Positioned absolutely within the menu container, the highlighter is a visual cue indicating the active menu item. It has a circular shape with a border to simulate a ring around the active item.
- Menu Items (item): Each list item (<li>) represents a menu item. It includes an anchor (<a>) for the icon and a dot to indicate the active state.
- Icons (fas fa-home): Font Awesome icons are used for menu items. Icons can be easily customized based on the specific needs of the project.
- Dot (dot): The dot represents the active state of a menu item. It starts as transparent and becomes visible when the item is active.
- Active State (active): The active class is initially applied to the home item to highlight it. As users click on other items, this class dynamically moves to the selected item.
CSS Styling
Now, let's dive into the CSS styling for the navigation menu. This section focuses on the design aspects, positioning, and animations to create an engaging user interface.
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');
:root {
--bg-color: #0a0a0a;
}
body {
background: var(--bg-color);
}
.flex-c {
display: flex;
align-items: center;
justify-content: center;
}
#main-container {
min-height: 100vh;
min-width: 420px;
}
.nav-container {
width: 420px;
height: 60px;
border-radius: 15px;
background: linear-gradient(rgb(79 104 103), rgb(11 19 47));
}
.menu {
gap: 15px;
height: 100%;
position: relative;
}
.highlighter {
left: 0;
top: -50%;
height: 100%;
transition: .5s;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
border: 5px solid var(--bg-color);
background: linear-gradient(rgb(103, 119, 118), rgb(11 19 47));
}
.highlighter::before,
.highlighter::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
bottom: 3px;
}
.highlighter::before {
left: -22px;
border-radius: 0px 25px 0px 0px;
box-shadow: 1px -10px 0px 0px var(--bg-color);
}
.highlighter::after {
right: -22px;
border-radius: 25px 0px 0px 0px;
box-shadow: -1px -10px 0px 0px var(--bg-color);
}
.item {
z-index: 1;
height: 100%;
cursor: pointer;
aspect-ratio: 1;
transition: .5s;
list-style: none;
border-radius: 50%;
}
.item .icon {
text-decoration: none;
height: 100%;
width: 100%;
font-size: 18px;
color: white;
transition: .5s;
}
.dot {
opacity: 0;
width: 8px;
aspect-ratio: 1;
position: absolute;
border-radius: 50%;
background: #ffffff;
transform: translateY(30px);
transition: transform .5s, opacity .3s;
box-shadow: 0px 0px 8px 2px #ffffff99;
}
.active {
transform: translateY(-50%);
}
.active .dot {
opacity: 1;
transform: translateY(45px);
}- Menu Items (item): Configures each menu item with specific styles, such as dimensions, cursor type, and border-radius. The z-index ensures proper layering.
- Icon (item .icon): Styles the icons inside each menu item, defining font size, color, and alignment. The transition property adds a smooth animation effect.
- Dot (dot): Specifies the styling for the dots that accompany each menu item. It defines initial opacity, dimensions, position, and transition effects for smooth animations.
- Active State (active): Defines the appearance of the active menu item. The transform property shifts the active item upward, and the accompanying dot becomes fully visible.
Also Read: Interactive Custom Volume Slider using HTML and CSS only
The CSS styles cover the entire navigation menu, ensuring a cohesive and visually appealing design. The provided code creates an interactive and dynamic navigation experience with smooth transitions and animations.
JavaScript Interactivity
Let's proceed with the JavaScript code for the navigation menu. This part focuses on adding interactivity to handle user clicks and update the highlighter's position accordingly.
const items = document.querySelectorAll('.item');
const highlighter = document.querySelector('.highlighter');
function removeActive() {
items.forEach(elem => elem.classList.remove('active'));
}
items.forEach((elem, index) => {
elem.addEventListener('click', () => {
highlighter.style.transform = `translateX(${index * 75}px)`;
removeActive();
elem.classList.add('active');
});
}); - Item Selection (items): Selects all the menu items, storing them in the items variable.
- Highlighter Selection (highlighter): Selects the highlighter element, which visually represents the active state.
- Remove Active State (removeActive()): Defines a function to remove the active state from all menu items. This ensures that only the clicked item is active at a given time.
- Click Event Listener (forEach loop): Iterates through each menu item and adds a click event listener. When an item is clicked, it updates the highlighter's position based on the index of the clicked item. The removeActive() function is called to clear the active state from other items, and the clicked item is marked as active.
This JavaScript code enhances the navigation menu's functionality, making it responsive to user interactions. Users can click on different menu items, and the highlighter smoothly moves to the selected item. The active state is visually represented, providing feedback to the user.
In conclusion, the navigation menu implemented in this blog post offers a stylish and interactive user interface. The combination of HTML for structure, CSS for styling, and JavaScript for interactivity creates a seamless and engaging user experience.
