Offcanvas是一款轻量级的库，用于创建滑动导航，特别适合汉堡菜单。它提供多种显示区域，如屏幕两侧或上下，且支持Web辅助功能。安装仅需jQuery和Offcanvas的CSS/JS文件，可通过npm、bower或GitHub获取。Offcanvas通过简单的HTML和JavaScript设置，即可实现滑动菜单功能，用户点击页面任意位置或使用键盘命令隐藏菜单。
免费的Offcanvas插件是许多用于滑动导航的资源之一。 您可以在线找到许多类似的插件，但是Offcanvas出于某些原因而脱颖而出。
这是一个相当轻量级的库 ，尽管它确实可以在jQuery上运行，但设置起来也不难 。 JavaScript代码和HTML代码都是如此，因此您根本不需要太多更改默认导航。
Offcanvas插件使您可以指定菜单应显示的某些区域 。 默认情况下，这通常是屏幕的左侧或右侧，但是您也可以选择屏幕的顶部或底部。
这使得Offcanvas伟大的不仅仅是汉堡滑动菜单的 。 它可用于滑动通知栏 ，甚至用于接收电子邮件的选择字段 。
每个面板的工作方式相同，用户可以单击页面上的任意位置以隐藏滑动菜单 。 并且，您可以设置符合ARIA准则运行的键盘命令 ，以实现适当的Web辅助功能 。
要安装Offcanvas，您只需要一个jQuery副本以及Offcanvas CSS / JS文件 。 您可以通过npm，bower或直接从GitHub中获取这些内容 。
同样在GitHub页面上，您将看到一些示例代码 ，可以对其进行修改以适合您的网站。 滑动导航所需的只是一个<aside>元素，其中包含菜单 （或您想要滑动到页面上的任何内容）。
这是通过指向滑动菜单ID 的锚链接触发的 。 这是Offcanvas GitHub上的一个片段，说明了一个简单的示例：
<body>
<div class="c-offcanvas-content-wrap">
...
<a href="#off-canvas" data-offcanvas-trigger="off-canvas">
Menu
</a>
...
</div>
<aside class="js-offcanvas" id="off-canvas"></aside>
</body>
<script type="text/javascript">
$('#off-canvas').offcanvas({
// options
});
</script>如果您可以稍微修改页面中HTML ，则可以轻松完成所有设置。
要了解更多信息并观看实时演示，请查看插件主页面 。 如果您喜欢汉堡包菜单，那么Offcanvas是jQuery驱动的导航的绝佳选择。
翻译自: https://www.hongkiat.com/blog/offcanvas-sliding-menu-plugin/
2211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
