使用Tailwind CSS站点如何在页面加载时保留菜单状态

在本教程中，我们将使用Tailwind css创建一个简单的静态站点，然后学习如何在页面加载时保留其菜单状态。

我们第一次访问该站点时，菜单将被隐藏。但是，一旦我们打开并关闭浏览器，我们将使用本地存储和 javascript 来保持菜单在下次访问该站点时保持打开状态。事实上，它会一直保持打开状态，直到我们再次关闭它。

准备好迎接另一个挑战了吗？

1.创建项目

作为第一步，我们必须设置项目结构并决定我们将在哪里托管它。

一种选择是在本地开发它，然后在准备好后将其上传到GitHub Pages。我过去曾在不同的演示中使用过这种方法。例如，看看这个自定义Bootstrap 4 tabs的。

另一种方法是使用CodePen 项目进行开发和托管。值得注意的是，根据您的 CodePen 计划，您将能够托管不同数量的项目。

对于本教程，因为我们以前没有这样做过，所以让我们创建一个 CodePen 项目并利用它附带的所有强大功能。

默认情况下，CodePen 提供各种入门项目模板。在这里，我们将选择最基本的一个。

我们的项目将包括四个类似的 html 文件，一个将编译为 CSS 的 SCSS 文件和一个 JavaScript 文件，如下所示：

最后但同样重要的是，您可以从本地计算机导出并运行它。

2.顺风CSS

我们将使用 Tailwind CSS，而不是从头开始创建样式，这是一种流行的新的实用程序优先 CSS 框架，已经获得了开发人员的广泛关注。由Adam Wathan创建，其理念是通过向元素添加预先存在的类来将所有复杂性转移到 HTML 文件中。

因为我一直很喜欢这个概念，所以我在过去的一些演示中都遵循了这个概念。在此处了解更多信息：

3. HTML

所有 HTML 文件都将包含一个标题和一些虚拟内容。

在标题中，我们将放置：

公司标志
汉堡包图标
导航菜单

我们还需要包括以下必需的文件：

Tailwind CSS 文件
我们自己的 CSS 和 javaScript 文件

为了使汉堡包图标更易于访问，我们将使用aria-label、aria-expanded和aria-controlsARIA 属性。正如我们稍后将看到的，前两个属性的值将根据菜单状态而变化。

这是index.html页面的标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="UTF-8">
    <title>Home Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
    <link rel="stylesheet" href="styles/index.processed.css">
  </head>

  <body class="text-lg">
    <header class="sticky top-0 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 p-5 shadow-xl">
      <nav>
        <div class="flex items-center justify-between">
          <a href="index.html">
            <img width="178" height="38" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/horizontal-logo.svg" alt="forecastr logo">
          </a>
          <button class="toggle-button grid gap-y-2.5 focus:outline-none" type="button" aria-controls="menu" aria-label="Open navigation" aria-expanded="false">
            <span class="bg-white w-10 h-1 transition-transform"></span>
            <span class="bg-white w-10 h-1"></span>
            <span class="bg-white w-10 h-1 transition-transform"></span>
          </button>
        </div>
        <div class="absolute right-0 top-full mt-4 mr-3 overflow-y-hidden">
          <ul id="menu" class="menu flex transition-transform transform translate-y-full">
            <li class="mr-6">
              <a href="about.html" class="inline-block font-semibold text-gray-400 hover:text-gray-900 transition-colors duration-300 p-2">About</a>
            </li>
            <li class="mr-6">
              <a href="clients.html" class="inline-block font-semibold text-gray-400 hover:text-gray-900 transition-colors duration-300 p-2">Clients</a>
            </li>
            <li>
              <a href="contact.html" class="inline-block font-semibold text-gray-400 hover:text-gray-900 transition-colors duration-300 p-2">Contact</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <main class="my-20">
      <section>
        <div class="container max-w-5xl px-8 mx-auto">
          <h1 class="font-bold text-5xl mb-8">Home Page</h1>
          <p class="mb-5"...</p>
          ...
          <a href="" class="inline-block bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md" target="_blank">Read article</a>
        </div>
      </section>
      
    </main>

    
    <script src="scripts/index.js"></script>
  </body>
</html>

不要对辅助 CSS 类的数量感到不知所措。这些都来自 Tailwind CSS（除了我们将在 JavaScript 部分中用于引用目标元素的和）toggle-button。menu

由于这不是 Tailwind 教程，因此我不会解释每个类的作用。其中大部分是不言自明的，但还有一些类似text-5xl的不是很清楚，因此您必须深入研究文档或浏览器控制台并查看其确切用途。

只是为了给您一个想法，请考虑我们应用于.menu元素的类以及生成的 CSS：

实用类	生成的 CSS
flex	display: flex;
transition-transform	transition-property: transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;
transform	--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
translate-y-full	--tw-translate-y: 100%;

4.切换菜单

每次我们点击菜单链接时，都会发生以下动作：

我们将切换它的is-active类。如果它包含此类，它将平滑地转换为减号图标。
我们将切换translate-y-full菜单的类别。这是一个 Tailwind 类，用于确定菜单是否出现。
根据菜单状态，我们将更新aria-label和aria-expandedARIA 属性。

下面是实现此功能的 JavaScript 代码：

const toggleButton = document.queryselector(".toggle-button");
const menu = document.querySelector(".menu");
const activeClass = "is-active";
const hiddenClass = "translate-y-full";

toggleButton.addeventListener("click", function() {
  this.classList.toggle(activeClass);
  menu.classList.toggle(hiddenClass);
  if (menu.classList.contains(hiddenClass)) {
    this.setAttribute("aria-label", "Open navigation");
    this.setAttribute("aria-expanded", "false");
  } else {
    this.setAttribute("aria-label", "Close navigation");
    this.setAttribute("aria-expanded", "true");
  }
});

以及相关的 SCSS 样式：

.toggle-button {
  &.is-active {
    span {
      &:first-child {
        transform: translateY(14px);
      }

      &:last-child {
        transform: translateY(-14px);
      }
    }
  }
}

页面加载时保持菜单状态

到目前为止，我们的菜单效果很好。但是让我们更进一步，学习如何保持它的状态。也就是说，我们第一次访问该网站时，菜单将是不可见的。但是，一旦我们打开它并关闭浏览器，它会在我们下次访问该站点时保持打开状态，直到我们再次关闭它。

这是展示本地存储如何解决此类请求的完美案例。

让我们更具体一点：

单击汉堡图标后，我们会将密钥存储在本地存储中menu-state。可能的值可以是open和closed。

当页面加载时，我们会检查这个键的值。如果用户已经打开了菜单，汉堡图标会收到is-active类，菜单不会包含translate-y-full类，ARIA相关的属性会相应改变。

让我们看一下处理这个逻辑的 JavaScript 代码：

...

if (localstorage.getItem("menu-state") === "open") {
  toggleButton.classList.add(activeClass);
  menu.classList.remove(hiddenClass);
  toggleButton.setAttribute("aria-label", "Close navigation");
  toggleButton.setAttribute("aria-expanded", "true");
}

toggleButton.addEventListener("click", function() {
  if (menu.classList.contains(hiddenClass)) {
    localStorage.setItem("menu-state", "closed");
  } else {
    localStorage.setItem("menu-state", "open");
  }
});