acl-1.0.10

Navigations

Simple Navigation Bar
<ul class="nav">
  <li class="nav-item -active"><a href="" class="link">Active Nav Item 1</a></li>
  <li class="nav-item"><a href="" class="link">Hovered Nav Item 2</a></li>
  <li class="nav-item"><a href="" class="link">Nav Item 3</a></li>
  <li class="nav-item"><a href="" class="link">Nav Item 4</a></li>
  <li class="nav-item disabled"><a href="" class="link">Disabled Nav Item 5</a></li>
</ul>
Vertical Simple Navigation Bar
<ul class="nav nav-vertical">
  ...
</ul>
Notice:

This is the simplest navigation bar that comes in both horizontal and vertical stackable list. It behaves exactly like a link except for the active tab.

Tab Navigation
<ul class="tab-nav">
  <li class="tab-item -active"><a href="javascript:void(0);" class="link">Active Tab 1</a></li>
  <li class="tab-item"><a href="javascript:void(0);" class="link">Hovered Tab Item 2</a></li>
  <li class="tab-item"><a href="javascript:void(0);" class="link">Tab Item 3</a></li>
  <li class="tab-item"><a href="javascript:void(0);" class="link">Tab Item 4</a></li>
  <li class="tab-item disabled"><a href="javascript:void(0);" class="link">Disabled Tab Item 5</a></li>
</ul>
Vertical Left Tab Navigation
<ul class="tab-nav tab-vertical -left">
  ...
</ul>
Vertical Right Tab Navigation
<ul class="tab-nav tab-vertical -right">
  ...
</ul>
Dropdown Menu

Create dropdown menu for a navigation item. Whenever needed, consider add class -has-dropdown into nav-item. When the nav-item is clicked on, class -open will be added to display the dropdown-menu.

<ul class="nav">
  <li class="nav-item -has-dropdown -open -left">
    <a href="javascript:void(0);" class="link">Nav Item Left</a>
    <ul class="dropdown-menu">
      <li class="dropdown-item"><a href="javascript:void(0);" class="link">Super tight item</a></li>
      <li class="dropdown-item"><a href="javascript:void(0);" class="link">Super rad item</a></li>
      <li class="dropdown-item -divider"></li>
      <li class="dropdown-item"><a href="javascript:void(0);" class="link">Item chilling by itself</a></li>
    </ul>
  </li>
  <li class="nav-item -has-dropdown -open -right">
    ...
  </li>
</ul>
Notice:

Dropdown list should be used considerably because of its bad UX nature of hiding contents.