Tailwind: 撸一个响应式的纯CSS导航栏

本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。

• 移动设备：
  • 只显示LOGO和展开图标
  • 鼠标悬停【在直接的手机上，需要点击】在上面会展开菜单
  • 展开的菜单将垂直布局
• 桌面设备：
  • 显示LOGO和水平布局的菜单
  • 展开图标隐藏

话不多说，直接开撸：

<div class="bg-white shadow" id="navbar-cta">
  <nav class="group container relative mx-auto flex items-center justify-between space-x-4 py-5 px-3" id="navbar">
    <a href="https://axum.rs" class="flex items-center justify-start space-x-2" id="logo">
      <img src="https://file.axum.rs/asset/logo.png" alt="LOGO" class="block w-6 object-cover" />
      <h2>AXUM中文网</h2>
    </a>

    <ul id="navbar-menu" class="absolute right-1 top-[4.05rem] z-10 hidden w-full flex-col items-center justify-center bg-white px-3 shadow-md group-hover:flex md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none">
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">首页</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">专题</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">标签</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">文章</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">关于</a></li>
    </ul>

    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </nav>
</div>