当前位置:主页 > JavsScript库 > 菜单 / 导航 >

使用纯JavaScript实现类似移动应用程序的抽屉式导航 - SidebarJS
栏目分类:菜单 / 导航   发布日期:2021-08-30   浏览次数:

SidebarJS 是一个独立的 JavaScript 库,用于创建您在移动应用程序中看到的画布抽屉导航。

安装:

# NPM
$ npm install sidebarjs --save

使用:

在您的 html 文档中导入 JavaScript 文件 sidebar.js。

<script src="sidebar.js"></script>

抽屉导航的 html 结构。

<aside class="js-sidebar">
  <div class="js-sidebar--container">
    <h3 class="sidebar--title">标题</h3>
    <nav class="sidebar--menu">
      <div class="sidebar--menu-link--group">
        <a class="sidebar--menu-link" href="#!">Item 1</a>
        <a class="sidebar--menu-link" href="#!">Item 2</a>
        <a class="sidebar--menu-link" href="#!">Item 3</a>
      </div>
      <div class="sidebar--menu-link--group">
        <a class="sidebar--menu-link" href="#!">Item 4</a>
        <a class="sidebar--menu-link" href="#!">Item 5</a>
        <a class="sidebar--menu-link" href="#!">Item 6</a>
        <a class="sidebar--menu-link" href="#!">Item 7</a>
        <a class="sidebar--menu-link" href="#!">Item 8</a>
      </div>
    </nav>
  </div>
  <div class="js-sidebar--background"></div>
</aside>

创建一个元素来切换抽屉导航。

<div class="js-sidebar--open">切换</div>

使用以下 CSS 片段设置抽屉导航的样式。

.js-sidebar, .js-sidebar--background {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.js-sidebar--background {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
 
.js-sidebar--open {
  height: 44px;
  color: #FFF;
  background: #2196F3;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.js-sidebar {
  position: fixed;
  z-index: 9999;
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -moz-transition: -moz-transform 0s ease 0.3s;
  -o-transition: -o-transform 0s ease 0.3s;
  -webkit-transition: -webkit-transform 0s ease;
  -webkit-transition-delay: 0.3s;
  transition: transform 0s ease 0.3s;
}
 
.js-sidebar--background {
  position: absolute;
  background: transparent;
}
 
.js-sidebar--container {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 300px;
  height: 100%;
  background: #FFF;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  -moz-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
 
.js-sidebar--container .sidebar--title {
  height: 150px;
  min-height: 150px;
  padding: 16px;
  background: #2196F3;
  color: white;
  font-size: 32px;
  line-height: 100%;
  display: -webkit-flex;
  -webkit-align-items: flex-end;
  display: flex;
  align-items: flex-end;
}
 
.js-sidebar--container .sidebar--menu { overflow: auto; }
 
.js-sidebar--container .sidebar--menu-link--group {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}
 
.js-sidebar--container .sidebar--menu-link { padding: 16px; }
 
.js-sidebar.is-visible {
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -moz-transition: -moz-transform 0s ease 0s;
  -o-transition: -o-transform 0s ease 0s;
  -webkit-transition: -webkit-transform 0s ease;
  -webkit-transition-delay: 0s;
  transition: transform 0s ease 0s;
}
 
.js-sidebar.is-visible .js-sidebar--background { background: rgba(0, 0, 0, 0.2); }

创建一个 SidebarJS() 的新实例并完成。

var sidebarjs = new SidebarJS();

具有默认值的可能选项。

// 侧边栏 DOM 元素
component?: <HTMLElement>sidebarjs,
 
// 触发监听器所需的最小 px 滑动:open
documentMinSwipeX?: 10,
 
// 文档监听手势的 px 范围:open
documentSwipeRange?: 40,
 
// 使用滑动手势打开和关闭侧边栏
nativeSwipe?: true,
 
// 在滑动时启用/禁用打开
nativeSwipeOpen?: true,
 
// 侧边栏位置,接受的值:left|right
position?: 'left',
 
// 侧边栏打开时的背景不透明度
backdropOpacity?: 0.3,
 
// 在屏幕上显示侧边栏 > 1024px
responsive?: false,
 
// 如果侧边栏有选项响应式
mainContent?: <HTMLElement>
 
// 侧边栏打开后
onOpen?: () => void,
 
// 侧边栏关闭后调用的函数
onClose?: () => void,
 
// 侧边栏改变可见性时调用的函数
onChangeVisibility?: (changes: { isVisible: boolean }) => void,



官方网站:https://github.com/SidebarJS/sidebarjs

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库