Menú de Navegación Moderno

Menú de Navegación Moderno

Un menú de navegación completamente responsive con animaciones suaves, menú hamburguesa para móviles, submenús desplegables y soporte para múltiples temas.

Características

• Diseño Responsive: Se adapta perfectamente a todos los tamaños de pantalla
• Menú Hamburguesa Móvil: Navegación optimizada para dispositivos móviles
• Submenús Desplegables: Menús anidados con animaciones suaves
• Animaciones Fluidas: Transiciones CSS elegantes y naturales
• Indicador de Estado Activo: Resalta la página actual
• Integración de Búsqueda: Barra de búsqueda incorporada
• Soporte de Temas: Compatible con modo claro y oscuro
• Accesibilidad: Navegación por teclado y lectores de pantalla

Demostración

<nav class="modern-nav">
  <div class="nav-container">
    
    <div class="nav-logo">
      <a href="#" class="logo-link">
        <svg class="logo-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
        </svg>
        <span class="logo-text">MiSitio</span>
      </a>
    </div>

    
    <div class="nav-search">
      <div class="search-container">
        <input type="text" class="search-input" placeholder="Buscar...">
        <button class="search-btn">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
        </button>
      </div>
    </div>

    
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link active">Inicio</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle">Productos</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">Aplicaciones Web</a></li>
          <li><a href="#" class="dropdown-link">Aplicaciones Móviles</a></li>
          <li><a href="#" class="dropdown-link">APIs</a></li>
          <li><a href="#" class="dropdown-link">Consultoría</a></li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle">Servicios</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">Desarrollo</a></li>
          <li><a href="#" class="dropdown-link">Diseño</a></li>
          <li><a href="#" class="dropdown-link">Marketing</a></li>
          <li class="dropdown-submenu">
            <a href="#" class="dropdown-link">Soporte</a>
            <ul class="submenu">
              <li><a href="#" class="dropdown-link">24/7</a></li>
              <li><a href="#" class="dropdown-link">Empresarial</a></li>
              <li><a href="#" class="dropdown-link">Premium</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Acerca de</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contacto</a>
      </li>
    </ul>

    
    <div class="nav-actions">
      <button class="theme-toggle" aria-label="Cambiar tema">
        <svg class="theme-icon sun" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z"/>
          <path d="M12 2l1.09 2.09L15 3l-1.09 1.09L12 6 10.91 4.91 9 3l2.09-1.09L12 2zm0 14l1.09 2.09L15 17l-1.09 1.09L12 20l-1.09-1.91L9 17l2.09-1.09L12 16z"/>
        </svg>
        <svg class="theme-icon moon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      </button>
      <a href="#" class="btn-primary">Comenzar</a>
    </div>

    
    <button class="mobile-toggle" aria-label="Abrir menú">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>
  </div>

  
  <div class="mobile-overlay"></div>
</nav>

.modern-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}.nav-logo .logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  color: #3b82f6;
}.nav-search {
  flex: 1;
  max-width: 400px;
  margin: 0 2rem;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  border: 2px solid #e5e7eb;
  border-radius: 50px;
  background: #f9fafb;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-btn {
  position: absolute;
  right: 0.5rem;
  padding: 0.5rem;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.search-btn:hover {
  background: #f3f4f6;
  color: #3b82f6;
}

.search-btn svg {
  width: 20px;
  height: 20px;
}.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  color: #4b5563;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #3b82f6;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1rem;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
  border-radius: 1px;
}.dropdown {
  position: relative;
}

.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #4b5563;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dropdown-link:hover {
  background: #f3f4f6;
  color: #3b82f6;
}.dropdown-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 150px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.dropdown-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: #e5e7eb;
}

.theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.theme-icon.moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}

.dark .theme-icon.sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}

.dark .theme-icon.moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background: #4b5563;
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}.dark .modern-nav {
  background: rgba(17, 24, 39, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .nav-logo .logo-link {
  color: white;
}

.dark .search-input {
  background: #374151;
  border-color: #4b5563;
  color: white;
}

.dark .search-input:focus {
  background: #4b5563;
  border-color: #3b82f6;
}

.dark .nav-link {
  color: #d1d5db;
}

.dark .nav-link:hover,
.dark .nav-link.active {
  color: #60a5fa;
}

.dark .dropdown-menu,
.dark .submenu {
  background: #374151;
}

.dark .dropdown-link {
  color: #d1d5db;
}

.dark .dropdown-link:hover {
  background: #4b5563;
  color: #60a5fa;
}

.dark .theme-toggle {
  background: #4b5563;
}

.dark .theme-toggle:hover {
  background: #6b7280;
}

.dark .hamburger-line {
  background: #d1d5db;
}@media (max-width: 1024px) {
  .nav-search {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-menu,
  .nav-actions .btn-primary {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .nav-menu.mobile-active {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    gap: 1rem;
    overflow-y: auto;
    z-index: 1000;
  }

  .dark .nav-menu.mobile-active {
    background: #1f2937;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .dark .nav-link {
    border-bottom-color: #374151;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: #f9fafb;
    margin-top: 0.5rem;
    border-radius: 8px;
  }

  .dark .dropdown-menu {
    background: #374151;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 0.5rem;
  }

  .logo-text {
    display: none;
  }

  .nav-actions {
    gap: 0.5rem;
  }
}

class ModernNavigation {
  constructor(selector) {
    this.nav = document.querySelector(selector);
    this.mobileToggle = this.nav.querySelector('.mobile-toggle');
    this.navMenu = this.nav.querySelector('.nav-menu');
    this.overlay = this.nav.querySelector('.mobile-overlay');
    this.themeToggle = this.nav.querySelector('.theme-toggle');
    this.searchInput = this.nav.querySelector('.search-input');
    this.dropdowns = this.nav.querySelectorAll('.dropdown');
    
    this.isMenuOpen = false;
    this.currentTheme = localStorage.getItem('theme') || 'light';
    
    this.init();
  }

  init() {
    this.setupEventListeners();
    this.setupTheme();
    this.setupSearch();
    this.setupDropdowns();
    this.setupScrollEffect();
    this.setupKeyboardNavigation();
  }

  setupEventListeners() {

    this.mobileToggle.addEventListener('click', () => this.toggleMobileMenu());

    this.overlay.addEventListener('click', () => this.closeMobileMenu());

    this.themeToggle.addEventListener('click', () => this.toggleTheme());

    window.addEventListener('resize', () => {
      if (window.innerWidth > 768 && this.isMenuOpen) {
        this.closeMobileMenu();
      }
    });

    this.navMenu.addEventListener('click', (e) => {
      if (e.target.classList.contains('nav-link') && this.isMenuOpen) {
        this.closeMobileMenu();
      }
    });
  }

  toggleMobileMenu() {
    this.isMenuOpen = !this.isMenuOpen;
    
    this.mobileToggle.classList.toggle('active', this.isMenuOpen);
    this.navMenu.classList.toggle('mobile-active', this.isMenuOpen);
    this.overlay.classList.toggle('active', this.isMenuOpen);

    document.body.style.overflow = this.isMenuOpen ? 'hidden' : '';

    this.mobileToggle.setAttribute('aria-expanded', this.isMenuOpen);
  }

  closeMobileMenu() {
    this.isMenuOpen = false;
    this.mobileToggle.classList.remove('active');
    this.navMenu.classList.remove('mobile-active');
    this.overlay.classList.remove('active');
    document.body.style.overflow = '';
    this.mobileToggle.setAttribute('aria-expanded', 'false');
  }

  setupTheme() {
    document.documentElement.classList.toggle('dark', this.currentTheme === 'dark');
  }

  toggleTheme() {
    this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
    document.documentElement.classList.toggle('dark', this.currentTheme === 'dark');
    localStorage.setItem('theme', this.currentTheme);

    window.dispatchEvent(new CustomEvent('themeChanged', {
      detail: { theme: this.currentTheme }
    }));
  }

  setupSearch() {
    if (!this.searchInput) return;
    
    let searchTimeout;
    
    this.searchInput.addEventListener('input', (e) => {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        this.performSearch(e.target.value);
      }, 300);
    });

    this.searchInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        this.performSearch(e.target.value);
      }
    });
  }

  performSearch(query) {
    if (query.trim().length < 2) return;

    window.dispatchEvent(new CustomEvent('navSearch', {
      detail: { query: query.trim() }
    }));
    
    console.log('Buscando:', query);
  }

  setupDropdowns() {
    this.dropdowns.forEach(dropdown => {
      const toggle = dropdown.querySelector('.dropdown-toggle');
      const menu = dropdown.querySelector('.dropdown-menu');
      
      if (!toggle || !menu) return;

      dropdown.addEventListener('mouseenter', () => {
        if (window.innerWidth > 768) {
          this.showDropdown(dropdown);
        }
      });
      
      dropdown.addEventListener('mouseleave', () => {
        if (window.innerWidth > 768) {
          this.hideDropdown(dropdown);
        }
      });

      toggle.addEventListener('click', (e) => {
        if (window.innerWidth <= 768) {
          e.preventDefault();
          this.toggleDropdown(dropdown);
        }
      });
    });
  }

  showDropdown(dropdown) {
    const menu = dropdown.querySelector('.dropdown-menu');
    menu.style.display = 'block';
    setTimeout(() => {
      menu.classList.add('show');
    }, 10);
  }

  hideDropdown(dropdown) {
    const menu = dropdown.querySelector('.dropdown-menu');
    menu.classList.remove('show');
    setTimeout(() => {
      menu.style.display = 'none';
    }, 300);
  }

  toggleDropdown(dropdown) {
    const menu = dropdown.querySelector('.dropdown-menu');
    const isVisible = menu.style.display === 'block';
    
    if (isVisible) {
      this.hideDropdown(dropdown);
    } else {

      this.dropdowns.forEach(d => {
        if (d !== dropdown) this.hideDropdown(d);
      });
      this.showDropdown(dropdown);
    }
  }

  setupScrollEffect() {
    let lastScrollY = window.scrollY;
    
    window.addEventListener('scroll', () => {
      const currentScrollY = window.scrollY;

      if (currentScrollY > lastScrollY && currentScrollY > 100) {
        this.nav.style.transform = 'translateY(-100%)';
      } else {
        this.nav.style.transform = 'translateY(0)';
      }

      const opacity = Math.min(currentScrollY / 100, 0.95);
      this.nav.style.background = `rgba(255, 255, 255, ${opacity})`;
      
      if (document.documentElement.classList.contains('dark')) {
        this.nav.style.background = `rgba(17, 24, 39, ${opacity})`;
      }
      
      lastScrollY = currentScrollY;
    });
  }

  setupKeyboardNavigation() {
    this.nav.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.isMenuOpen) {
        this.closeMobileMenu();
      }
    });

    const focusableElements = this.nav.querySelectorAll(
      'a, button, input, [tabindex]:not([tabindex="-1"])'
    );
    
    focusableElements.forEach((element, index) => {
      element.addEventListener('keydown', (e) => {
        if (e.key === 'Tab') {

          if (e.shiftKey && index === 0) {
            e.preventDefault();
            focusableElements[focusableElements.length - 1].focus();
          } else if (!e.shiftKey && index === focusableElements.length - 1) {
            e.preventDefault();
            focusableElements[0].focus();
          }
        }
      });
    });
  }

  setActiveLink(href) {
    const links = this.nav.querySelectorAll('.nav-link');
    links.forEach(link => {
      link.classList.toggle('active', link.getAttribute('href') === href);
    });
  }

  addMenuItem(item, parentSelector = '.nav-menu') {
    const parent = this.nav.querySelector(parentSelector);
    if (!parent) return;
    
    const li = document.createElement('li');
    li.className = 'nav-item';
    li.innerHTML = `<a href="${item.href}" class="nav-link">${item.text}</a>`;
    
    parent.appendChild(li);
  }

  updateSearchPlaceholder(text) {
    if (this.searchInput) {
      this.searchInput.placeholder = text;
    }
  }

  destroy() {

    this.mobileToggle.removeEventListener('click', this.toggleMobileMenu);
    this.overlay.removeEventListener('click', this.closeMobileMenu);
    this.themeToggle.removeEventListener('click', this.toggleTheme);

    document.body.style.overflow = '';
    this.nav.style.transform = '';
    this.nav.style.background = '';
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const navigation = new ModernNavigation('.modern-nav');

  window.modernNav = navigation;

  window.addEventListener('navSearch', (e) => {
    console.log('Búsqueda realizada:', e.detail.query);

  });
  
  window.addEventListener('themeChanged', (e) => {
    console.log('Tema cambiado a:', e.detail.theme);

  });
});

Ejemplos de Uso

Configuración Básica

const nav = new ModernNavigation('.modern-nav');

nav.setActiveLink('/productos');

nav.addMenuItem({
  href: '/blog',
  text: 'Blog'
});

Integración con Router

function updateNavigation(currentPath) {
  window.modernNav.setActiveLink(currentPath);
}

window.addEventListener('popstate', () => {
  updateNavigation(window.location.pathname);
});

Búsqueda Personalizada

window.addEventListener('navSearch', async (e) => {
  const query = e.detail.query;
  
  try {
    const results = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    const data = await results.json();

    displaySearchResults(data);
  } catch (error) {
    console.error('Error en la búsqueda:', error);
  }
});

API de Métodos

Opciones de Personalización

Variables CSS

:root {
  --nav-height: 70px;
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.1);
  --nav-text: #4b5563;
  --nav-text-hover: #3b82f6;
  --nav-active: #3b82f6;
  --dropdown-bg: white;
  --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  --search-bg: #f9fafb;
  --search-border: #e5e7eb;
  --search-focus: #3b82f6;
}

Configuración de Tema

const navConfig = {
  autoHide: true,
  searchEnabled: true,
  themeToggle: true,
  mobileBreakpoint: 768,
  scrollThreshold: 100
};

const nav = new ModernNavigation('.modern-nav', navConfig);

Accesibilidad

• Navegación por Teclado: Soporte completo para Tab, Enter y Escape
• ARIA Labels: Etiquetas descriptivas para lectores de pantalla
• Contraste: Cumple con WCAG 2.1 AA
• Focus Visible: Indicadores claros de foco
• Semántica: HTML semántico con roles apropiados

Soporte de Navegadores

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• iOS Safari 12+
• Android Chrome 60+

Consideraciones de Rendimiento

• CSS Optimizado: Uso eficiente de transformaciones y transiciones
• JavaScript Ligero: ~8KB minificado y gzipped
• Lazy Loading: Carga diferida de elementos no críticos
• Debounced Search: Búsqueda optimizada con retraso
• Event Delegation: Gestión eficiente de eventos

Ejemplo de Integración

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio Web</title>
  <link rel="stylesheet" href="navigation.css">
</head>
<body>
  
  <nav class="modern-nav">
    
  </nav>
  
  
  <main style="margin-top: 70px; padding: 2rem;">
    <h1>Contenido Principal</h1>
    <p>Tu contenido aquí...</p>
  </main>
  
  <script src="navigation.js"></script>
  <script>

    document.addEventListener('DOMContentLoaded', () => {
      const nav = new ModernNavigation('.modern-nav');

      window.addEventListener('navSearch', (e) => {

        console.log('Buscando:', e.detail.query);
      });
    });
  </script>
</body>
</html>