可堆叠多级边栏菜单 hc offcanvas导航

当前位置：首页 > 网页特效 > 其他 > 可堆叠多级边栏菜单 hc offcanvas导航

可堆叠多级边栏菜单 hc offcanvas导航

源码大小：351.1KB
所需积分：1积分
源码编号：19JP-3649
浏览次数：616次
最后更新：2023年07月06日
所属栏目：其他

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

hcoffcanvas nav是一个jQuery和Vanilla JavaScript插件，用于创建多级、移动优先、完全可访问的offcanvas侧导航，支持子菜单元素的无限嵌套。

当切换时，hc offcanvas导航从网页的左侧或右侧滑出，当打开父菜单时，它与子菜单重叠（或展开）。

请参阅实际操作：

如何使用它:

1.从嵌套的导航列表中创建多级菜单。

<nav id="main-nav">
 
  <ul class="first-nav">
    <li class="cryptocurrency">
      <a href="#">Cryptocurrency</a>
      <ul>
        <li><a href="#">Bitcoin</a></li>
        <li><a href="#">Ethereum</a></li>
        <li><a href="#">NEO</a></li>
        <li><a href="#">ZCash</a></li>
        <li><a href="#">Dogecoin</a></li>
      </ul>
    </li>
  </ul>
 
  <ul class="second-nav">
    <li class="devices">
      <a>Devices</a>
      <ul>
        <li class="mobile">
          <a href="#">Mobile Phones</a>
          <ul>
            <li><a href="#">Super Smart Phone</a></li>
            <li><a href="#">Thin Magic Mobile</a></li>
            <li><a href="#">Performance Crusher</a></li>
            <li><a href="#">Futuristic Experience</a></li>
          </ul>
        </li>
        <li class="television">
          <a href="#">Televisions</a>
          <ul>
            <li><a href="#">Flat Superscreen</a></li>
            <li><a href="#">Gigantic LED</a></li>
            <li><a href="#">Power Eater</a></li>
            <li><a href="#">3D Experience</a></li>
            <li><a href="#">Classic Comfort</a></li>
          </ul>
        </li>
        <li class="camera">
          <a href="#">Cameras</a>
          <ul>
            <li><a href="#">Smart Shot</a></li>
            <li><a href="#">Power Shooter</a></li>
            <li><a href="#">Easy Photo Maker</a></li>
            <li><a href="#">Super Pixel</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="magazines">
      <a href="#">Magazines</a>
      <ul>
        <li><a href="#">National Geographic</a></li>
        <li><a href="#">Scientific American</a></li>
        <li><a href="#">The Spectator</a></li>
        <li><a href="#">The Rambler</a></li>
        <li><a href="#">Physics World</a></li>
        <li><a href="#">The New Scientist</a></li>
      </ul>
    </li>
    <li class="store">
      <a href="#">Store</a>
      <ul>
        <li>
          <a href="#">Clothes</a>
          <ul>
            <li>
              <a href="#">Women's Clothing</a>
              <ul>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Men's Clothing</a>
              <ul>
                <li><a href="#">Shirts</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Jewelry</a>
        </li>
        <li>
          <a href="#">Music</a>
        </li>
        <li>
          <a href="#">Grocery</a>
        </li>
      </ul>
    </li>
    <li class="collections"><a href="#">Collections</a></li>
    <li class="credits"><a href="#">Credits</a></li>
  </ul>
 
</nav>

2.在html中加载最新版本的jQuery库（可选）和hc offcanvas nav插件的文件。

<!-- Default Theme -->
<link href="/path/to/dist/hc-offcanvas-nav.css" rel="stylesheet" />
<!-- Carbon Theme -->
<link href="/path/to/dist/hc-offcanvas-nav.css" rel="stylesheet" />
<!-- OPTIONAL -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core JavaScript -->
<script src="/path/to/dist/hc-offcanvas-nav.js"></script>

3.初始化hc offcanvas nav插件并完成。

// as a jQuery plugin
$('#main-nav').hcOffcanvasNav({
  // options here
});
 
// as a Vanilla JS plugin
var myNav = new hcOffcanvasNav('#main-nav', {
    // options here
});

4.指定中断插件隐藏常规导航的屏幕宽度。

$('#main-nav').hcOffcanvasNav({
  disableAt: 1024
});

5.自定义关闭/返回标签的文本。

$('#main-nav').hcOffcanvasNav({
  insertClose: true,
  insertBack: true,
  labelClose: 'Close',
  labelBack: 'Back',
  levelTitleAsBack: true
});

6.当HC MobileNav切换时，将主要内容推到另一侧。

$('#main-nav').hcOffcanvasNav({
  pushContent: true // default false
});

7.设置HC MobileNav的方向。可能的值：“left”（默认值）、“right”、“top”和“bottom”

$('#main-nav').hcOffcanvasNav({
  position: 'right'
});

8.HC MobileNav的更多定制选项。

$('#main-nav').hcOffcanvasNav({
 
  // width & height
  width: 280,
  height: 'auto',
 
  // enable swipe gestures
  swipeGestures: true,
 
  // initialize the menu in expanded mode
  expanded: false
 
  // overlap / expand / none
  levelOpen: 'overlap', 
 
  // in pixels
  levelSpacing: 40,
 
  // shows titles for submenus
  levelTitles: false,
 
  // close sub levels when the nav closes
  closeOpenLevels: true,
 
  // clear active levels when the nav closes
  closeActiveLevel: false,
 
  // the title of the first level
  navTitle: null,
 
  // extra CSS class(es)
  navClass: '',
 
  // disable body scroll 
  disableBody: true,
 
  // close the nav on click
  closeOnClick: true,
 
  // custom toggle element
  customToggle: null,
 
  // prepend or append the menu to body
  bodyInsert: 'prepend',
 
  // should original menus and their items classes be preserved or excluded.
  keepClasses: true,
 
  // remove original menu from the DOM
  removeOriginalNav: false
 
  // enable RTL mode
  rtl: false
  
});

9.可用数据属性：

数据导航自定义内容：克隆项目的内容
数据导航关闭：是否需要在单击时关闭菜单项
数据导航激活：页面加载时打开特定子菜单
数据导航突出显示：突出显示列表项

<nav id="main-nav">
  <ul>
    <li data-nav-custom-content>
      <div>Some custom content</div>
    </li>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul data-nav-active>
        <li><a href="#">Team</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a data-nav-close="false" href="#">Add Page</a></li>
  </ul>
</nav>

10.API方法。

// As a jQuery Plugin
var $nav = $('#main-nav').hcOffcanvasNav();
var Nav = $nav.data('hcOffcanvasNav');
 
// As a Vanilla JS Plugin
var Nav = new hcOffcanvasNav();
 
// open the menu
Nav.open();
 
// open a specific sub-menu
Nav.open(level, index);
 
// close the menu
Nav.close();
 
// check if the menu is opened
Nav.isOpen();
 
// return the current options
Nav.getSettings();
 
// update options
Nav.update({
  // options
});
 
// update the nav DOM
Nav.update(true);
 
// update the options and the DOM
Nav.update({
  // options
}, true);

11.事件。

Nav.on('close', function(event, settings) {
  // on close
});
 
Nav.on('close.once', function(event, settings) {
  // on close only once
});
 
Nav.on('close.level', function(event, settings) {
  // when a sub level is closed
});
 
Nav.on('open', function(event, settings) {
  // on open
});
 
Nav.on('open.level', function(event, settings) {
  // when a sub level is opened
});

更新日志：

版本6.1.5（2022-03-26）

已更新

v6.1.4 (2021-09-29)

已更新

v6.1.3 (2021-03-13)

已更新

v6.1.2 (2021-02-20)

已更新

版本6.1.1（2020-12-02）

已更新

版本6.0.5（2020-10-30）

已更新

版本6.0.4（2020-10-18）

已更新

版本6.0.3（2020-10-16）

已更新

版本6.0.2（2020-10-02）

已更新

版本6.0.1（2020-10-01）

已更新

版本6.0.0（2020-09-30）

已更新

版本5.0.12（2020-08-28）

已更新

版本5.0.11（2020-08-27）

已更新

版本5.0.10（2020-08-22）

已更新

v5.0.8版本（2020-08-21）

已更新

v5.0.6版本（2020-08-21）

已更新

版本5.0.4（2020-08-20）

已更新

v5.0.3版本（2020-08-19）

已更新

版本4.2.6（2020-08-13）

更新了选项、API和事件

版本4.2.5（2020-07-24）

更新了选项、API和事件

版本4.2.4（2020-07-23）

使现代化

版本4.2.3（2020-06-19）

使现代化

版本4.2.2（2020-06-04）

使现代化

版本4.2.1（2020-05-27）

使现代化

版本4.2.0（2020-05-27）

使现代化

版本4.1.4（2020-05-10）

使现代化

版本4.1.3（2020-05-08）

使现代化

版本4.1.2（2020-05-08）

使现代化

版本4.1.1（2020-04-14）

增强的“开放”方法
添加了“数据导航活动”数据。

版本4.0.0（2020-04-13）

添加了更多选项、方法和事件。
重命名了一些选项。

2020-04-07

v3.5.0:更新

2020-04-06

v3.4.5：更新

2020-04-05

v3.4.1:更新

2018-11-03

v3.4.0：更新

2018-10-31

v3.3.2：更新

2018-10-18

v3.3.1：更新

2018-10-07

v3.3.0：更新

2018-10-04

v3.2.0：更新

2018-09-28

v3.1.4：更新

2018-09-27

v3.1.3：更新

2018-07-30

v3.1.1：修复内容转换

2018-07-29

第3.1.0版

2018-07-28

防止身体水平滚动
添加了更多选项

预览截图

可堆叠多级边栏菜单 hc offcanvas导航

相关热词： 堆叠多级菜单 offcanvas 导航

上一篇：用户友好谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：切换滚动时背景图像 jQuery滚动切换

开发前端软件素材源码教程下载网站