検索コンポーネント

カテゴリ

コンポーネントハンバーガーメニュー

ハンバーガーメニュー

モバイルデバイスで一般的な3本線のアイコンメニュー

食品/レストランのハンバーガーメニューコンポーネント(メンフィスパステル)

パステルカラーのメンフィスデザインの美学を特徴とする、食品/レストランのウェブサイト向けのシンプルでレスポンシブなハンバーガーメニューコンポーネント。ダークモードのサポートが含まれています。

                <nav class="bg-pink-100 dark:bg-sky-950 p-4 shadow-md font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-orange-500 dark:text-orange-300 text-3xl font-bold tracking-tight transform -rotate-3 hover:scale-105 transition-transform duration-300 ease-in-out">
      <span class="block">YUM!</span>
      <span class="text-blue-400 dark:text-blue-200 text-sm block font-normal mt-0.5">Menu</span>
    </a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#home" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Home
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#menu" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Our Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#offers" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Special Offers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#contact" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <button class="px-6 py-2 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-lg font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out">
        Order Now!
      </button>
    </div>

    <!-- Mobile Hamburger Button (visible on small screens) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-purple-600 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8 transform rotate-6 hover:rotate-0 transition-transform duration-300 ease-in-out" 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, shown with JS) -->
  <div id="mobile-menu" class="md:hidden hidden bg-pink-50 dark:bg-sky-900 border-t border-purple-200 dark:border-sky-800 mt-4 py-4 rounded-b-lg shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#home" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Home
      </a>
      <a href="#menu" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Our Menu
      </a>
      <a href="#offers" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Special Offers
      </a>
      <a href="#contact" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Contact
      </a>
      <button class="mt-4 px-8 py-3 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-xl font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out w-4/5">
        Order Now!
      </button>
    </div>
  </div>
</nav>

<!-- JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
<\/script>

アールデコ調のスポーツ/フィットネスハンバーガーメニュー

アールデコ調の美学、パステルカラーの配色、ダークモードのサポートを備えた、複雑でレスポンシブなハンバーガーメニューコンポーネントで、スポーツやフィットネスのアプリケーションに適しています。

開けるプレビュー

                <div class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-sans overflow-hidden">
  <!-- Header Section -->
  <header class="relative z-20 p-4 sm:p-6 lg:p-8 flex items-center justify-between shadow-lg backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 border-b-4 border-opacity-70 border-purple-300 dark:border-gray-600">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50?random=1" alt="Team Logo" class="rounded-full shadow-md border-2 border-purple-400 dark:border-gray-500">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white tracking-wider uppercase text-shadow-art-deco">
        <span class="text-purple-600 dark:text-purple-300">Elite</span> <span class="text-pink-600 dark:text-pink-300">Athletics</span>
      </h1>
    </div>

    <!-- Mobile Hamburger Toggle -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="relative z-50 flex flex-col justify-between w-8 h-6 xl:hidden cursor-pointer group">
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:rotate-45 peer-checked:translate-y-2.5"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:opacity-0"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:-rotate-45 peer-checked:-translate-y-2.5"></span>
    </label>

    <!-- Desktop Navigation -->
    <nav class="hidden xl:flex space-x-8 text-lg font-semibold">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Schedule
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Team
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Results
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Shop
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
  </header>

  <!-- Mobile Navigation (Off-canvas) -->
  <nav class="fixed inset-0 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-950 dark:via-gray-850 dark:to-gray-750 flex flex-col justify-center items-center space-y-8 text-2xl font-bold transition-transform duration-500 -translate-x-full peer-checked:translate-x-0 z-40 shadow-xl overflow-y-auto px-4 py-16">
    <div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><pattern id=\'art-deco-pattern\' width=\'100\' height=\'100\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 0 L100 0 L50 50 Z M50 50 L100 100 L0 100 Z\' fill=\'none\' stroke=\'rgba(0,0,0,0.1)\' stroke-width=\'1\'/><circle cx=\'50\' cy=\'50\' r=\'5\' fill=\'rgba(0,0,0,0.1)\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23art-deco-pattern)\'/></svg>'); background-size: 100px 100px;"></div>

    <div class="relative z-10 flex flex-col items-center space-y-6 sm:space-y-8">
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-purple-200 dark:hover:bg-gray-600 hover:text-purple-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-purple-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[50ms]">
        <i class="fas fa-home mr-3 text-purple-600 dark:text-purple-300"></i> Home
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-pink-200 dark:hover:bg-gray-600 hover:text-pink-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-pink-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[100ms]">
        <i class="fas fa-calendar-alt mr-3 text-pink-600 dark:text-pink-300"></i> Schedule
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-yellow-200 dark:hover:bg-gray-600 hover:text-yellow-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-yellow-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[150ms]">
        <i class="fas fa-users mr-3 text-yellow-600 dark:text-yellow-300"></i> Team
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-green-200 dark:hover:bg-gray-600 hover:text-green-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-green-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[200ms]">
        <i class="fas fa-clipboard-list mr-3 text-green-600 dark:text-green-300"></i> Results
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-blue-200 dark:hover:bg-gray-600 hover:text-blue-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-blue-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[250ms]">
        <i class="fas fa-shopping-cart mr-3 text-blue-600 dark:text-blue-300"></i> Shop
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-indigo-200 dark:hover:bg-gray-600 hover:text-indigo-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-indigo-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[300ms]">
        <i class="fas fa-envelope mr-3 text-indigo-600 dark:text-indigo-300"></i> Contact
      </a>
    </div>

    <!-- Social Media Links -->
    <div class="relative z-10 flex space-x-6 mt-8 sm:mt-12 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[350ms]">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors text-3xl"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-pink-600 dark:hover:text-pink-300 transition-colors text-3xl"><i class="fab fa-twitter"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors text-3xl"><i class="fab fa-instagram"></i></a>
    </div>

    <!-- User Mini-Profile -->
    <div class="relative z-10 flex items-center space-x-4 mt-8 sm:mt-12 p-4 bg-white/70 dark:bg-gray-800/70 rounded-lg shadow-lg border-2 border-purple-300 dark:border-gray-600 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[400ms]">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-gray-500 shadow-md">
      <div>
        <p class="text-gray-800 dark:text-gray-100 text-lg font-semibold">John "The Bolt" Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Athlete - Running</p>
      </div>
    </div>
  </nav>

  <!-- Main Content Area (for visual context) -->
  <main class="p-8 text-center text-gray-800 dark:text-gray-200 z-10 relative">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 mt-12 leading-tight text-shadow-art-deco-light">
      Unleash Your Inner <span class="text-pink-600 dark:text-pink-300">Champion</span>
    </h2>
    <p class="text-lg sm:text-xl max-w-2xl mx-auto mb-12 opacity-90">
      Dedicated to excellence in sports and fitness. Join our community and elevate your performance.
    </p>
    <div class="flex justify-center flex-wrap gap-6">
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-purple-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-purple-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=2" alt="Training Session">
          <h3 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-200">Training Sessions</h3>
          <p class="text-gray-700 dark:text-gray-300">Discover personalized training programs for all skill levels.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-pink-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-pink-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=3" alt="Team Sports">
          <h3 class="text-2xl font-bold mb-2 text-pink-700 dark:text-pink-200">Team Sports</h3>
          <p class="text-gray-700 dark:text-gray-300">Join a team and experience the thrill of competitive play.</p>
        </div>
      </div>
    </div>
  </main>

  <!-- Art Deco Geometric Background Elements (Absolute Positioning) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <!-- Top Left Triangle -->
    <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 bg-purple-300 dark:bg-gray-700 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left "></div>
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-pink-300 dark:bg-gray-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left translate-x-16 translate-y-16 "></div>

    <!-- Bottom Right Chevron -->
    <div class="absolute bottom-0 right-0 w-64 h-32 sm:w-80 sm:h-40 bg-yellow-300 dark:bg-gray-700 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right"></div>
    <div class="absolute bottom-0 right-0 w-48 h-24 sm:w-64 sm:h-32 bg-purple-300 dark:bg-gray-600 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right -translate-x-16 -translate-y-8"></div>

    <!-- Middle Horizontal Bars -->
    <div class="absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 h-8 bg-pink-300 dark:bg-gray-700 rounded-full transform rotate-3 z-0"></div>
    <div class="absolute left-1/4 top-[calc(50%+2rem)] -translate-y-1/2 w-1/2 h-8 bg-purple-300 dark:bg-gray-600 rounded-full transform -rotate-3 z-0"></div>
  </div>

  <style>
    .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(109, 40, 217, 0.2), 4px 4px 0px rgba(219, 39, 119, 0.2);
      /* Combined purple and pink shadow */
    }

    .dark .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(82, 82, 91, 0.5), 4px 4px 0px rgba(37, 99, 235, 0.2);
    }

    .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(109, 40, 217, 0.1), 2px 2px 0px rgba(219, 39, 119, 0.1);
      /* Lighter for main heading copy */
    }

    .dark .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(82, 82, 91, 0.3), 2px 2px 0px rgba(37, 99, 235, 0.1);
    }

    /* Prevent scrolling when menu is open */
    body.menu-open {
      overflow: hidden;
    }

    /* Use JS for adding/removing menu-open class on body */
    /* Example (add this script manually elsewhere, not in the provided HTML context): */
    /*
    document.getElementById('menu-toggle').addEventListener('change', function() {
      if (this.checked) {
        document.body.classList.add('menu-open');
      } else {
        document.body.classList.remove('menu-open');
      }
    });
    */
  </style>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

ハンバーガーメニューコンポーネント

グラデーションレインボーカラースキームのミニマリストでレスポンシブなハンバーガーメニューコンポーネントで、デート/ソーシャルプラットフォーム向けに設計されており、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
  <div class="flex items-center justify-between">
    <a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
      Connectify
    </a>
    <!-- Mobile menu button -->
    <button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
      <svg class="w-6 h-6 text-gray-800 dark:text-gray-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="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>

  <!-- Mobile menu content -->
  <nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
    <a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
    <a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
    <a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
    <a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
    <a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
  </nav>
</div>

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

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

ハンバーガーメニューコンポーネント

メンフィスデザインにインスパイアされたレスポンシブハンバーガーメニューコンポーネントで、セピア/ブラウンの配色で、エンターテインメント/メディアプラットフォームに適しています。ダークモードのサポートと遊び心のある幾何学的なアクセントが含まれています。

開けるプレビュー

                <div class="relative bg-amber-50 dark:bg-stone-900 overflow-hidden font-sans text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-6 md:py-8 relative z-10">
    <div class="flex items-center justify-between">
      <div class="flex-shrink-0">
        <a href="#" class="text-2xl md:text-3xl font-extrabold tracking-tight text-amber-800 dark:text-amber-300 transform -skew-x-6 inline-block py-1 px-3 border-4 border-amber-800 dark:border-amber-300 rotate-2">
          STREAMIFY
        </a>
      </div>
      <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Home</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Movies</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Series</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Explore</a>
        <button class="px-6 py-2 bg-amber-800 text-amber-50 rounded-full font-bold shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
          Sign In
        </button>
      </div>
      <div class="md:hidden flex items-center">
        <button id="menu-button" class="text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-125">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Invisible by default, will be toggled by JS) -->
  <div id="mobile-menu" class="absolute top-0 left-0 w-full h-screen bg-stone-100 dark:bg-stone-950 transform -translate-x-full transition-transform duration-500 ease-in-out md:hidden flex flex-col justify-center items-center space-y-8 z-50 overflow-hidden">
    <button id="close-menu-button" class="absolute top-6 right-6 text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-150">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse">Home</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-100">Movies</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-200">Series</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-300">Explore</a>
    <button class="mt-8 px-8 py-3 bg-amber-800 text-amber-50 rounded-full font-bold text-xl shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
      Join Now
    </button>
  </div>

  <!-- Memphis-style geometric accents -->
  <div class="absolute top-0 -left-1/4 w-3/4 h-full bg-amber-200 dark:bg-stone-700 opacity-60 transform -skew-y-6 rotate-3 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-0 -right-1/4 w-1/2 h-2/3 bg-amber-400 dark:bg-stone-600 opacity-60 transform skew-y-3 -rotate-6 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute top-1/4 right-1/4 w-32 h-32 bg-amber-600 dark:bg-amber-800 opacity-70 transform rotate-45 rounded-full z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-1/4 left-1/4 w-16 h-16 bg-amber-300 dark:bg-stone-500 opacity-80 transform -rotate-30 border-8 border-dashed border-amber-800 dark:border-stone-400 z-0 pointer-events-none"></div>

</div>

<style>
  /* Custom animation delay for pulse effect */
  .animation-delay-100 {
    animation-delay: 0.1s;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-300 {
    animation-delay: 0.3s;
  }
</style>

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

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('-translate-x-full');
      mobileMenu.classList.add('translate-x-0');
      document.body.style.overflow = 'hidden'; // Prevent body scroll when menu is open
    });

    closeMenuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      document.body.style.overflow = ''; // Allow body scroll
    });

    // Close menu if a menu item is clicked (optional)
    mobileMenu.querySelectorAll('a').forEach(item => {
      item.addEventListener('click', function() {
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      });
    });

    // Close menu on resize if it's open and transitions to desktop view
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      }
    });
  });
</script>

ハンバーガーメニューコンポーネント

キャンディー/甘い色の複雑な紙/印刷物にインスパイアされたハンバーガーメニューコンポーネントで、政府/公共サービスのWebサイト向けに設計されています。ダークモードをサポートするレスポンシブデザインが特徴で、物理的な紙を模倣し、明るく陽気な色の要素を印刷します。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-50 min-h-screen relative">

  <!-- Main Content Area (for demonstration) -->
  <div class="p-8 md:p-12 lg:p-16 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-pink-700 dark:text-pink-400 mb-4 text-center leading-tight tracking-tight drop-shadow-md">
      Public Service Portal
    </h1>
    <p class="text-lg md:text-xl text-center max-w-2xl text-lime-700 dark:text-lime-300 mb-8">
      Your trusted source for government information and public services. Explore our resources.
    </p>
    <img src="https://picsum.photos/seed/public/800/450" alt="Placeholder Image" class="rounded-lg shadow-xl mb-8 border-4 border-l-rose-300 border-t-purple-300 border-r-mint-300 border-b-yellow-300 dark:border-l-rose-600 dark:border-t-purple-600 dark:border-r-emerald-600 dark:border-b-yellow-600 max-w-full h-auto">
    <button class="px-8 py-4 bg-gradient-to-br from-pink-500 to-rose-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-lg md:text-xl 
                   border-2 border-pink-700 dark:border-purple-300 
                   relative overflow-hidden group">
      <span class="absolute inset-0 bg-gradient-to-br from-pink-600 to-rose-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
      <span class="relative z-10">Learn More</span>
    </button>
  </div>

  <!-- Hamburger Menu Button -->
  <input type="checkbox" id="menu-toggle" class="hidden peer">
  <label for="menu-toggle" class="fixed top-4 right-4 z-50 p-3 bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800 rounded-full shadow-lg cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95 
                           border-2 border-purple-600 dark:border-indigo-600 
                           flex flex-col items-center justify-center group w-14 h-14">
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:rotate-45 peer-checked:translate-y-2"></span>
    <span class="block w-8 h-1 bg-white rounded-full my-1 transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:opacity-0"></span>
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span>
  </label>

  <!-- Offcanvas Menu Overlay -->
  <div class="fixed inset-0 bg-black/40 dark:bg-black/80 backdrop-blur-sm z-40 opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto transition-opacity duration-500"></div>

  <!-- Offcanvas Menu Content -->
  <nav class="fixed top-0 right-0 h-full w-full max-w-xs md:max-w-sm lg:max-w-md bg-gradient-to-br from-pink-100 to-purple-100 dark:from-zinc-700 dark:to-stone-700 shadow-2xl transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-in-out z-50 
             p-6 md:p-8 overflow-y-auto 
             border-l-4 border-t-4 border-b-4 border-r-4 
             border-l-pink-400 border-t-purple-400 border-b-green-400 border-r-yellow-400 
             dark:border-l-pink-700 dark:border-t-purple-700 dark:border-b-emerald-700 dark:border-r-yellow-700 
             rounded-bl-3xl border-dashed">

    <div class="text-center mb-8 pb-4 border-b border-rose-300 dark:border-rose-600 relative">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-lime-300 dark:border-lime-500 shadow-md transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 tracking-wide">Welcome!</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Citizen Services</p>

      <!-- Paper Clip Effect -->
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-12 bg-gray-300 dark:bg-gray-600 rounded-b-lg shadow-inner z-0 
                   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-4 before:bg-gradient-to-b before:from-gray-400 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-600 before:rounded-t-lg 
                   after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-4 after:rounded-full after:bg-gray-500 dark:after:bg-gray-800 after:shadow-md"></div>

      <!-- Staple Effect -->
      <div class="absolute top-1/2 left-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
      <div class="absolute top-1/2 right-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
    </div>

    <ul class="space-y-4 md:space-y-5">
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-rose-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-rose-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-pink-600 dark:text-pink-400 group-hover:text-pink-800 dark:group-hover:text-pink-200 relative z-10" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V9a7 7 0 00-14 0v2z"></path>
          </svg>
          <span class="text-lg font-medium text-pink-800 dark:text-pink-200 group-hover:text-pink-900 dark:group-hover:text-pink-100 relative z-10">Home</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-purple-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 relative z-10" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          <span class="text-lg font-medium text-purple-800 dark:text-purple-200 group-hover:text-purple-900 dark:group-hover:text-purple-100 relative z-10">Services</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-lime-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-lime-300 dark:hover:border-emerald-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-lime-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-lime-600 dark:text-lime-400 group-hover:text-lime-800 dark:group-hover:text-lime-200 relative z-10" 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="M7 8h10M7 12h10M7 16h10M9 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3.013 0 006 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3 0 006 17v-1.5a2.5 2.5 0 015 0V17z"></path>
          </svg>
          <span class="text-lg font-medium text-lime-800 dark:text-lime-200 group-hover:text-lime-900 dark:group-hover:text-lime-100 relative z-10">News & Updates</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-yellow-300 dark:hover:border-yellow-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-yellow-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-800 dark:group-hover:text-yellow-200 relative z-10" 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="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586L6 18H4a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v2z"></path>
          </svg>
          <span class="text-lg font-medium text-yellow-800 dark:text-yellow-200 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 relative z-10">Contact Us</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-indigo-300 dark:hover:border-indigo-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-indigo-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-800 dark:group-hover:text-indigo-200 relative z-10" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="text-lg font-medium text-indigo-800 dark:text-indigo-200 group-hover:text-indigo-900 dark:group-hover:text-indigo-100 relative z-10">About Us</span>
        </a>
      </li>
    </ul>

    <!-- Decorative elements mimicking torn paper edge -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-pink-200/50 to-transparent dark:from-zinc-800/50 dark:to-transparent pointer-events-none 
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-stripes-gradient before:bg-[length:16px_16px] before:-skew-y-1 
                after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-4 after:bg-pink-100 dark:after:bg-zinc-700"></div>

    <!-- Sticky Note Section -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 p-4 bg-yellow-200 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-lg shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 
                border-2 border-yellow-300 dark:border-yellow-600 
                flex flex-col items-center justify-center text-center mt-8">
      <p class="text-sm font-semibold mb-2">Important Notice!</p>
      <p class="text-xs">Upcoming policy changes effective Jan 1, 2024. Stay informed!</p>
      <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 bg-red-400 dark:bg-red-600 rounded-full shadow-md border-2 border-red-500 dark:border-red-700 transform rotate-12"></div>
    </div>

  </nav>
</div>


<style>
/* Define the custom stripes gradient for torn paper effect */
.bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.1) 50%, 
      rgba(255, 255, 255, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
  background-size: 16px 16px;
}

/* Dark mode adjustments for stripes */
.dark .bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(0, 0, 0, 0.1) 0%, 
      rgba(0, 0, 0, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0, 0, 0, 0.1) 50%, 
      rgba(0, 0, 0, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
}
</style>

Industrial_Agriculture_Hamburger_Menu

農業/農業のウェブサイト向けに設計された、温かみのある「夕日」の配色を備えた、複雑で産業をテーマにしたハンバーガーメニューコンポーネント。露出した要素、原材料の美学、複数のインタラクティブ要素を備えており、ダークモードのサポートにより完全にレスポンシブです。

開けるプレビュー

                <div class="relative bg-gradient-to-br from-orange-600 via-red-700 to-yellow-600 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 text-stone-100 dark:text-stone-300 md:rounded-lg shadow-xl overflow-hidden">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="font-black text-2xl tracking-tighter uppercase text-stone-900 dark:text-orange-500 hover:text-stone-800 dark:hover:text-orange-400 transition duration-300">Agri<span class="text-stone-100 dark:text-white">Connect</span></a>
      <span class="hidden md:block text-stone-900 text-opacity-70 dark:text-orange-200 dark:text-opacity-50 text-sm italic">Cultivating the Future</span>
    </div>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Dashboard</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Farms</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Crops</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Analytics</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Marketplace</a>
    </nav>

    <!-- User Actions and Mobile Toggle -->
    <div class="flex items-center space-x-4">
      <div class="hidden md:flex items-center space-x-3">
        <button class="p-2 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
          <svg class="w-5 h-5" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
        </button>
        <div class="relative group">
          <img class="w-8 h-8 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 cursor-pointer object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 rounded-md shadow-lg py-1 z-20 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Settings</a>
            <div class="border-t border-stone-700 dark:border-stone-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Sign Out</a>
          </div>
        </div>
      </div>
      
      <button id="mobile-menu-button" class="md:hidden p-2 rounded-md ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="mobile-menu-icon-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          <path id="mobile-menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <nav id="mobile-menu" class="hidden md:hidden absolute left-0 w-full bg-stone-900 dark:bg-stone-950/95 border-t border-stone-800 dark:border-stone-800 py-4 z-10 animate-fade-in-down">
    <div class="px-4 flex flex-col space-y-4">
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Dashboard</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Farms</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Crops</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Analytics</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Marketplace</a>
      
      <div class="pt-4 border-t border-stone-800 dark:border-stone-700 mt-4 flex flex-col space-y-3">
        <a href="#" class="flex items-center space-x-2 py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">
          <img class="w-7 h-7 rounded-full ring-1 ring-orange-500 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <span>My Profile</span>
        </a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Notifications</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Settings</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Sign Out</a>
      </div>
    </div>
  </nav>

  <!-- Simple toggle script for demonstration, in a real app this would be in a JS file -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.getElementById('mobile-menu-button');
      const menu = document.getElementById('mobile-menu');
      const iconOpen = document.getElementById('mobile-menu-icon-open');
      const iconClose = document.getElementById('mobile-menu-icon-close');

      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconClose.classList.toggle('hidden');
      });
    });
  </script>
</div>

Cyberpunk_Hamburger_Menu_Photography

写真ポートフォリオ用のシンプルでレスポンシブなサイバーパンクをテーマにしたハンバーガーメニューは、暗い背景、ネオンの美学のための明るいトライアドアクセントカラー、および完全なダークモードのサポートを備えています。

開けるプレビュー

                <header class="bg-black text-gray-200 dark:bg-gray-950 p-4 shadow-lg shadow-fuchsia-800/30 relative z-50">
  <nav class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-teal-400 font-mono tracking-wider hover:text-cyan-300 dark:text-teal-500 dark:hover:text-cyan-400 transition duration-300">
      GLITCH_PIXELS
    </a>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex space-x-8">
      <a href="#gallery" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Gallery
      </a>
      <a href="#portfolio" class="text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-teal-400 dark:text-teal-500 dark:hover:text-teal-400 dark:hover:border-teal-500">
        Portfolio
      </a>
      <a href="#about" class="text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-orange-400 dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:border-yellow-400">
        About
      </a>
      <a href="#contact" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Contact
      </a>
    </div>

    <!-- Mobile Hamburger Button -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-fuchsia-400 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-fuchsia-600 dark:text-purple-400 dark:focus:ring-purple-600">
        <svg class="w-8 h-8" 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-black dark:bg-gray-950 border-t-2 border-fuchsia-800 dark:border-purple-800 shadow-lg shadow-fuchsia-800/30">
    <div class="flex flex-col p-4 space-y-4">
      <a href="#gallery" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-fuchsia-800/50 dark:text-purple-400 dark:hover:text-purple-300 dark:border-purple-800/50">
        Gallery
      </a>
      <a href="#portfolio" class="block text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-teal-800/50 dark:text-teal-500 dark:hover:text-teal-400 dark:border-teal-800/50">
        Portfolio
      </a>
      <a href="#about" class="block text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-orange-800/50 dark:text-yellow-400 dark:hover:text-yellow-300 dark:border-yellow-800/50">
        About
      </a>
      <a href="#contact" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 dark:text-purple-400 dark:hover:text-purple-300">
        Contact
      </a>
    </div>
  </div>
</header>

<!-- Simple JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function () {
      menu.classList.toggle('hidden');
    });

    // Close menu when a link is clicked (optional)
    const menuLinks = menu.querySelectorAll('a');
    menuLinks.forEach(link => {
      link.addEventListener('click', () => {
        menu.classList.add('hidden');
      });
    });
  });
</script>

ハンバーガーメニューコンポーネント

ネオン/グロー効果、ハイコントラストの配色、ダークモードのサポートを備えたレスポンシブハンバーガーメニューコンポーネントで、ファッションや美容のWebサイトに適しています。

開けるプレビュー

                <div class="relative bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans antialiased dark:from-gray-900 dark:to-black">
  <nav class="relative container mx-auto px-4 py-6 flex items-center justify-between z-20">
    <!-- Logo -->
    <a href="#" class="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 shadow-text-neon text-shadow-glow-pink-indigo transition-transform duration-300 hover:scale-105">
      LUMINA
    </a>

    <!-- Hamburger Button (Mobile) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="relative w-10 h-10 flex items-center justify-center p-2 rounded-full border-2 border-pink-400 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:border-purple-600 dark:focus:ring-purple-700">
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:-rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% - 7px);"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:opacity-0 dark:bg-purple-600 dark:group-hover:bg-purple-500"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% + 6px);"></span>
      </button>
    </div>

    <!-- Desktop Menu -->
    <ul class="hidden md:flex space-x-8 text-lg font-medium">
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Home</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Products</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">About</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Contact</a></li>
    </ul>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden fixed inset-0 bg-gradient-to-br from-purple-800 to-indigo-800 backdrop-blur-md z-10 flex flex-col items-center justify-center space-y-8 md:hidden dark:from-gray-800 dark:to-black dark:border-t dark:border-purple-700 transform -translate-y-full opacity-0 transition-all duration-500 ease-in-out">
    <ul class="text-center space-y-6 text-2xl font-bold flex flex-col justify-center items-center">
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Home</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Products</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">About</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Contact</a></li>
    </ul>
  </div>

  <!-- Content beneath the header for demonstration of z-index and menu overlay -->
  <div class="relative z-0 max-w-4xl mx-auto p-8 rounded-lg mt-10 bg-white/10 backdrop-blur-md shadow-2xl shadow-purple-900/50 dark:bg-gray-800/20 dark:shadow-black/50 border border-purple-500/30 dark:border-gray-700/30">
    <h1 class="text-5xl font-extrabold text-pink-200 mb-6 tracking-wide text-shadow-glow-pink dark:text-purple-300 text-center">
      Elevate Your Beauty
    </h1>
    <p class="text-xl text-gray-100 leading-relaxed dark:text-gray-200 text-center">
      Discover our exquisite collection of beauty essentials designed to illuminate your natural radiance. Experience the future of cosmetics.
    </p>
    <img src="https://picsum.photos/seed/fashion/800/400" alt="placeholder beauty product" class="mt-8 w-full h-auto rounded-lg shadow-xl shadow-pink-500/30 dark:shadow-purple-700/30 border-2 border-pink-400 dark:border-purple-600">
  </div>

  <style>
    /* Custom utility for neon text shadow */
    .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(255, 105, 180, 0.7),
                   0 0 10px rgba(255, 105, 180, 0.5),
                   0 0 15px rgba(255, 105, 180, 0.3),
                   0 0 20px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(160, 0, 255, 0.7),
                   0 0 10px rgba(160, 0, 255, 0.5),
                   0 0 15px rgba(160, 0, 255, 0.3),
                   0 0 20px rgba(160, 0, 255, 0.2);
    }
    .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(255, 105, 180, 0.4),
                   0 0 4px rgba(255, 105, 180, 0.3),
                   0 0 6px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(160, 0, 255, 0.4),
                   0 0 4px rgba(160, 0, 255, 0.3),
                   0 0 6px rgba(160, 0, 255, 0.2);
    }
    .shadow-text-neon {
      text-shadow: 0 0 7px rgba(255, 105, 180, 0.8),
                   0 0 10px rgba(173, 216, 230, 0.6),
                   0 0 15px rgba(128, 0, 128, 0.4);
    }
    .text-shadow-glow-pink-indigo {
      text-shadow: 0 0 8px #f472b6,   /* pink-400 */
                   0 0 12px #a78bfa,  /* violet-400 */
                   0 0 16px #c084fc,  /* purple-400 */
                   0 0 20px rgba(236, 72, 153, 0.3), /* pink-500 */
                   0 0 25px rgba(139, 92, 246, 0.2); /* violet-500 */
    }
  </style>

  <script>
    // This is for demonstration purposes. In a real project, this would be in a separate JS file.
    document.addEventListener('DOMContentLoaded', () => {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      menuToggle.addEventListener('click', () => {
        const isOpen = menuToggle.classList.toggle('open');
        if (isOpen) {
          mobileMenu.classList.remove('-translate-y-full', 'opacity-0');
          mobileMenu.classList.add('translate-y-0', 'opacity-100');
        } else {
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        }
      });

      // Close mobile menu when a link is clicked
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          menuToggle.classList.remove('open');
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        });
      });
    });
  </script>
</div>

オーガニックグレースケールハンバーガーメニュー

グレースケールの配色を使用した有機的で流れるようなデザインスタイルのレスポンシブハンバーガーメニューコンポーネント。ドキュメントやWikiサイトに最適で、ダークモードのサポートとメニュートグルのスムーズな移行効果を備えています。

開けるプレビュー

                <div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
      FlowDocs
    </a>

    <!-- Mobile Hamburger Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
      <div class="space-y-2">
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
      </div>
    </button>

    <!-- Desktop Menu Items -->
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Documentation
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Guides
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        API
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Community
      </a>
      <a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
        Get Started
      </a>
    </div>
  </nav>

  <!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
  <!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
  <!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
  <div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
      Documentation
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Guides
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      API
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Community
    </a>
    <a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
      Get Started
    </a>
  </div>
</div>

3Dハンバーガーメニューコンポーネント

3Dの美的感覚、温かみのあるニュートラルな配色、ダークモードのサポートを備えたレスポンシブハンバーガーメニューコンポーネントで、エンターテインメントやメディアプラットフォームに適しています。微妙な3Dホバー効果が特徴です。

開けるプレビュー

                <div class="flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen">
  <div class="relative flex flex-col items-end gap-2 p-4 rounded-xl shadow-xl bg-stone-50 dark:bg-stone-700 transition-all duration-300 transform perspective-1000 group">
    <!-- Accessible Checkbox for toggling the menu -->
    <input type="checkbox" id="menu-toggle" class="peer sr-only group-hover:block">

    <!-- Hamburger Icon -->
    <label for="menu-toggle" class="relative z-20 w-8 h-6 flex flex-col justify-between cursor-pointer transition-transform duration-300 ease-in-out group-hover:scale-110 group-hover:rotate-6 perspective-1000">
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:rotate-45 peer-checked:translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out peer-checked:opacity-0 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:-rotate-45 peer-checked:-translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
    </label>

    <!-- Menu Items Container -->
    <nav class="absolute top-0 right-0 w-64 md:w-72 lg:w-80 h-full p-4 pt-16 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-800 rounded-xl shadow-2xl origin-right transition-transform duration-500 ease-in-out transform scale-x-0 peer-checked:scale-x-100 peer-checked:translate-x-0 rotate-y-0 peer-checked:rotate-y-5 flex flex-col gap-3 opacity-0 peer-checked:opacity-100 pointer-events-none peer-checked:pointer-events-auto hover:z-30 group-focus-within:scale-x-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
      <ul class="flex flex-col gap-y-3">
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Movies
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            TV Shows
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Categories
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            My List
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Settings
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<style>
  /* CSS for 3D perspective and transformations */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-y-0 {
    transform: rotateY(0deg);
  }

  .peer-checked\:rotate-y-5 {
    transform: rotateY(-5deg);
  }

  /* Add a subtle 3D tilt on hover for the entire component for more depth */
  .group:hover {
    transform: rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .dark .group:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  /* Ensure no scrollbar appears if perspective causes slight overflow */
  body { overflow-x: hidden; }
</style>