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

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

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

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

话不多说，直接开撸：

• #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 断点隐藏