网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
hc-offcanvas-nav是一款基于jQuery和JavaScript多层次菜单导航插件，点击按钮从网页的上下左右四个方向动画显示出折叠菜单，可设置菜单主题。
使用方法：
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库的最新版本（可选）和hcoffcanvanav插件的文件。
<link href="Xhc-offcanvas-nav.css" rel="stylesheet" />
<link href="Xhc-offcanvas-nav.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="Xhc-offcanvas-nav.js"></script>
3. 初始化插件
// 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. 切换菜单时，是否网站主题内容推到另一边。
$('#main-nav').hcOffcanvasNav({
pushContent: true // default false
});
7. 设置菜单导航打开的方向。 values: 'left' (default), 'right', 'top' and 'bottom' 上下左右四个方向。
$('#main-nav').hcOffcanvasNav({
position: 'right'
});
8. 配置选项
$('#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. 属性
data-nav-close:设置关闭按钮
data-nav-active:设置选中特定菜单
data-nav-highlight:设置高亮
<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. aip 方法.
// 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. Events.
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
});
转载请注明来源：jquery（hc-offcanvas-nav）点击按钮动画显示出折叠菜单插件
本文永久链接地址：https://www.moyouyouw.cn/code/653.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论