동적 효과 및 선택 표시기를 사용하여 울트라 프리미엄 확장형 Navbar를 만드는 방법-JS 튜토리얼-php.cn

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

소개

오늘의 튜토리얼에서는 세련된 디자인, 역동적인 애니메이션, 현대적인 효과를 갖춘 확장 가능한 초프리미엄 탐색 모음을 만드는 방법을 살펴보겠습니다. 이 고급 탐색 모음의 기능은 다음과 같습니다.

고급 미학을 위한 애니메이션 입자 배경.
호버 효과가 있는 빛나는 아이콘.
활성 섹션을 강조 표시하는 동적 선택 표시기
전문적인 모습을 위한 부드러운 애니메이션과 전환.
HTML, CSS 및 JavaScript로 구축된 이 탐색 모음은 고품질 웹 인터페이스에 적합하고 사용자 경험을 향상시켜 Gladiators Battle과 같은 대화형 게임을 포함한 모든 프로젝트에 탁월한 추가 기능을 제공합니다. 뛰어들어 보세요!

1단계: HTML 구조 설정
확장 가능한 탐색 모음은 Font Awesome 아이콘, 토글 버튼 및 사용자 정의 데이터 도구 설명 속성을 사용하여 각 아이콘에 대한 설명을 제공합니다. 이 마크업은 구축할 수 있는 유연한 구조를 제공합니다.

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

로그인 후 복사

토글 버튼
토글 버튼은 탐색 모음을 확장 및 축소하고 마우스 오버 시 회전 애니메이션을 제공합니다.

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

로그인 후 복사

3단계: 상호작용을 위한 JavaScript 추가
JavaScript는 탐색 모음의 확장 가능 상태, 활성 항목 및 선택 표시기를 제어합니다. 또한 크기 조정 시 표시기가 선택한 항목과 정렬된 상태로 유지됩니다.

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

로그인 후 복사

결론
동적 애니메이션과 직관적인 인터페이스를 갖춘 확장 가능한 고급 탐색 모음을 만들면 모든 웹 프로젝트가 향상됩니다. 디자인을 위한 CSS와 상호작용을 위한 JavaScript를 사용하여 Gladiators Battle과 같은 고급 애플리케이션에 완벽한 유연한 구성 요소를 구축했습니다. 이 탐색 모음의 부드러운 전환, 빛나는 효과 및 확장 가능한 기능은 전문적이고 현대적인 사용자 경험을 제공합니다.

? 더 알아보기:

검투사 전투 탐험: https://gladiatorsbattle.com에서 고대 전사의 세계로 뛰어들어 전략적인 게임플레이를 경험하세요
GitHub를 확인하세요: https://github.com/HanGPIErr/Gladiators-Battle-Documentation
에서 코드 예제와 문서를 확인하세요. LinkedIn에서 연결: https://www.linkedin.com/in/pierre-romain-lopez/
에서 나를 팔로우하세요. X 팔로우: https://x.com/GladiatorsBT
에서 디자인 및 게임 프로젝트에 대한 최신 소식을 받아보세요. HTML, CSS 및 JavaScript를 사용하여 프리미엄 웹 구성 요소를 만드는 방법에 대한 추가 튜토리얼을 계속 지켜봐 주시기 바랍니다!

위 내용은 동적 효과 및 선택 표시기를 사용하여 울트라 프리미엄 확장형 Navbar를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!