Rechercher des composants

Catégories

Composants Menu déroulant

Menu déroulant

Sous-menus qui s’affichent lorsque vous cliquez ou survolez

Memphis_Vibrant_Marketplace_Dropdown_Menu

Un composant de menu déroulant complexe et réactif pour une place de marché, conçu avec une esthétique vibrante de style Memphis. Dispose de couleurs vives, de formes géométriques et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-full border-4 border-yellow-400 dark:border-yellow-500 shadow-lg px-6 py-3 bg-fuchsia-500 text-lg font-extrabold text-white hover:bg-fuchsia-600 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg lg:text-xl" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <svg class="-mr-1 ml-3 h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-3 w-72 md:w-80 lg:w-96 rounded-3xl shadow-xl bg-gradient-to-br from-violet-500 to-pink-500 dark:from-violet-700 dark:to-pink-700 ring-4 ring-orange-400 dark:ring-orange-600 ring-offset-4 ring-offset-blue-300 dark:ring-offset-blue-900 focus:outline-none overflow-hidden transform scale-100 opacity-100 transition ease-out duration-300" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-2" role="none">
      <!-- Search Bar -->
      <div class="px-4 py-2 mb-2">
        <input type="text" placeholder="Search categories..." class="w-full p-3 rounded-xl border-2 border-indigo-400 dark:border-indigo-600 bg-white bg-opacity-90 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-500 transition duration-200 text-base sm:text-sm md:text-base">
      </div>
      
      <!-- Section Header -->
      <div class="px-4 py-2 bg-gradient-to-r from-teal-400 to-green-400 dark:from-teal-600 dark:to-green-600 text-white font-bold text-lg uppercase tracking-wide border-b-2 border-dotted border-white/50 dark:border-white/30 text-center rounded-t-xl sm:text-base md:text-lg">
        Top Categories
      </div>

      <!-- Menu Items -->
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/40/40?random=1" alt="Electronics icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Electronics</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(120k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/40/40?random=2" alt="Fashion icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Fashion & Apparel</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(95k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/40/40?random=3" alt="Home icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Home & Garden</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(78k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/40/40?random=4" alt="Art icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Art & Collectibles</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(55k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/40/40?random=5" alt="Sports icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Sports & Outdoors</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(42k listings)</span>
      </a>

      <!-- Call to Action -->
      <div class="border-t-2 border-dotted border-white/50 dark:border-white/30 pt-4 px-4 pb-2 mt-4 text-center" role="none">
        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 border-4 border-lime-400 dark:border-lime-500 rounded-full shadow-md font-bold text-lg bg-cyan-400 text-teal-900 hover:bg-cyan-500 hover:text-teal-800 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg">
          <svg class="w-6 h-6 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          View All Categories
        </a>
      </div>
    </div>
  </div>
</div>

Menu déroulant Art Déco

Un composant de menu déroulant simple et réactif avec un style de design Art déco et une palette de couleurs rétro/vintage, adapté aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans relative inline-block text-left group">
  <button class="relative z-10 p-4 min-w-[120px] bg-slate-200 text-slate-800 font-medium tracking-wide border-b-4 border-amber-600 shadow-md transition-all duration-300 ease-in-out
                   dark:bg-slate-700 dark:text-slate-200 dark:border-blue-300
                   hover:bg-amber-300 hover:text-slate-900 hover:shadow-lg dark:hover:bg-blue-600 dark:hover:text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-blue-400 dark:focus:ring-offset-slate-800">
    <span class="flex items-center justify-between">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </span>
    <div class="absolute inset-0 border-t-4 border-l-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
    <div class="absolute inset-0 border-r-4 border-b-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
  </button>

  <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg
              bg-slate-100 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible
              group-hover:opacity-100 group-hover:visible translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-in-out transform
              dark:bg-slate-800 dark:ring-white dark:ring-opacity-10">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-0">Production</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-1">Inventory</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-2">Logistics</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-3">Maintenance</a>
    </div>
  </div>
</div>

Menu déroulant du mode sombre Cyberpunk

Un composant de menu déroulant complexe, sur le thème du cyberpunk, pour un tableau de bord, avec des arrière-plans sombres, des couleurs en niveaux de gris avec de subtils accents vifs et une réactivité totale.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-mono z-50">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gradient-to-br from-gray-900 to-black dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out group" id="menu-button" aria-expanded="true" aria-haspopup="true">
      <span class="h-4 w-4 mr-2 text-blue-400 group-hover:text-blue-300 transition-colors duration-200">&#9679;</span>
      Dashboard Filters
      <svg class="-mr-1 ml-2 h-5 w-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-300 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 sm:w-64 md:w-72 lg:w-80 rounded-md shadow-lg bg-gradient-to-br from-gray-950 to-black dark:from-gray-900 dark:to-gray-950 ring-1 ring-inset ring-gray-700 dark:ring-gray-800 focus:outline-none transform scale-y-0 opacity-0 group-focus-within:scale-y-100 group-focus-within:opacity-100 transition-all duration-300 ease-out" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Search/Filter Input -->
      <div class="px-4 py-2">
        <input type="text" placeholder="Search options..." class="w-full px-3 py-2 text-sm bg-gray-800 dark:bg-gray-800 border border-gray-700 dark:border-gray-700 rounded-md text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors duration-200" />
      </div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Data Streams</div>

      <!-- Menu Items - Checkboxes -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Real-time Metrics</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Historical Logs</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">System Alerts</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Time Range</div>

      <!-- Menu Items - Radio Buttons (simulated) -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Last Hour</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 24 Hours</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 7 Days</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Custom Range...</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Action Buttons -->
      <div class="py-1 px-4 flex justify-between space-x-2" role="none">
        <button class="w-full inline-flex justify-center rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gray-800 dark:bg-gray-700 text-sm font-medium text-gray-300 dark:text-gray-200 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Reset</button>
        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Apply</button>
      </div>
    </div>
  </div>
</div>

Composant de menu déroulant

Un menu déroulant simple et réactif avec un design 3D aux tons de terre, adapté aux blogs ou aux sites de contenu. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-sans">
  <button id="dropdownButton" class="inline-flex justify-center w-full rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 transform transition-all duration-300 ease-in-out
    bg-emerald-700 text-amber-50 shadow-lg
    dark:bg-stone-800 dark:text-stone-100
    hover:scale-105 hover:shadow-xl
    focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-emerald-100
    dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900
    active:scale-95 active:shadow-md
    border-b-4 border-r-4 border-emerald-900 dark:border-stone-900
    hover:border-b-emerald-800 hover:border-r-emerald-800
    dark:hover:border-b-stone-700 dark:hover:border-r-stone-700
    ">
    Options
    <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <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" />
    </svg>
  </button>

  <!-- Dropdown panel, show/hide based on button click. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-y-0 opacity-0 transition-all duration-300 ease-in-out
    bg-amber-100
    dark:bg-stone-700
    border-b-4 border-r-4 border-amber-300 dark:border-stone-800
    " role="menu" aria-orientation="vertical" aria-labelledby="dropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm
          text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
          dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
          border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
          transition-all duration-200 ease-in-out
          " role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    function toggleDropdown() {
      if (dropdownMenu.classList.contains('scale-y-0')) {
        dropdownMenu.classList.remove('scale-y-0', 'opacity-0');
        dropdownMenu.classList.add('scale-y-100', 'opacity-100');
      } else {
        dropdownMenu.classList.remove('scale-y-100', 'opacity-100');
        dropdownMenu.classList.add('scale-y-0', 'opacity-0');
      }
    }

    dropdownButton.addEventListener('click', toggleDropdown);

    // Close the dropdown if the user clicks outside of it
    document.addEventListener('click', (event) => {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        if (dropdownMenu.classList.contains('scale-y-100')) {
          toggleDropdown();
        }
      }
    });

    // Optional: Close on Escape key
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && dropdownMenu.classList.contains('scale-y-100')) {
        toggleDropdown();
      }
    });
  });
</script>

Composant de menu déroulant

Un composant de menu déroulant inspiré de Material Design adapté à un portfolio, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <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" />
    </svg>
  </button>

  <div class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

Composant de menu déroulant

Un composant de menu déroulant simple, de style glassmorphism, pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

Composant de menu déroulant

Composant de menu déroulant pour le commerce électronique avec Material Design, schéma de couleurs analogue et interactions complexes à l’aide de Tailwind CSS. Il est réactif et prend en charge le thème sombre sans JavaScript.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

Composant de menu déroulant

Un menu déroulant réactif de style 3D pour les tableaux de bord, avec une palette de couleurs triadique et la prise en charge du mode sombre.

Ouvrir Aperçu

                
<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md px-4 py-2 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white text-sm font-medium shadow-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-transform duration-200 active:scale-95 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:hover:from-gray-600 dark:hover:via-gray-700 dark:hover:to-gray-800" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 opacity-0 scale-95 transition-all duration-200 ease-out dark:bg-gray-800 dark:ring-gray-700 dark:divide-gray-700"
    role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">License</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<script>
  // This is a placeholder for JavaScript. In a real application, you would toggle the dropdown visibility with JS.
  // For this example, we'll simulate a "hover" effect with Tailwind classes that are normally toggled by JS.
  const dropdownButton = document.getElementById('options-menu');
  const dropdownPanel = dropdownButton.nextElementSibling;

  dropdownButton.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

  dropdownPanel.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownPanel.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

</script>

Composant de menu déroulant

Composant de menu déroulant avec des micro-interactions, des couleurs vives et une mise en page simple pour un portfolio, avec un design réactif et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 transition transform hover:scale-105" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Menu déroulant Neumorphique

Menu déroulant Neumorphic pour les médias sociaux avec des couleurs vives et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-600 shadow-neumorphic-light dark:shadow-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
  </button>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-gray-700 dark:to-gray-900 ring-1 ring-black ring-opacity-5 divide-y divide-purple-300 dark:divide-gray-600 focus:outline-none">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Settings</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Notifications</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Messeges</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Logout</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9d7df5, -6px -6px 12px #c9a7ff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #666666;
  }
</style>