Pushy是一个响应式的画布外导航菜单，使用CSS转换&；过渡。
Posted
tags:
中文标题：Pushy是一个响应式的画布外导航菜单，使用CSS转换&；过渡。 原文标题：Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. 项目评级：Star:1500 Fork:219 下载地址：https://github.com/christophery/pushy 详情介绍咄咄逼人
Pushy是一个响应式的画布外导航菜单，使用CSS转换&；过渡。这个项目的灵感来自Medium上的非画布导航菜单。
Pushy已经在许多网站上实施，请查看！如果您在某个网站上使用Pushy，请随时与我联系。
Pushy曾出现在《树屋秀》和一本书中！
查看演示|使用Pushy的网站
特征
要求
安装
下载最新版本，其中包括让Pushy在您的网站上运行所需的一切。
发展
Pushy CSS和JS是使用Grunt编译和缩小的。您需要在全球范围内安装Node和Grunt。
从根目录运行：
$ npm install
$ grunt
现在您可以编辑/scss/和/js/中的文件，这些文件将自动编译为/css/pushy.css和/js/pushy.min.js。
CDN公司
直接链接到cdnjs上的Pushy文件。
净现值
如果你对命令行很满意，你可以将Pushy作为NPM包安装：
npm install @cmyee/pushy
选项
菜单位置
使用.pushy-left或.pushy-rightCSS类指定菜单位置。
数据焦点
打开菜单时，使用data-focus属性将焦点放在链接上。理想情况下，菜单的第一个链接应该是聚焦的。
此数据属性接受CSS选择器。
数据菜单btn选择器
使用data-menu-btn-selector属性更改用于切换菜单的菜单按钮CSS类。
默认情况下，Pushy将使用.menu-btn来切换菜单。
此数据属性接受CSS选择器。
注：在v1.4.0中，此属性从data-menu-btn-class重命名为data-menu-btn-selector
数据容器选择器
使用data-container-selector属性来使用自定义#container选择器。
如果您使用自定义#container选择器，则需要在pushy.scss中更新必要的CSS。
此数据属性接受CSS选择器。
<nav class="pushy pushy-right" data-container-selector="#custom-container">
提示
浏览器兼容性
<表格>
桌面 移动
使用Pushy的网站
Pushy已经在野外的许多地方实施了，看看吧！
若要添加您的网站，请与我联系。
JavaScript库，用于创建切换的画布外多级导航，允许无休止地嵌套子菜单元素，支持滑动手势、键盘交互和ARIA属性。