Causeway Style

Notifications

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
  • It is a paradisematic country,in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Find out more.
  • It is a paradisematic country,in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Find out more.
  • You have One New Pending Invitation: Carillion AMBS Limited.
  • You have One New Pending Invitation: Amey Group Services Ltd.
  • You have One New Pending Invitation: Amey Group Services Ltd.

Menus


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>

Site Menu

The site menu must only appear in the site header. It consists of list of items, each of which can also be a dropdown.

Menu items can also be given a class to bring in some default stylings ("active" or "disabled"). 


    
      <nav class="navbar site-menu" role="navigation">
        <ul class="nav navbar-nav">
          <li class="active">
            <a href="#">
              Menu Item 1
            </a>
          </li>
          <li class="disabled">
            <a href="#">
              Menu Item 2
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-hover="dropdown">
              Menu Item 3
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  Menu Item 3a
                </a>
              </li>
              <li>
                <a href="#">
                  Menu Item 3b
                </a>
              </li>
              <li>
                <a href="#">
                  Menu Item 3c
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

Page Menu

The page menu consists of list of items, each of which can also be a dropdown.

Menu items can also be given a class to bring in some default stylings ("active" or "disabled"). 


    
      <ul class="nav nav-pills">
        <li class="active">
          <a href="#">
            Menu Item 1
          </a>
        </li>
        <li class="disabled">
          <a href="#">
            Menu Item 2
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-hover="dropdown">
            Menu Item 3
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                Menu Item 3a
              </a>
            </li>
            <li>
              <a href="#">
                Menu Item 3b
              </a>
            </li>
            <li>
              <a href="#">
                Menu Item 3c
              </a>
            </li>
          </ul>
        </li>
      </ul>

Three Line Menu

A three line menu is a dropdown with the additional class of "three-line-menu" added to the surround. It is an in-line item and should be either used as such or changed to a block level element in the application CSS. 


    
      <div class="dropdown three-line-menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Dropdown 1
            </a>
          </li>
          <li>
            <a href="#">
              Dropdown 2
            </a>
          </li>
          <li>
            <a href="#">
              Dropdown 3
            </a>
          </li>
        </ul>
      </div>