Componenti Componenti di miglioramento della navigazione Navigazione ispirata alla carta/stampa per piattaforme di intrattenimento

Navigazione ispirata alla carta/stampa per piattaforme di intrattenimento

Un componente di navigazione semplice e reattivo per piattaforme di intrattenimento, che imita uno stile di carta/stampa con una tavolozza di colori verde foresta. Include il supporto per la modalità oscura e utilizza l'HTML semantico.

Anteprima

Codice HTML

<nav class="bg-lime-50 dark:bg-gray-800 p-4 border-b-4 border-lime-700 dark:border-lime-300 font-serif overflow-hidden relative">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-lime-700 dark:text-lime-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14v10a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm0 0V5a2 2 0 012-2h10a2 2 0 012 2v4M7 9h10l-1 12H8l-1-12z" />
      </svg>
      <a href="#" class="text-lime-800 dark:text-lime-100 text-2xl font-bold tracking-tight">Page Turner</a>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Home</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Browse</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">My Shelf</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">About</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button aria-label="Toggle Mobile Menu" class="md:hidden text-lime-700 dark:text-lime-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-lime-500 rounded" onclick="document.getElementById('mobile-menu').classList.toggle('hidden');">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Navigation (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden mt-4 border-t border-lime-700 dark:border-lime-400 pt-4">
    <ul class="flex flex-col space-y-4">
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Home</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Browse</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">My Shelf</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">About</a></li>
    </ul>
  </div>

  <!-- Subtle paper texture element -->
  <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzgiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNzggMTAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOS4xNDc0NSAzLjM3MjM2QzcuOTUyNzcgMi41Njg2MSA3LjUwNjExIDIuMDcwOTggNi42NDQyNyAxLjU5NTQzQzQuMjI5ODYgMC4yNjUwMzggMS40ODk0OSAtMC42NTk1MjkgMS42MDQyMiAxLjUxOTU0QzEuNzUzNjUgNjk0LjI2IDAuNzU2Mjg4IDkyNC43MTggMC43NTYyODggOTI2LjgyMUMwLjc1NjI4OCA5NjguNzY5IDQwLjg0OTUgOTk5LjE3NSA3OC4yMzE5IDk5OS4xNzVDNzguMjMxOSA5OTkuMTc1IDc2LjAxNzUgMTAwMSA3NS4wNjc2IDEwMDJDNzEuNzk5MSAxMDIxLjM5IDY5LjE0MTIgMTAwMCA2OS4wNzQ4IDEwMDAuMDZDNDkuNTM2OCA5OTkuODYxIDI2LjAwNjkgOTUwLjk0MiAxNi4xNDggOTI2LjgyQzExLjU0OTUgODk5LjQ2NCAxMC42NjcxIDguOTA3NDggOS4xNDc0NSAzLjM3MjM2WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eXM9IjAuMDUiLz4KPC9zdmc+'); background-repeat: repeat;"></div>
</nav>

Componenti correlati

Componenti di miglioramento della navigazione

Un componente di miglioramento della navigazione reattiva per un blog in modalità scura con colori vivaci e funzioni di complessità moderata.

Aperto

E-commerce Navigazione Industriale

Un componente complesso per la navigazione e-commerce in stile industriale con materie prime ed elementi estetici a vista. Presenta uno schema monocromatico in bianco e nero con un accento luminoso, completamente reattivo con supporto per la modalità oscura.

Aperto

Componente di miglioramento della navigazione

Un componente di navigazione reattivo progettato per un portfolio, che utilizza uno stile brutale con una combinazione di colori pastello e il supporto della modalità oscura.

Aperto