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

粘性导航组件

一个带有拟物设计的粘性导航组件,具有响应性和黑暗主题支持。使用Tailwind CSS。

预览

HTML 代码

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">SkeuoNav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
    </ul>
  </div>

</nav>

相关组件

粘滞导航组件

一个粘性导航组件,具有 Neumorphism 设计、互补配色方案、适度复杂性和对仪表板的响应式深色主题支持。该设计为 Neumorphism 效果加入了柔和的阴影,并使用互补色来创建视觉上吸引人的界面。它适用于提供数据可视化和控制面板的仪表板。

打开

粗野主义固定导航

一个具有响应式行为和深色模式支持的野兽派风格粘性导航组件,使用 Tailwind CSS。特点是高对比度、粗体排版和鲜明、原始的美学。

打开

复古电子商务粘性导航

一个复古/经典的粘性导航组件,适用于电子商务网站,具有鲜艳的颜色、复杂的元素、响应式设计和使用Tailwind CSS的暗模式支持。

打开