Componentes Menú de hamburguesas Componente del menú de hamburguesas
Componente del menú de hamburguesas

Un componente complejo del menú de hamburguesas inspirado en papel / impresión con colores dulces / dulces, diseñado para sitios web gubernamentales / de servicio público. Cuenta con un diseño responsivo con soporte para modo oscuro, que imita el papel físico y los elementos de impresión con colores brillantes y alegres.
Vista previa

Código HTML

<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>
Componentes relacionados

Menú de hamburguesas orgánicas en escala de grises

Un componente de menú de hamburguesas receptivo con un estilo de diseño orgánico y fluido que utiliza una combinación de colores en escala de grises. Ideal para documentación o sitios wiki, con soporte para modo oscuro y un efecto de transición suave para el cambio de menú.
Abrir