📌  相关文章
📜  Foundation CSS Off-canvas 结合标题栏(1)

📅  最后修改于: 2023-12-03 15:00:50.665000             🧑  作者: Mango

Foundation CSS Off-canvas 结合标题栏

Off-canvas 是 Foundation CSS 中的一个重要组件，它可以用来创建响应式的侧边栏菜单。结合标题栏可以更好地实现用户交互，提高用户体验。在此，我们将介绍如何使用 Foundation CSS 的 Off-canvas 和标题栏组件，以实现一个高效、美观的侧边栏菜单。

基本使用

首先，我们需要引入 Foundation CSS 的样式表和脚本，在 HTML 页面中添加以下代码：

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation CSS Off-canvas 结合标题栏</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/css/foundation.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/vendor/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/vendor/what-input.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/foundation.min.js"></script>
</head>
<body>

</body>
</html>

然后，我们需要定义一个标题栏（Top Bar）和一个 Off-canvas 菜单。我们可以使用 Foundation CSS 提供的模板代码，也可以自行定义。

标题栏

我们使用 Foundation CSS 提供的模板代码来定义一个标题栏：

<nav class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <!-- 隐藏时显示的文字 -->
      <button class="menu-icon" type="button" data-toggle></button>
      <strong>Menu</strong>
    </span>
    <span data-responsive-toggle="responsive-menu" data-show-for="medium">
      <!-- 显示时的文字 -->
      <strong>Title</strong>
    </span>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">Site Title</li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
</nav>

其中，top-bar 类用于定义标题栏的样式，top-bar-title 类用于定义标题栏的标题内容，menu-icon 类用于定义响应式菜单按钮，responsive-toggle 属性用于在不同分辨率下显示不同的内容。

Off-canvas 菜单

接下来，我们定义一个 Off-canvas 菜单：

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- 主体内容 -->
    </div>
  </div>
</div>

其中，off-canvas-wrapper 和 off-canvas-wrapper-inner 用于包裹内容和 Off-canvas 菜单，off-canvas 类用于定义 Off-canvas 菜单的样式，position-left 用于指定菜单的位置，data-off-canvas 属性指定其为 Off-canvas 菜单，off-canvas-content 用于包裹主体内容， data-off-canvas-content 属性用于指定其为主体内容。

最后，在标题栏的 data-toggle 属性中添加 .off-canvas-wrapper-inner，以实现点击响应式菜单按钮时打开 Off-canvas 侧边栏菜单。代码如下：

<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
完整代码

完整的 HTML 代码如下：

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation CSS Off-canvas 结合标题栏</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/css/foundation.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/vendor/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/vendor/what-input.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/foundation.min.js"></script>
</head>
<body>

<nav class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <!-- 隐藏时显示的文字 -->
      <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
      <strong>Menu</strong>
    </span>
    <span data-responsive-toggle="responsive-menu" data-show-for="medium">
      <!-- 显示时的文字 -->
      <strong>Title</strong>
    </span>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">Site Title</li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- 主体内容 -->
    </div>
  </div>
</div>

</body>
</html>
总结

本文介绍了如何使用 Foundation CSS 的 Off-canvas 和标题栏组件，以实现一个高效、美观的侧边栏菜单。通过引入 Foundation CSS 样式表和脚本，并结合模板代码，我们可以轻松地创建出一个响应式的侧边栏菜单，提供更好的用户交互和用户体验。