导航栏文字点击渐隐及右至左淡入效果实现方案咨询

Got it, let's tackle both of these navigation effects with clean, easy-to-customize code—no fancy libraries required, just CSS and a touch of JavaScript. Here's how to do it:

1. Click-to-Fade Navigation Links #

This effect is straightforward: we'll use CSS transitions to make links smoothly fade out when clicked, with a tiny bit of JS to trigger the state change. You can tweak the fade speed or add extra flourishes like scaling if you want.

HTML #

<nav class="main-nav">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">About</a>
  <a href="#" class="nav-link">Services</a>
  <a href="#" class="nav-link">Contact</a>
</nav>

CSS #

.nav-link {
  /* Base link styles */
  display: inline-block;
  margin: 0 1rem;
  padding: 0.5rem;
  color: #333;
  text-decoration: none;
  /* Smooth transition for opacity changes */
  transition: opacity 0.3s ease;
}

/* Faded state for links */
.nav-link.faded {
  opacity: 0;
}

JavaScript #

// Grab all navigation links
const navLinks = document.querySelectorAll('.nav-link');

navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // Skip link navigation if needed
    link.classList.add('faded');
    
    // Optional: Reset the link's visibility after a delay
    setTimeout(() => {
      link.classList.remove('faded');
    }, 1500);
  });
});

Customization Tip: Adjust the 0.3s value in the transition to make the fade faster or slower. Add transform: scale(0.9) to the .faded class if you want a shrink-and-fade combo.

2. Hamburger Menu: Right-to-Left Fade-In Navigation List #

For this effect (matching the style you referenced), we'll animate menu items to slide in from the right and fade in one after another when the hamburger is clicked. We'll use CSS transitions with staggered delays and JS to toggle the menu's active state.

HTML #

<nav class="hamburger-nav">
  <button class="hamburger-btn">☰</button>
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS #

/* Base nav container styles */
.hamburger-nav {
  position: relative;
}

.hamburger-btn {
  font-size: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-list {
  /* Hide menu by default */
  position: absolute;
  top: 100%;
  right: 0;
  list-style: none;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* Initial state: hidden and shifted right */
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  /* Smooth transition for the menu container */
  transition: opacity 0.3s ease;
}

/* Active state: show menu */
.nav-list.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Animate individual list items */
.nav-list li {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
}

.nav-list.active li {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger animation for each item */
.nav-list.active li:nth-child(1) { transition-delay: 0.1s; }
.nav-list.active li:nth-child(2) { transition-delay: 0.2s; }
.nav-list.active li:nth-child(3) { transition-delay: 0.3s; }
.nav-list.active li:nth-child(4) { transition-delay: 0.4s; }

/* Optional link styles */
.nav-list a {
  display: block;
  padding: 0.5rem 0;
  color: #333;
  text-decoration: none;
}

JavaScript #

const hamburgerBtn = document.querySelector('.hamburger-btn');
const navList = document.querySelector('.nav-list');

hamburgerBtn.addEventListener('click', () => {
  navList.classList.toggle('active');
  // Swap hamburger icon for an 'X' when menu is open
  hamburgerBtn.textContent = navList.classList.contains('active') ? '✕' : '☰';
});

Customization Tips:

• Change translateX(20px) to adjust how far items slide in from the right.
• Modify the transition-delay values to speed up or slow down the staggered animation.
• Adjust the 0.3s transition duration to make the overall animation faster/slower.
• Replace the text icons with SVGs for a more polished look if desired.

内容的提问来源于stack exchange，提问作者DilWig