CCHub Logo CCHub Tailwind Collection
Komponenten Navigation in der Seitenleiste Navigation in der Seitenleiste von Glassmorphism

Navigation in der Seitenleiste von Glassmorphism

Eine reaktionsschnelle Seitenleisten-Navigationskomponente im Glassmorphism-Stil für Portfolios mit Unterstützung des Dunkelmodus und analogem Farbschema. Mit Milchglaseffekten und mehreren interaktiven Elementen, die nur HTML und Tailwind CSS verwenden.

Vorschau

HTML-Code 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Backdrop -->
  <div id="sidebarBackdrop" class="fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ease-linear opacity-0 pointer-events-none bg-black bg-opacity-25"></div>

  <!-- Sidebar -->
  <div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/20 dark:bg-gray-800/20 backdrop-filter backdrop-blur-lg border-r border-white/30 dark:border-gray-700/30 transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition-transform duration-300 ease-in-out">

    <div class="flex items-center justify-center h-20 border-b border-white/30 dark:border-gray-700/30">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
    </div>

    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Home
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        About
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
        Projects
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        Contact
      </a>
    </nav>

    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-white/30 dark:border-gray-700/30">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Main Content</h1>
    <p class="mt-4 text-gray-600 dark:text-gray-400">This is the main content area. The sidebar is on the left.</p>
  </div>

</div>

Verwandte Komponenten

Navigationskomponente in der Seitenleiste - Memphis stumm geschaltet

Eine komplexe, reaktionsschnelle Navigationskomponente in der Seitenleiste, die vom Memphis-Design inspiriert ist und ein gedämpftes Farbschema aufweist, das sich für Dokumentations- und Wiki-Seiten eignet. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen

Navigation in der Seitenleiste

Responsive Navigationskomponente in der Seitenleiste mit analogem Farbschema und Mikrointeraktionen, einschließlich Unterstützung für dunkle Themen.

Offen

Gaming_Sidebar_Navigation_Component

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste für Gaming-Websites mit einem von Monospace/Entwicklern inspirierten Design mit hohem Kontrast, Unterstützung für den Dunkelmodus und interaktiven Elementen. Ideal für Spieloberflächen und Community-Portale.

Offen