Comment créer une barre de navigation extensible Ultra Premium avec des effets dynamiques et un indicateur de sélection

Présentation

Dans le didacticiel d'aujourd'hui, nous allons expliquer la création d'une barre de navigation extensible ultra-premium avec un design élégant, des animations dynamiques et des effets modernes. Cette barre de navigation avancée comprend :

Un fond de particules animé pour une esthétique haut de gamme.
Icônes lumineuses avec effets de survol.
Un indicateur de sélection dynamique qui met en avant la section active.
Animations et transitions fluides pour un look professionnel.
Construite avec HTML, CSS et JavaScript, cette barre de navigation est parfaite pour les interfaces Web de haute qualité et améliore l'expérience utilisateur, ce qui en fait un excellent ajout à tout projet, y compris les jeux interactifs comme Gladiators Battle. Allons-y !

Étape 1 : Configuration de la structure HTML
Notre barre de navigation extensible utilise des icônes Font Awesome, un bouton bascule et des attributs d'info-bulle de données personnalisés pour fournir des descriptions pour chaque icône. Ce balisage nous donne une structure flexible sur laquelle s'appuyer.

  <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">



  <!-- Particle Background -->
  <div>



<p>Key HTML Elements<br>
Particle Background: Provides a subtle, animated effect behind the navbar for a high-end look.<br>
Toggle Button: Allows users to expand or collapse the navbar.<br>
Nav Items: Each item includes a tooltip, an icon, and some have notification badges.<br>
Selection Indicator: Highlights the active section with a glowing effect.<br>
Step 2: Styling the Navbar with CSS<br>
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.</p>

<p>Base Styles and Background Setup<br>
</p>

<pre class="brush:php;toolbar:false">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;
}

Bouton bascule
Le bouton bascule agrandit et réduit la barre de navigation et présente une animation rotative en survol.

.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);
}

Éléments de navigation et effets d'info-bulle
Chaque élément de navigation a un effet de survol avec un dégradé et un arrière-plan lumineux. Des info-bulles apparaissent avec un effet d'ombre douce pour guider les utilisateurs.

.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);
}

Indicateur de sélection et badge de notification

.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;
}

Étape 3 : Ajout de JavaScript pour l'interactivité
JavaScript contrôle l'état extensible de la barre de navigation, l'élément actif et l'indicateur de sélection. Il maintient également l'indicateur aligné avec l'élément sélectionné lors du redimensionnement.

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
La création d'une barre de navigation premium et extensible avec des animations dynamiques et une interface intuitive élève n'importe quel projet Web. Avec CSS pour la conception et JavaScript pour l'interactivité, nous avons créé un composant flexible parfait pour les applications haut de gamme comme Gladiators Battle. Les transitions fluides, les effets lumineux et les fonctionnalités extensibles de cette barre de navigation offrent une expérience utilisateur professionnelle et moderne.

? Découvrez-en davantage :

Explorez Gladiators Battle : plongez dans le monde des anciens guerriers et découvrez un gameplay stratégique sur https://gladiatorsbattle.com
Consultez notre GitHub : consultez des exemples de code et de la documentation sur https://github.com/HanGPIErr/Gladiators-Battle-Documentation
Connectez-vous sur LinkedIn : Suivez-moi sur https://www.linkedin.com/in/pierre-romain-lopez/
Suivez X : restez informé des projets de conception et de jeux sur https://x.com/GladiatorsBT
Restez à l'écoute pour plus de didacticiels sur la création de composants Web premium avec HTML, CSS et JavaScript !