一个简单、灵活的侧边栏jQuery/JavaScript插件，用于为侧菜单、抽屉导航和任何其他面板类型（如通知、设置、社交共享小部件等）创建移动应用程序风格的画布外面板。

更多演示：

• 使用CSS3转换
• Vanilla JavaScript版本

如何使用它:

1.将您的内容（如菜单项、社交图标等）插入侧边栏面板。

<div id="sidebar">
  <div class="sidebar-wrapper">
    <a href="#" class="quit-sidebar">Menu Link 1</a>
    <a href="#" class="quit-sidebar">Menu Link 2</a>
    <a href="#" class="quit-sidebar">Menu Link 3</a>
    ...
  </div>
</div>

2.在导航栏中添加侧边栏面板切换按钮。

<nav>
  <span id="menu" class="icon">
    <!-- Toggle Button Icon Here -->
  </span>
  <span class="expand"></span>
</nav>

3.侧边栏面板的示例CSS。

nav {
  position: sticky;
  top: 0;
  display:flex;
  align-items: center;
  height: 56px;
  background-color: #9a031e;
  color: white;
}

.icon {
  padding: 12px;
  font-size: 24px;
  cursor: pointer;
}

nav .expand {
  flex: 1;
}

nav a {
  color: inherit;
  text-decoration: none;
}

#sidebar {
  background-color: #5F0F40;
  color: white;
}

.sidebar-wrapper {
  padding: 12px;
  overflow-y: auto;
  height: 100%;
}

4.在文档中加载Simpler边栏插件的文件。

<!-- jQuery Version -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- For additional easing functions. OPTIONAL -->
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<!-- No CSS3 Transitions -->
<script src="/path/to/lib/jquery.simpler-sidebar.min.js"></script>
<!-- With CSS3 Transitions  -->
<script src="/path/to/lib/jquery.simpler-sidebar-css3.min.js"></script>

<!-- Vanilla JavaScript Version -->
<script src="/path/to/lib/vanilla-sidebar.min.js"></script>

5.初始化侧边栏面板并完成。

// jQuery Version
$("#sidebar").simplerSidebar({
  toggler: "#menu",
  quitter: ".quit-sidebar",
});

// Vanilla JS Version
var sidebar = new VanillaSidebar({
    selector: "#sidebar",
    triggerer: "#menu",
    quitter: ".quit-sidebar"
});

6.自定义背景覆盖。

$("#sidebar").simplerSidebar({
  mask: {
    display: true,
    css: {
      backgroundColor: "black",
      opacity: 0.5,
      filter: "Alpha(opacity=50)",
    },
  },
});

7.自定义打开/关闭动画。

$("#sidebar").simplerSidebar({
  animation: {
    duration: 500,
    easing: "swing",
  },
});

8.完整的插件选项。

// jQuery Version
$("#sidebar").simplerSidebar({
  // element that triggers the close action
  quitter: "a",
  // data attribute assigned to the elements
  attr: "sidebar-main",
  // open the sidebar on init
  open: false,
  // right, left
  align: "left",
  // top position
  top: 0,
  // width
  width: 300,
  // gap
  gap: 64,
  // z-index property
  zIndex: 3000,
  // disable page scrolling when the sidebar is opened
  freezePage: true,
  animation: {
    duration: 500,
    easing: "swing",
  },
  mask: {
    display: true,
    css: {
      backgroundColor: "black",
      opacity: 0.5,
      filter: "Alpha(opacity=50)",
    },
  },
});

// Vanilla JS Version
var sidebar = new VanillaSidebar({
    selector: "#sidebar",
    triggerer: "#menu",
    quitter: ".quit-sidebar",
    mask: true,
    align: "left", // or 'right'
    top: "56px",
    width: "300px",
    gap: 56,
    opened: false,
    easing: "ease-in-out",
    zIndex: 3000,
});

9.事件处理程序。

$("#sidebar").simplerSidebar({
  events: {
    onOpen: function () {},
    afterOpen: function () {}, 
    onClose: function () {}, 
    afterClose: function () {}, 
    always: function () {},
  },
});

10.API方法。

var sidebar = new VanillaSidebar({
    // ...
});
sidebar.open();
sidebar.close();

更新日志：

2022-09-14

• Vanilla JS版本：修复：调整屏幕大小时弹出侧边栏

2022-09-12

• 更新的香草JS版本
• 添加了更多演示
• 更新的文档

预览截图

灵活 非画布侧面板插件 更简单 边栏