Introduction
In today’s tutorial, we’ll walk through creating an ultra-premium, expandable navbar with a sleek design, dynamic animations, and modern effects. This advanced navigation bar features:
An animated particle background for a high-end aesthetic.
Glowing icons with hover effects.
A dynamic selection indicator that highlights the active section.
Smooth animations and transitions for a professional look.
Built with HTML, CSS, and JavaScript, this navbar is perfect for high-quality web interfaces and enhances the user experience, making it an excellent addition to any project, including interactive games like Gladiators Battle. Let’s dive in!
Step 1: Setting Up the HTML Structure
Our expandable navbar uses Font Awesome icons, a toggle button, and custom data-tooltip attributes to provide descriptions for each icon. This markup gives us a flexible structure to build upon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Premium Navbar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Particle Background -->
<div id="particle-background"></div>
<div class="navbar">
<div class="toggle-button">
<i class="fas fa-bars"></i>
</div>
<div class="nav-item active" data-tooltip="Home">
<i class="fas fa-home"></i>
</div>
<div class="nav-item" data-tooltip="Search">
<i class="fas fa-search"></i>
</div>
<div class="nav-item" data-tooltip="Notifications">
<i class="fas fa-bell"></i>
<!-- Notification Badge -->
<span class="notification-badge">3</span>
</div>
<div class="nav-item" data-tooltip="Messages">
<i class="fas fa-envelope"></i>
</div>
<div class="nav-item" data-tooltip="Profile">
<i class="fas fa-user"></i>
</div>
<!-- Selection Indicator -->
<div class="selection-indicator"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Key HTML Elements
Particle Background: Provides a subtle, animated effect behind the navbar for a high-end look.
Toggle Button: Allows users to expand or collapse the navbar.
Nav Items: Each item includes a tooltip, an icon, and some have notification badges.
Selection Indicator: Highlights the active section with a glowing effect.
Step 2: Styling the Navbar with CSS
Our CSS will focus on creating a luxurious, modern design with animated background particles, hover effects, and tooltip displays. Let’s go through each part.
Base Styles and Background Setup
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle, #1b1b2f, #121212);
font-family: Arial, sans-serif;
overflow: hidden;
position: relative;
}
/* Particle Background */
#particle-background {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
background: url('https://www.transparenttextures.com/patterns/dark-matter.png');
animation: particleAnimation 30s linear infinite;
opacity: 0.3;
}
@keyframes particleAnimation {
0% { background-position: 0 0; }
100% { background-position: 1000px 1000px; }
}
Navbar Styling
The navbar includes a semi-transparent background with a subtle blur effect to achieve a glassy look, which expands and collapses smoothly.
css
Copier le code
.navbar {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 40px;
backdrop-filter: blur(15px);
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
transition: width 0.4s ease, padding 0.4s ease;
gap: 15px;
width: 60px;
overflow: hidden;
position: relative;
z-index: 1;
}
.navbar.expanded {
width: 360px;
padding: 15px 20px;
justify-content: flex-start;
}
Toggle Button
The toggle button expands and collapses the navbar and features a rotating animation on hover.
.toggle-button {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ffffff;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
.toggle-button:hover {
color: #ff00cc;
transform: rotate(90deg);
}
Nav Items and Tooltip Effects
Each nav item has a hover effect with a gradient and a glowing background. Tooltips appear with a soft shadow effect to guide users.
.nav-item {
position: relative;
padding: 12px;
font-size: 24px;
color: #ffffff;
cursor: pointer;
border-radius: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.nav-item:hover {
background: linear-gradient(135deg, rgba(255, 0, 204, 0.4), rgba(51, 51, 255, 0.4));
transform: translateY(-5px) scale(1.05);
}
.nav-item::before {
content: attr(data-tooltip);
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #ffffff;
background: rgba(30, 30, 30, 0.85);
padding: 8px 12px;
border-radius: 8px;
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
backdrop-filter: blur(8px);
}
.nav-item:hover::before {
opacity: 1;
transform: translateY(-8px);
}
Selection Indicator and Notification Badge
.selection-indicator {
position: absolute;
bottom: 10px;
height: 4px;
width: 30px;
background: linear-gradient(90deg, #ff00cc, #3333ff);
border-radius: 2px;
transition: transform 0.3s ease, width 0.3s ease;
z-index: -1;
}
/* Notification Badge */
.notification-badge {
position: absolute;
top: 5px;
right: 5px;
background: linear-gradient(45deg, #ff0000, #ff4d4d);
color: #ffffff;
border-radius: 50%;
padding: 4px 7px;
font-size: 12px;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
animation: pulse 1.8s infinite ease-in-out;
}
Step 3: Adding JavaScript for Interactivity
JavaScript controls the navbar’s expandable state, the active item, and the selection indicator. It also keeps the indicator aligned with the selected item on resize.
const toggleButton = document.querySelector('.toggle-button');
const navbar = document.querySelector('.navbar');
const navItems = document.querySelectorAll('.nav-item');
const selectionIndicator = document.querySelector('.selection-indicator');
// Toggle the expanded state of the navbar
toggleButton.addEventListener('click', () => {
navbar.classList.toggle('expanded');
toggleButton.querySelector('i').classList.toggle('fa-bars');
toggleButton.querySelector('i').classList.toggle('fa-times');
});
// Update selection indicator position
function updateSelectionIndicator(activeItem) {
const itemRect = activeItem.getBoundingClientRect();
const navbarRect = navbar.getBoundingClientRect();
const offsetX = itemRect.left - navbarRect.left + navbar.scrollLeft;
selectionIndicator.style.transform = `translateX(${offsetX}px)`;
selectionIndicator.style.width = `${itemRect.width}px`;
}
// Handle nav item selection
navItems.forEach((item) => {
item.addEventListener('click', () => {
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');
updateSelectionIndicator(item);
});
});
// Initialize the position of the selection indicator on page load
document.addEventListener('DOMContentLoaded', () => {
const activeItem = document.querySelector('.nav-item.active');
if (activeItem) {
updateSelectionIndicator(activeItem);
}
});
Conclusion
Creating a premium, expandable navbar with dynamic animations and an intuitive interface elevates any web project. With CSS for design and JavaScript for interactivity, we’ve built a flexible component perfect for high-end applications like Gladiators Battle. This navbar's smooth transitions, glowing effects, and expandable functionality provide a professional and modern user experience.
🔹 Discover More:
Explore Gladiators Battle: Dive into the world of ancient warriors and experience strategic gameplay at https://gladiatorsbattle.com
Check Out Our GitHub: View code examples and documentation at https://github.com/HanGPIErr/Gladiators-Battle-Documentation
Connect on LinkedIn: Follow me at https://www.linkedin.com/in/pierre-romain-lopez/
Follow on X: Stay updated on design and gaming projects at https://x.com/GladiatorsBT
Stay tuned for more tutorials on creating premium web components with HTML, CSS, and JavaScript!
Top comments (0)