组件 超级菜单 超级菜单组件 - Neon Glow

超级菜单组件 - Neon Glow

一个简单、响应迅速的大型菜单组件,具有霓虹灯/发光效果、温暖的中性色和深色模式支持,适用于预订/预订系统。

预览

HTML 代码

<nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 shadow-sm font-sans relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-2xl font-bold tracking-tight relative">
      GlowBook
      <span class="absolute inset-0 block rounded-full blur-sm opacity-50 bg-amber-300 dark:bg-amber-600 animate-pulse"></span>
    </a>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Book Now
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Services
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        About Us
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Contact
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle menu" class="text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded p-1.5 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
        <svg class="w-7 h-7" 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

相关组件

ArtDeco摄影MegaMenu

一个简单、响应迅速的大型菜单组件,采用装饰艺术风格设计,带有宝石色调,适用于摄影作品集。包括深色模式支持。

打开

大菜单组件

具有材料设计的超级菜单组件,三色方案,复杂级别,适用于仪表板目的,支持响应式和深色主题。

打开

拟物化大菜单组件

一个新拟态的超级菜单组件,具有响应行为和黑暗模式支持。

打开