Composant de menu déroulant
Un menu déroulant épuré et minimaliste pour les sites Web d’événements et de conférences, avec une palette de couleurs vert forêt et un design réactif avec prise en charge du mode sombre, inspiré de la typographie suisse/internationale.
HTML Code
<div class="relative inline-block text-left font-sans">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
Event Sessions
<!-- Heroicon name: solid/chevron-down -->
<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.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none" 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 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
</div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
</div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
</div>
</div>
</div>Composants associés
Menu déroulant neumorphique (niveaux de gris)
Menu déroulant Neumorphique avec couleurs en niveaux de gris. Mise en page simple pour une utilisation en portefeuille, réactive avec prise en charge du mode sombre. Pas de JavaScript.
Menu déroulant Glassmorphism
Un menu déroulant simple et réactif avec un design en verre, utilisant des tons violets/violets, adapté aux applications technologiques/SaaS. Prend en charge le mode sombre.
Composant de menu déroulant
Un composant de menu déroulant réactif conçu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.