组件 粘滞导航 粘滞导航组件

粘滞导航组件

一个简单、干净且高对比度的粘性导航栏,具有等宽/开发人员的美感,适用于娱乐或媒体平台。

预览

HTML 代码

<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

相关组件

粘滞导航组件

适用于市场的简单、响应迅速且具有粘性的导航栏,具有类似的配色方案和深色模式支持。包括悬停时的细微微交互。

打开

粘性导航组件 - 黑暗模式粉彩

一个为深色模式设计的粘性导航栏,具有响应式布局和柔和的色彩点缀。导航栏在用户滚动时保持在视口顶部,提高内容丰富页面的可用性。它包括一个用于徽标或站点标题和导航链接的占位符,用Tailwind CSS进行样式处理,呈现现代、干净的外观。

打开

粘性导航组件 - Neumorphic Pastel

一个复杂、粘性的导航组件,具有 Neumorphism 设计风格和柔和的配色方案,适用于文档或 Wiki 站点。它具有嵌套导航项、搜索栏和深色模式支持,所有这些都通过 HTML 和 Tailwind CSS 实现,以实现完全响应。

打开