Dropdown Menu

Dropdowns form the basis for all of the menu types available in this theme.

They comprise of a surround with a class of "dropdown", a trigger element (preferably containing a caret) and a list (unordered <ul> or ordered <ol>).

The trigger element must have a class of "dropdown-toggle" and an attribute of either "data-toggle" or "data-hover" set to "dropdown". The list must have a class of "dropdown-menu".



The attributes on the trigger element cause differing behaviour:

Attribute Effect Caveats Examples
data-toggle The dropdown appears when the trigger element is clicked and disappears when the trigger element is clicked for a second time. The trigger element cannot be used as a link when used in this manner.
Toggle Example
data-hover The dropdown appears when the cursor hovers over the trigger element and disappears a few seconds after the cursor leaves the element.
Hover Example 
    
      
        Toggle Example
      
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Toggle Example
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Action
            </a>
          </li>
          <li>
            <a href="#">
              Another action
            </a>
          </li>
        </ul>
      </div>
      

      
        Hover Example
      
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-hover="dropdown">
          Hover Example
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Action
            </a>
          </li>
          <li>
            <a href="#">
              Another action
            </a>
          </li>
        </ul>
      </div>

Menu items can also be given a class to bring in some default stylings ("dropdown-header", "active" or "disabled"). A separator item (an <li> tag with a class of "divider") can be used to help differentiate between sub sections:

Item Styles 

    
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-hover="dropdown">
          Item Styles
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">
            Header Item
          </li>
          <li class="divider"></li>
          <li class="active">
            <a href="#">
              Active Item
            </a>
          </li>
          <li class="disabled">
            <a href="#">
              Disabled Item
            </a>
          </li>
          <li>
            <a href="#">
              Default Item
            </a>
          </li>
        </ul>
      </div>

Submenus

For menus with large sub sections it is desirable to split these out into specific submenus. This can be accomplished by treating a menu item as a trigger element and adding a new dropdown menu alongside it.

The surround for the submenu trigger element should replace the "dropdown" class with "dropdown-submenu" and the trigger element itself should omit any "dropdown-toggle" class or "dropdown-hover" or "dropdown-toggle" attributes.

Submenu Example 
    
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-hover="dropdown">
          Submenu Example
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Action
            </a>
          </li>
          <li class="dropdown-submenu">
            <a href="#">
              Open Submenu
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  Another action
                </a>
              </li>
            </ul>
          </div>
        </ul>
      </div>