Cara Membuat Navbar Boleh Kembang Ultra Premium dengan Kesan Dinamik dan Penunjuk Pemilihan-tutorial js-php.cn

How to Create an Ultra Premium Expandable Navbar with Dynamic Effects and Selection Indicator

Pengenalan

Dalam tutorial hari ini, kami akan meneruskan penciptaan navbar ultra-premium yang boleh dikembangkan dengan reka bentuk yang anggun, animasi dinamik dan kesan moden. Ciri bar navigasi lanjutan ini:

Latar belakang zarah animasi untuk estetika mewah.
Ikon bercahaya dengan kesan tuding.
Penunjuk pemilihan dinamik yang menyerlahkan bahagian aktif.
Animasi dan peralihan yang lancar untuk penampilan profesional.
Dibina dengan HTML, CSS dan JavaScript, navbar ini sesuai untuk antara muka web berkualiti tinggi dan meningkatkan pengalaman pengguna, menjadikannya tambahan yang sangat baik untuk mana-mana projek, termasuk permainan interaktif seperti Gladiators Battle. Mari selami!

Langkah 1: Menyediakan Struktur HTML
Navbar boleh dikembangkan kami menggunakan ikon Font Hebat, butang togol dan atribut petua alat data tersuai untuk memberikan penerangan bagi setiap ikon. Penanda ini memberi kita struktur yang fleksibel untuk dibina.

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



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

Salin selepas log masuk

Butang Togol
Butang togol mengembang dan meruntuhkan bar navigasi serta menampilkan animasi berputar pada tuding.

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

Salin selepas log masuk

Item Nav dan Kesan Petua Alat
Setiap item nav mempunyai kesan tuding dengan kecerunan dan latar belakang yang bercahaya. Petua alat muncul dengan kesan bayangan lembut untuk membimbing pengguna.

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

Salin selepas log masuk

Penunjuk Pemilihan dan Lencana Pemberitahuan

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

Salin selepas log masuk

Langkah 3: Menambah JavaScript untuk Interaktiviti
JavaScript mengawal keadaan boleh dikembangkan bar navigasi, item aktif dan penunjuk pilihan. Ia juga memastikan penunjuk sejajar dengan item yang dipilih pada saiz semula.

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

Salin selepas log masuk

Kesimpulan
Mencipta navbar premium yang boleh dikembangkan dengan animasi dinamik dan antara muka intuitif meningkatkan mana-mana projek web. Dengan CSS untuk reka bentuk dan JavaScript untuk interaktiviti, kami telah membina komponen fleksibel yang sesuai untuk aplikasi mewah seperti Gladiators Battle. Peralihan lancar navbar ini, kesan bercahaya dan kefungsian boleh dikembangkan memberikan pengalaman pengguna yang profesional dan moden.

? Temui Lagi:

Terokai Pertempuran Gladiators: Terokai dunia pahlawan purba dan alami permainan strategik di https://gladiatorsbattle.com
Lihat GitHub Kami: Lihat contoh kod dan dokumentasi di https://github.com/HanGPIErr/Gladiators-Battle-Documentation
Sambung di LinkedIn: Ikuti saya di https://www.linkedin.com/in/pierre-romain-lopez/
Ikuti X: Ikuti perkembangan terkini tentang reka bentuk dan projek permainan di https://x.com/GladiatorsBT
Nantikan lebih banyak tutorial tentang mencipta komponen web premium dengan HTML, CSS dan JavaScript!

Atas ialah kandungan terperinci Cara Membuat Navbar Boleh Kembang Ultra Premium dengan Kesan Dinamik dan Penunjuk Pemilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!