超级菜单组件 - Memphis Earth Tones Food/Restaurant

<nav class="bg-amber-100 dark:bg-stone-900 border-b-4 border-amber-300 dark:border-stone-700 font-sans">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-3xl font-extrabold tracking-tight relative">
      <span class="block absolute -top-1 -left-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 transform rotate-45"></span>
      <span class="block relative z-10">FoodieHub</span>
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300 focus:outline-none">Menu <svg class="w-4 h-4 ml-1 inline-block transform group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-4 w-[600px] p-6 bg-lime-50 dark:bg-stone-800 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out transform scale-95 group-hover:scale-100 border-4 border-lime-300 dark:border-stone-700 grid grid-cols-2 gap-6" style="clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 5px) calc(100% - 10px), 50% 100%, calc(50% - 5px) calc(100% - 10px), 0 calc(100% - 10px));">
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-orange-400 dark:bg-orange-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">🍴</span> Popular Categories
            </h3>
            <ul class="space-y-3">
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Pizzas & Pasta</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Burgers & Sandwiches</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Asian Delights</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Healthy Options</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Desserts & Drinks</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-purple-400 dark:bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">✨</span> Today's Specials
            </h3>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=1" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Spicy Beef Tacos</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Authentic Mexican flavor, limited time!</p>
              </div>
            </a>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group mt-3 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=2" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Creamy Garlic Pasta</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Vegetarian option, rich and delightful.</p>
              </div>
            </a>
            <div class="mt-4 flex justify-center">
                <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-sm transform hover:scale-105 active:scale-95 relative overflow-hidden group">
                    <span class="absolute top-0 left-0 w-full h-full bg-orange-600 dark:bg-orange-700 transform scale-x-0 origin-right transition-transform duration-300 group-hover:scale-x-100 group-hover:origin-left"></span>
                    <span class="relative z-10">View All Specials</span>
                </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">About Us</a>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hidden md:inline-block bg-lime-200 dark:bg-stone-700 hover:bg-lime-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
            <svg class="w-6 h-6 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </button>
        <button id="mobile-menu-button" class="md:hidden hamburger p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
          <span class="hamburger-line block w-6 h-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
        </button>
    </div>
  </div>

  <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-amber-100 dark:bg-stone-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto pt-20">
    <div class="p-4 flex flex-col space-y-4">
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Home</a>
      <div class="relative">
        <button class="w-full text-left py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 flex justify-between items-center transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Menu
          <svg class="w-5 h-5 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="hidden mt-4 p-4 bg-lime-50 dark:bg-stone-800 rounded-lg shadow-inner border-2 border-lime-300 dark:border-stone-700">
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mb-3 border-orange-300 dark:border-orange-500">Popular Categories</h4>
          <ul class="space-y-2">
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Pizzas & Pasta</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Burgers & Sandwiches</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Asian Delights</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Healthy Options</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Desserts & Drinks</a></li>
          </ul>
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mt-6 mb-3 border-purple-300 dark:border-purple-500">Today's Specials</h4>
          <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-2 rounded-md flex items-center space-x-2 mt-2 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
            <img src="https://picsum.photos/50/50?random=3" alt="Special Dish" class="rounded-sm object-cover">
            <div>
              <p class="font-semibold text-stone-800 dark:text-stone-100 text-sm">Cheesy Garlic Bread</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Perfect appetizer!</p>
            </div>
          </a>
        </div>
      </div>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">About Us</a>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Contact</a>
      <button class="px-4 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-lg transform hover:scale-105 active:scale-95 mt-4">
        <svg class="w-6 h-6 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Your Cart
      </button>
    </div>
    <button id="close-mobile-menu" class="absolute top-4 right-4 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
        <svg class="w-8 h-8 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const closeMobileMenuButton = document.getElementById('close-mobile-menu');

    function toggleMobileMenu() {
      mobileMenu.classList.toggle('translate-x-full');
      mobileMenuButton.classList.toggle('open'); // For hamburger icon animation
    }

    mobileMenuButton.addEventListener('click', toggleMobileMenu);
    closeMobileMenuButton.addEventListener('click', toggleMobileMenu);

    // Close menu when clicking outside (optional)
    // document.addEventListener('click', function(event) {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && !mobileMenu.classList.contains('translate-x-full')) {
    //     toggleMobileMenu();
    //   }
    // });

    // Hamburger animation (CSS only for transform, JS to toggle class)
    const style = document.createElement('style');
    style.innerHTML = `
      .hamburger-line:nth-child(1) { transform-origin: top left; }
      .hamburger-line:nth-child(3) { transform-origin: bottom left; }

      .hamburger.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 0px); }
      .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
      .hamburger.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, 1px); }
    `;
    document.head.appendChild(style);
  });
</script>