移动端隐藏侧滑无限级多层导航菜单插件hc-offcanvas-nav

2019-09-24 23:00 发布

代码|

admin
00
admin
湖南省 长沙市
在最美的年纪遇见最美的自己

移动手机的jQuery多级侧边栏菜单插件_niuqiqi071125.jpg


596a2b3e8e.png


hc-offcanvas-nav它可以创建移动优先的、多级的隐藏滑动侧边栏菜单,支持折叠菜单、向下展开菜单和完全展开菜单等多种展示方式。


使用

调用插件

<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/hc-offcanvas-nav.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcOffcanvasNav({
      maxWidth: 980
    });
  });
</script>


示例HTML菜单结构

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li>
          <a href="#">Hosting</a>
          <ul>
            <li><a href="#">Private Server</a></li>
            <li><a href="#">Managed Hosting</a></li>
          </ul>
        </li>
        <li><a href="#">Domains</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


选项

PropertyDefaultTypeDescription
maxWidth1024int/booleanResolution below which to display the mobile menu, and hide the regular.
pushContentfalsefalse / string / element objectContent element (string selector or jQuery object) that will be pushed when the navigation is open, or false to disable this option.
position'left'stringPosition on which the menu will open. Available options: 'left''right''top' and 'bottom'.
levelOpen'overlap'stringSubmenu levels open effect. Available options: 'overlap''expand''none' or false.
levelSpacing40intIf levels are overlaped, this is the spacing between them, if they are expanding, this is the text indent of the submenus.
levelTitlesfalseboolShow titles for submenus, which is the parent item name. Works only for overlaped levels.
navTitlenullstringMain navigation (first level) title.
navClass''stringCustom navigation class.
disableBodytrueboolDisable body scroll when navigation is open.
closeOnClicktrueboolClose the navigation when links are clicked.
customTogglenullstring / element objectCustom navigation toggle element.
insertClosetruebool / intInsert navigation close button. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
insertBacktruebool / intInsert back buttons to submenus. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
labelClose'Close'stringLabel for the close button.
labelBack'Back'stringLabel for the back buttons.

Methods

Methods are used to control the plugin after initialization.

MethodAcceptsDescription
settingsstringReturns current settings, or a particular setting if you specify it.
isOpenN/AChecks if the nav is open, and returns boolean.
updateobject, booleanUpdates the settings with the new ones, and/or updates the internal state of the plugin making the DOM changes based on the original nav.
openN/AOpens the nav.
closeN/ACloses the nav.
var Nav = $('#main-nav').hcOffcanvasNav({
  maxWidth: 980});// update the settingsNav.update({
  maxWidth: 1024,
  navTitle: 'All pages'});// update the nav DOMNav.update(true);// update the settings and the DOMNav.update({
  maxWidth: 1024,
  navTitle: 'All pages'}, true);

 

Events

EventDescription
openTriggers each time when the nav is opened.
closeTriggers each time when the nav is closed.
close.onceTriggers only the first time the nav is closed, and than it detaches itself.

All events return Event object, and the plugin Settings object.

var Nav = $('#main-nav').hcOffcanvasNav();// change nav open side after each closeNav.on('close', function(event, settings) {  Nav.update({
    side: settings.side === 'left' ? 'right' : 'left'
  });
});// will change nav open side only onceNav.on('close.once', function(event, settings) {  Nav.update({
    side: settings.side === 'left' ? 'right' : 'left'
  });
});


Data Attributes

AttrAcceptsDescription
data-nav-closebooleanAttached on the item links. Tells the nav if it needs to be closed on click or not.

If closeOnClick options is enabled for the nav, in the example below the "Add Page" link will not close it.

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a data-nav-close="false" href="#">Add Page</a></li>
  </ul>
</nav>


该jQuery多级侧边栏菜单插件的github地址为:https://github.com/somewebmedia/hc-offcanvas-nav


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

猜你喜欢
牛七七
更多发现
子导航代码