Pushy 响应式侧边滑动菜单插件

Question

Pushy 是一个响应式的侧边滑动导航菜单，使用 CSS transforms & transitions，这个项目是受上面看到的画布外导航菜单的启发。

特点

• 使用 CSS transforms & transitions。
• 在移动设备上的平滑性能。
• jQuery 动画支持 IE7-IE9。
• 当选择链接时，菜单将关闭。
• 当选择站点覆盖时，菜单将关闭。
• 自动折叠子菜单。
• 可自定义左右菜单位置。

安装

下载 最新发布，这包括了在您的站点上运行所需的一切。

1. 添加样式表(pushy.css)在你的 head 和 JS(pushy.min.js)在你的页脚。
2. 如果您使用的是子菜单，则需要添加 arrow.svg 把文件放进你的 img 目录(可选)。
3. 将下列标记插入正文。

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
  <div class="pushy-content">
    <ul>
      <!-- Submenu -->
      <li class="pushy-submenu">
        <button>Submenu</button>
        <ul>
          <li class="pushy-link"><a href="#">Item 1</a></li>
          <li class="pushy-link"><a href="#">Item 2</a></li>
          <li class="pushy-link"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="pushy-link"><a href="#">Item 1</a></li>
      <li class="pushy-link"><a href="#">Item 2</a></li>
    </ul>
  </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
  <!-- Menu Button -->
  <button class="menu-btn">☰ Menu</button>
</div>

可选参数

菜单位置

使用 .pushy-left 或 .pushy-right 类指定菜单位置。

<!-- Pushy will transition from the right -->
<nav class="pushy pushy-right">
  <div class="pushy-content">
    <ul>
      <li class="pushy-link"><a href="#">Item 1</a></li>
      <li class="pushy-link"><a href="#">Item 2</a></li>
    </ul>
  </div>
</nav>

数据焦点

使用 data-focus 属性在打开菜单时将焦点放在链接上。理想情况下，菜单的第一个链接应该是重点。

此数据属性接受CSS选择器。

<nav class="pushy pushy-left" data-focus="#home-link">
  <div class="pushy-content">
    <ul>
      <li id="home-page" class="pushy-link"><a href="#">Home</a></li>
      <li class="pushy-link"><a href="#">About Us</a></li>
      <li class="pushy-link"><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

数据-菜单-btn-类

使用data-menu-btn-class属性更改用于切换菜单的菜单按钮CSS类。

默认情况下，PUSTY将使用.menu-btn切换菜单。

此数据属性接受CSS选择器。

<!-- Pushy Menu -->
<nav class="pushy pushy-left" data-menu-btn-class=".my-menu-btn">
	<!-- I've removed the inner markup for brevity -->
</nav>

<!-- Menu Button-->
<button class="my-menu-btn">Menu</button>

小贴士

• 使用.push类之外的HTML元素上的CSS类。#container.

<header class="push">
  <h1>This is a Heading</h1>
  <h2>This is a subheading</h2>
</header>

<!-- Your Content -->
<div id="container"></div>

• 如果您正在使用scss，则可以通过调整$menu_width变量。SCSS文件将需要编译以便查看更改。

$menu_width: 400px;

• 不使用SCSS？您必须更新多个值(或者进行查找替换！)在pushy.css档案。

.pushy{
  width: 400px; /* Changed the width to 400px */
}

.pushy-left{
  transform: translate3d(-400px,0,0); /* Updated the values */
  /* Don't forget the vendor prefixes */
}

.pushy-open-left #container,
.pushy-open-left .push {
  transform: translate3d(400px, 0, 0); /* Updated the values */
}

.pushy-right {
  transform: translate3d(400px, 0, 0); /* Updated the values */
  /* Don't forget the vendor prefixes */
}

.pushy-open-right #container,
.pushy-open-right .push {
  transform: translate3d(-400px, 0, 0); /* Updated the values */
  /* Don't forget the vendor prefixes */
}

• 类的css类的链接。pushy-link将关闭菜单。

<nav class="pushy pushy-left">
  <div class="pushy-content">
    <ul>
      <!-- This link will close the menu -->
      <li class="pushy-link"><a href="#">Item 1</a></li>
      <!-- This link won't close the menu -->
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</nav>

• 如果您想防止在PUSY打开时滚动您的站点，只需将-x：隐藏和高度：100%添加到html&body标记。

html, body{
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

浏览器兼容性

Desktop	Mobile
IE 9-11	Chrome (Android)
MS Edge	Safari (iOS)
Chrome
Firefox
Safari (Mac)

相关链接

• https://chrisyee.ca/pushy/
• https://github.com/christophery/pushy
• 在线示例：https://www.wenjiangs.com/runcode?slug=7IGdOudz