Sidebar Navigation

Screenshot

One Level

<ul class="ol-side-navigation">
  <li>
      <a href="#">level 1</a>
  </li>

  <li class="current-menu-item">
      <a href="#">level 1</a>
  </li>

   ...
</ul>

Notes

• add .ol-side-navigation to a simple list with anchor links

• one <li> item can be the current menu item which recieves .current-menu-item class

Adding Second level

<li class="menu-item-has-children">
  <a href="#">level 1</a>
  <ul class="sub-menu">
    <li><a href="#">level 2</a></li>
    <li><a href="#">level 2</a></li>
    <li><a href="#">level 2</a></li>
  </ul>
</li>

Notes

• add .menu-item-has-children class to the <li>

• add a <ul> with .sub-menu class

• The submenu who contains the .current-menu-item will recieve .current-menu-parent

Adding Third level

Adding 3'rd levele menu is just like the second menu

Toggle

It is represented by .toggle-free class added to .ol-side-navigation

Skins

• Default : Theme color

• Red : .red-skin class

• Green : .green-skin class

• Cyan : .cyan-skin class

• Yellow : .yellow-skin class

• Dark : .dark-skin class

• Blue : .blue-skin class