三种 CSS 替代 JavaScript 导航的方法

嗨，快速解决！您需要为网站创建导航，并开始处理移动设备的行为。您选择哪种模式？如果您像大多数人一样，可能是“汉堡包”菜单，单击该菜单后，它会使用一些 JavaScript 展开一个垂直的导航链接列表。

但这并不是唯一的选择。

根据导航的上下文和内容，可能存在一种无 JavaScript 的方法可以完成工作，同时提供更易访问的体验。

最佳实践是使用渐进增强方法，首先为使用最旧和功能最弱的技术的用户构建网页，然后在支持允许的情况下引入其他增强功能。如果您能够为使用基本技术的用户提供优质体验，那么您可能需要考虑您的网页是否真的需要 JavaScript 功能。从导航中移除 JavaScript 可以确保用户即使在禁用 JavaScript 或网络问题阻止脚本加载的情况下也能浏览您的网站——这绝对是优势。

让我们看看汉堡包菜单三种替代模式。

替代方案 1：将菜单放在单独的页面上

谁说导航必须位于每个页面的头部？如果您的前端非常轻量级，或者您在导航中要显示很长的菜单项列表，那么最实用的方法可能是创建一个单独的页面来列出所有这些菜单项。轻量级的 WordPress 主题 Susty 使用此方法进行导航。

此模式对于使用文件系统路由的静态网站特别有用。如果项目是使用静态站点生成器构建的，则页面加载对用户来说可能是难以察觉的，并且具有使模板尽可能模块化的额外好处。

这实际上只需要在用户位于菜单页面时将“菜单”按钮替换为关闭按钮即可。单击时，我们可以通过几种方式将用户带回他们上一个所在的页面。如果我们使用服务器端 CMS（例如 WordPress），则可以使用 $_SERVER['HTTP_REFERER'] 获取最后一个 URL 并将其设置为“关闭”按钮的 URL。

但是，如果我们不使用服务器端设置，那么，是的，我们可能需要几行 JavaScript 来获取该最后一个 URL。

<a href="https://MyHomePage.com" onclick="handleClick(event)">×</a>


<script>
  function handleClick(event) {
    // Don't follow the link
    event.preventDefault();
    // Go back to last visited page  
    window.history.back(); 
    // Bail out of the function
    return false;
  }
</script>

因此，虽然我喜欢这种方法和模式，但它可能需要 JavaScript，具体取决于项目。

替代方案 2：水平滚动条

此方法非常适合较短的链接列表，并允许用户访问所有导航项，而无需打开任何内容或离开当前位置。GitHub 使用此方法来处理子菜单。

使用 flexbox 结合 CSS 中的滚动溢出即可！

替代方案 3：纯 CSS 汉堡包菜单

仅仅因为汉堡包菜单模式通常使用 JavaScript，并不意味着我们必须使用 JavaScript。使用 CSS 伪选择器和 HTML <input>，我们可以创建一个丰富的移动菜单，并将 JavaScript 保留用于真正需要它的其他功能。

---

看到了吧？仅仅因为一种约定很流行，并不意味着它是唯一的方法。通常有更简单、更易访问的方法，尤其是在导航方面。在没有 JavaScript 的情况下创建功能性、轻量级、沉浸式的导航并不困难，并且在此过程中我们获得了一些不错的优势。如果您创建了任何有趣的纯 CSS 导航模式，我很乐意看到它们——请在评论中分享！