jQuery Collapsible Navigation With Unlimited Nesting - edlcCollapsibleNav

edlcCollapsibleNav is a jQuery/jQuery UI widget which allows you to create a vertical, accordion-style tree / navigation menu with CSS3 powered smooth expand/collapse animations. Pefect for both mobile and desktop.

Dependencies:

• jQuery
• jQuery UI Widget Factory
• jQuery UI Widget Prototype
• ES5+

How to use it:

1. Load the necessary jQuery and jQuery UI libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the jQuery edlcCollapsibleNav plugin's JavaScript and CSS files:

<link rel="stylesheet" href="edlc-collapsible-nav.css">
<script src="jquery.edlcCollapsibleNav.js">

3. Create nested html unordered lists for your collapsible nav.

<ul class="edlc-collapsible-nav">
  <li><a href="#">Link 1</a></li>
  <li>
    <div><a href="#">Link 2</a><a href="javascript:void(0);"></a></div>
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li>
    <div><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in tempus tortor. Nam ullamcorper elementum metus sit amet tempor. Fusce sit amet pharetra urna. </a><a href="javascript:void(0);"></a></div>
    <ul>
      <li><a href="#">Link 4.1</a></li>
      <li><a href="#">Link 4.2</a></li>
      <li><a href="#">Link 4.3</a></li>
    </ul>
  </li>
  <li>
    <div><a href="#">Link 5</a><a href="javascript:void(0);"></a></div>
    <ul>
      <li><a href="#">Link 5.1</a></li>
      <li>
        <div><a href="#">Link 5.2</a><a href="javascript:void(0);"></a></div>
        <ul>
          <li><a href="#">Link 5.2.1</a></li>
          <li>
            <div><a href="#">Link 5.2.2</a><a href="javascript:void(0);"></a></div>
            <ul>
              <li><a href="#">Link 5.2.2.1</a></li>
            </ul>
          </li>
          <li><a href="#">Link 5.2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Link 5.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li>
    <div><a href="#">Link 8</a><a href="javascript:void(0);"></a></div>
    <ul>
      <li><a href="#">Link 8.1</a></li>
      <li><a href="#">Link 8.2</a></li>
      <li><a href="#">Link 8.3</a></li>
      <li><a href="#">Link 8.4</a></li>
      <li><a href="#">Link 8.5</a></li>
    </ul>
  </li>
</ul>

4. Initialize the plugin and done.

$('.edlc-collapsible-nav').edlcCollapsibleNav();

5. Customize the Collapsible Navigation with the following options.

$('.edlc-collapsible-nav').edlcCollapsibleNav({
  highestListItemZIndex: 998,
  scrollTopSpeed: 1000,
  defaultOwnClassName: 'edlc-collapsible-nav',
  defaultOwnSelector: '.edlc-collapsible-nav',
  togglableListItemSelector: 'li.togglable',
  togglableListItemClassName: 'togglable',
  toggleBtnSelector: 'a + a',
  itemsWrapperSelector: '> ul',
  itemSelector: '> li',
  activeSelector: '.active',
  itemLinkWrapperSelector: '> div:first-child',
  activeClassName: 'active',
  itemCollapsedHeightAttr: 'data-collapsed-height',
  eventToToggleOn: 'touchend click',
  eventsSeparator: selectorSeparator,
  touchEndEventName: 'touchend',
  onItemToggle: noop
});

6. Override the default CSS styles of the collapsible navigation in the SASS.

/** Animation Speeds **/
$ani-speed-0: 0.08s;
$ani-speed-1: 0.13s;
$ani-speed-2: 0.21s;
$ani-speed-3: 0.34s;
$ani-speed-5: 0.55s;
$ani-speed-8: 0.89s;
$ani-speed-10: 1s;
$ani-speed-13: 1.3s;


$edlc-nav-bg: #cdcdcd;
$edlc-nav-li-bg: #fff;

---

This awesome jQuery plugin is developed by elycruz. For more Advanced Usages, please check the demo page or visit the official website.