Foundation 侧边栏学习笔记

1. Foundation 侧边栏介绍

Foundation 是一个响应式前端框架，其侧边栏组件可以让用户轻松访问网站的不同页面和功能。Foundation 的侧边栏组件提供了多种选项，包括可展开的子菜单、导航链接、图标和自定义样式等。

2. 创建 Foundation 侧边栏

要创建 Foundation 侧边栏，需要在 HTML 中添加必要的结构和 CSS 样式。以下是一个简单的示例：

htmlCopy Code
<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>
    <!-- Off Canvas Menu -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Page content -->
    </div>
  </div>
</div>

此代码块中，我们将整个页面包装在 off-canvas-wrapper 元素中，使用 off-canvas-wrapper-inner 添加内层包装容器，并设置 data-off-canvas-wrapper 属性以启用 Foundation 侧边栏。然后，我们使用 off-canvas 类向左侧添加侧边栏，并使用 data-off-canvas 属性启用侧边栏。最后，我们将页面内容包装在 off-canvas-content 元素中，使用 data-off-canvas-content 属性显示内容。

3. 添加菜单项和子菜单

要向 Foundation 侧边栏添加菜单项和子菜单，可以在 off-canvas 元素内添加 HTML 结构。以下是一个示例：

htmlCopy Code
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
  <!-- Off Canvas Menu -->
  <ul class="vertical menu">
    <li><a href="#">菜单项 1</a></li>
    <li><a href="#">菜单项 2</a></li>
    <li><a href="#">菜单项 3</a>
      <ul class="menu vertical nested">
        <li><a href="#">子菜单项 1</a></li>
        <li><a href="#">子菜单项 2</a></li>
        <li><a href="#">子菜单项 3</a></li>
      </ul>
    </li>
  </ul>
</div>

此代码块中，我们创建了一个 ul 元素，并为其添加了 vertical menu 类，以创建垂直菜单。我们将每个菜单项包装在 li 元素中，并使用 a 元素添加链接。对于具有子菜单的菜单项，我们使用 menu vertical nested 类创建嵌套的子菜单。

4. 自定义样式

Foundation 侧边栏允许用户自定义其样式，以满足不同的网站需求。以下是一些可用的自定义选项：

position-left 或 position-right：侧边栏的位置。
width-[size]：侧边栏的宽度。可用的尺寸包括 small、medium、large 和 xlarge。
offcanvas-[animation]：指定打开和关闭侧边栏时使用的动画。可用的动画包括 push、overlap、reveal 和 none。

5. 实例

以下是一个示例，展示了如何创建一个包含菜单项和子菜单的基本 Foundation 侧边栏：

htmlCopy Code
<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>
      <!-- Off Canvas Menu -->
      <ul class="vertical menu">
        <li><a href="#">主页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a>
          <ul class="menu vertical nested">
            <li><a href="#">网站设计</a></li>
            <li><a href="#">网站开发</a></li>
            <li><a href="#">SEO</a></li>
          </ul>
        </li>
        <li><a href="#">联系方式</a></li>
      </ul>
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Page content -->
      <h1>Welcome</h1>
      <p>This is my page.</p>
    </div>
  </div>
</div>

此代码块中，我们创建了一个包含菜单项和子菜单的基本 Foundation 侧边栏，并将其放置在页面的左侧。页面正文则包含一个标题和一些文本内容。

以上是关于 Foundation 侧边栏的学习笔记，希望对你有所帮助！