Pushy 响应式侧边滑动菜单插件 - 文章教程

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

发布于 2020-05-31 字数 6579 浏览 1293 评论 0

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

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

特点

  • 使用 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">&#9776; 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)

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论