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

全栈：AXUM、React、NextJS 和 TailWindCSS
19566
2022/11/19 00:00:31
axumfullstackreactnextjstailwind

你可以点击这里查看代码和效果：

  • 移动设备：
    • 只显示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>
  • #navbar-cta：导航栏容器，设置了白色背景和阴影
  • #navbar
    • group：启用分组功能
    • container：使用容器类
    • relative：相对定位
    • mx-auto：水平居中
    • flex items-center justify-between space-x-4：flex水平布局，子元素在水平方向两侧分布并垂直居中，水平间隙为4
    • py-5 px-3：垂直内边距为5，水平内边距为3
  • #navbar-menu
    • absolute right-1 top-[4.05rem]
      • 绝对定位
      • 右方1个单位
      • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时，可以用这种方式
    • z-10：z-index 为 10
    • hidden：隐藏元素
    • w-full：宽度占满父容器
    • flex-col：flex 垂直布局
    • items-center justify-center：垂直居中，居中分布
    • bg-white px-3 shadow-md：白色背景，水平方向内边距为3，大小为md的阴影
    • group-hover:flex：监听分组的 hover 事件，使用 flex 布局
    • md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none：在 md 断点设置：
      • 静态定位（top/left/right/bottom将失效）
      • flex 布局
      • flex 水平布局
      • 垂直间隙为0
      • 水平间隙为4
      • 去除阴影
  • #navbar-menu > li：分别设置垂直和水平方向的内边距，在 md 断点取消所有内边距
  • #navbar-menu > li > a：显示为块级元素；鼠标悬停时：
    • 设置文字颜色为600号红色
    • 显示下划线
    • 将下划线的颜色设置为600号红色（如果和文字颜色，这个可以不设置，本如本例）
  • svg：设置高度和宽度；在 md 断点隐藏