Category · Navigation Menus Difficulty Level · Advanced Published on · January 15, 2024

Magnetic Attraction Navigation Menu

An innovative navigation menu with magnetic attraction effects, dynamic layout adjustments, and smooth interactive animations that respond to cursor proximity

#magnetic #attraction #dynamic #interactive #physics #animation #menu

Responsive Design

Yes

Dark Mode Support

lines

625

Browser Compatibility

Live Preview

Interact with the component without leaving the page.

300px

An innovative navigation menu with magnetic attraction effects, dynamic layout adjustments, and smooth interactive animations that respond to cursor proximity.

Features

Magnetic Attraction: Menu items are drawn to cursor movement with realistic physics
Dynamic Field: Visual magnetic field that responds to mouse position
Interactive Particles: Floating particles that react to user interactions
Smooth Animations: Fluid transitions with custom easing functions
Custom Cursor: Magnetic cursor that changes based on hover states
Explosion Effects: Dramatic click animations with particle systems
Responsive Design: Adapts beautifully to all screen sizes

Usage

Perfect for:

Creative portfolios
Interactive websites
Modern web applications
Gaming interfaces
Tech company websites
Experimental designs

The menu creates an engaging magnetic experience where elements are naturally attracted to the cursor, providing intuitive and delightful user interactions.

HTML

lines

CSS

272

lines

JavaScript

311

lines

                <nav class="magnetic-menu">
  <div class="menu-container">
    <div class="magnetic-field"></div>
    <div class="logo">
      <span class="logo-text">MAGNETIC</span>
      <div class="magnetic-pulse"></div>
    </div>
    <ul class="menu-items">
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="Home">
          <span class="link-text">Home</span>
          <div class="magnetic-aura"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="About">
          <span class="link-text">About</span>
          <div class="magnetic-aura"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="Services">
          <span class="link-text">Services</span>
          <div class="magnetic-aura"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="Portfolio">
          <span class="link-text">Portfolio</span>
          <div class="magnetic-aura"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="Contact">
          <span class="link-text">Contact</span>
          <div class="magnetic-aura"></div>
        </a>
      </li>
    </ul>
    <div class="magnetic-particles"></div>
  </div>
</nav>

              

                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}

.magnetic-menu {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 90%;
  max-width: 1000px;
}

.menu-container {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border-radius: 60px;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.magnetic-field {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(138, 43, 226, 0.3) 0%,
    rgba(30, 144, 255, 0.2) 30%,
    rgba(255, 20, 147, 0.1) 60%,
    transparent 100%
  );
  border-radius: 60px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.logo-text {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(45deg, #8a2be2, #1e90ff, #ff1493);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: magnetic-glow 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.magnetic-pulse {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #8a2be2 0%, #1e90ff 50%, #ff1493 100%);
  border-radius: 50%;
  animation: pulse-magnetic 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
}

.menu-items {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.menu-link {
  position: relative;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 15px 25px;
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: block;
  cursor: none;
}

.link-text {
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.magnetic-aura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(138, 43, 226, 0.4) 0%,
    rgba(30, 144, 255, 0.3) 40%,
    rgba(255, 20, 147, 0.2) 70%,
    transparent 100%
  );
  border-radius: 30px;
  transform: scale(0);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
}

.menu-link:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3);
  color: white;
}

.menu-link:hover .magnetic-aura {
  transform: scale(1.2);
  opacity: 1;
  animation: magnetic-ripple 1s ease-out;
}

.menu-link:hover .link-text {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.magnetic-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #8a2be2, #1e90ff);
  border-radius: 50%;
  animation: float-particle 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
}

@keyframes magnetic-glow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes pulse-magnetic {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.5);
    opacity: 0.7;
  }
}

@keyframes magnetic-ripple {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
    opacity: 0.9;
  }
}

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #8a2be2, #1e90ff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.1s ease;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
}

.custom-cursor.hover {
  transform: scale(2);
  background: radial-gradient(circle, #ff1493, #8a2be2);
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    border-radius: 40px;
  }
  
  .menu-items {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu-link {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  
  .logo-text {
    font-size: 1.6rem;
  }
  
  .magnetic-menu {
    width: 95%;
  }
  
  body {
    cursor: auto;
  }
  
  .custom-cursor {
    display: none;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  const menuContainer = document.querySelector('.menu-container');
  const menuLinks = document.querySelectorAll('.menu-link');
  const magneticField = document.querySelector('.magnetic-field');
  const particlesContainer = document.querySelector('.magnetic-particles');
  
  // Custom cursor
  const cursor = document.createElement('div');
  cursor.className = 'custom-cursor';
  document.body.appendChild(cursor);
  
  let mouseX = 0;
  let mouseY = 0;
  let cursorX = 0;
  let cursorY = 0;
  
  // Mouse tracking
  document.addEventListener('mousemove', function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    
    // Update magnetic field
    const rect = menuContainer.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    
    magneticField.style.setProperty('--mouse-x', x + '%');
    magneticField.style.setProperty('--mouse-y', y + '%');
  });
  
  // Smooth cursor animation
  function animateCursor() {
    const dx = mouseX - cursorX;
    const dy = mouseY - cursorY;
    
    cursorX += dx * 0.1;
    cursorY += dy * 0.1;
    
    cursor.style.left = cursorX + 'px';
    cursor.style.top = cursorY + 'px';
    
    requestAnimationFrame(animateCursor);
  }
  
  animateCursor();
  
  // Magnetic attraction effect
  menuLinks.forEach(link => {
    link.addEventListener('mouseenter', function() {
      cursor.classList.add('hover');
      
      // Create magnetic attraction
      this.style.transform = 'translateY(-5px) scale(1.05)';
      
      // Add magnetic distortion
      createMagneticDistortion(this);
    });
    
    link.addEventListener('mouseleave', function() {
      cursor.classList.remove('hover');
      this.style.transform = '';
    });
    
    link.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left - rect.width / 2;
      const y = e.clientY - rect.top - rect.height / 2;
      
      // Magnetic pull effect
      const distance = Math.sqrt(x * x + y * y);
      const maxDistance = 100;
      const force = Math.max(0, (maxDistance - distance) / maxDistance);
      
      const moveX = (x / rect.width) * 20 * force;
      const moveY = (y / rect.height) * 20 * force;
      
      this.style.transform = `translateY(-5px) scale(1.05) translate(\${moveX}px, \${moveY}px)`;
    });
    
    // Click magnetic explosion
    link.addEventListener('click', function(e) {
      e.preventDefault();
      createMagneticExplosion(this, e);
    });
  });
  
  // Create magnetic distortion effect
  function createMagneticDistortion(element) {
    const distortion = document.createElement('div');
    
    distortion.style.cssText = `
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      background: radial-gradient(
        circle,
        rgba(138, 43, 226, 0.3) 0%,
        rgba(30, 144, 255, 0.2) 40%,
        transparent 70%
      );
      border-radius: 50px;
      animation: magnetic-distort 0.8s ease-out;
      pointer-events: none;
      z-index: 1;
    `;
    
    element.appendChild(distortion);
    
    setTimeout(() => {
      if (distortion.parentNode) {
        distortion.parentNode.removeChild(distortion);
      }
    }, 800);
  }
  
  // Create magnetic explosion effect
  function createMagneticExplosion(element, event) {
    const explosion = document.createElement('div');
    const rect = element.getBoundingClientRect();
    
    explosion.style.cssText = `
      position: fixed;
      width: 200px;
      height: 200px;
      left: \${event.clientX - 100}px;
      top: \${event.clientY - 100}px;
      background: radial-gradient(
        circle,
        rgba(255, 20, 147, 0.8) 0%,
        rgba(138, 43, 226, 0.6) 30%,
        rgba(30, 144, 255, 0.4) 60%,
        transparent 100%
      );
      border-radius: 50%;
      animation: magnetic-explode 1s ease-out;
      pointer-events: none;
      z-index: 9998;
    `;
    
    document.body.appendChild(explosion);
    
    // Create particles
    for (let i = 0; i < 12; i++) {
      createMagneticParticle(event.clientX, event.clientY);
    }
    
    setTimeout(() => {
      if (explosion.parentNode) {
        explosion.parentNode.removeChild(explosion);
      }
    }, 1000);
  }
  
  // Create magnetic particles
  function createMagneticParticle(x, y) {
    const particle = document.createElement('div');
    const angle = Math.random() * Math.PI * 2;
    const velocity = 2 + Math.random() * 3;
    const size = 2 + Math.random() * 4;
    
    particle.style.cssText = `
      position: fixed;
      width: \${size}px;
      height: \${size}px;
      left: \${x}px;
      top: \${y}px;
      background: radial-gradient(circle, #ff1493, #8a2be2);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9997;
      box-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
    `;
    
    document.body.appendChild(particle);
    
    let particleX = x;
    let particleY = y;
    let life = 1;
    
    function animateParticle() {
      particleX += Math.cos(angle) * velocity;
      particleY += Math.sin(angle) * velocity;
      life -= 0.02;
      
      particle.style.left = particleX + 'px';
      particle.style.top = particleY + 'px';
      particle.style.opacity = life;
      particle.style.transform = `scale(\${life})`;
      
      if (life > 0) {
        requestAnimationFrame(animateParticle);
      } else {
        if (particle.parentNode) {
          particle.parentNode.removeChild(particle);
        }
      }
    }
    
    animateParticle();
  }
  
  // Generate floating particles
  function generateFloatingParticles() {
    for (let i = 0; i < 8; i++) {
      const particle = document.createElement('div');
      particle.className = 'particle';
      
      particle.style.left = Math.random() * 100 + '%';
      particle.style.top = Math.random() * 100 + '%';
      particle.style.animationDelay = Math.random() * 4 + 's';
      particle.style.animationDuration = (3 + Math.random() * 2) + 's';
      
      particlesContainer.appendChild(particle);
    }
  }
  
  generateFloatingParticles();
  
  // Add CSS animations
  const style = document.createElement('style');
  style.textContent = `
    @keyframes magnetic-distort {
      0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
      }
      50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
      }
      100% {
        transform: scale(1) rotate(360deg);
        opacity: 0;
      }
    }
    
    @keyframes magnetic-explode {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      50% {
        transform: scale(1.5);
        opacity: 0.8;
      }
      100% {
        transform: scale(3);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);
  
  // Magnetic field intensity based on proximity
  function updateMagneticIntensity() {
    const rect = menuContainer.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const distance = Math.sqrt(
      Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2)
    );
    
    const maxDistance = 300;
    const intensity = Math.max(0, (maxDistance - distance) / maxDistance);
    
    magneticField.style.opacity = intensity * 0.8;
    
    requestAnimationFrame(updateMagneticIntensity);
  }
  
  updateMagneticIntensity();
  
  // Magnetic menu container attraction
  menuContainer.addEventListener('mousemove', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    
    const moveX = (x / rect.width) * 10;
    const moveY = (y / rect.height) * 10;
    
    this.style.transform = `translate(\${moveX}px, \${moveY}px)`;
  });
  
  menuContainer.addEventListener('mouseleave', function() {
    this.style.transform = '';
  });
  
  // Keyboard navigation with magnetic effects
  let currentIndex = -1;
  
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Tab') {
      e.preventDefault();
      currentIndex = (currentIndex + 1) % menuLinks.length;
      
      menuLinks.forEach((link, index) => {
        if (index === currentIndex) {
          link.focus();
          link.style.transform = 'translateY(-5px) scale(1.05)';
          createMagneticDistortion(link);
        } else {
          link.style.transform = '';
        }
      });
    }
  });
});

              

Markdown to HTML Converter

Privacy Policy Generator

Magnetic Attraction Navigation Menu

Live Preview

Magnetic Attraction Navigation Menu

Features

Usage

Related Code Snippets

3D Flip Card FAQ

Animated Gradient FAQ

Cyberpunk FAQ Interface

Explore template packs