API: CSS: Menu

Description

The <div.menu-full> entity and its variations form a distinct content area for a menu that spans the full width of a page. It includes various stylings that can be applied as well such as .menu-padded and .menu-detailed.

Intent

This entity can be employed by any module to create a menu. Most commonly, it should contain an <ol> entity inside to create an ordered list entity, as an ordered list has access key capabilities.

Example Code

This is an example menu that leverages several different components of menu styling.

<div class="menu-full menu-detailed menu-padded">
    <h1 class="light menu-first">{MENU_TITLE}</h1> 
    <ol> 
        <li>	
            <a href="{LINK_URL_1}"> 
            {LINK_TITLE_1}
            </a></li> 
        <li>	
            <a href="{LINK_URL_2}"> 
            {LINK_TITLE_2}
            </a></li> 
        <li class="menu-last">	
            <a href="{LINK_URL_3}"> 
            {LINK_TITLE_3}
            </a></li> 
    </ol>
</div>

In all cases, the containing entity of a menu is a div. This allows the use of both ordered list items (selectable entities in the menu) and other items such as headers or content detail areas. The framework currently recognizes .menu-full as the definition of a menu. In addition, it provides .menu-detailed and .menu-padded for additional styling of the entire menu.

Within most menus, the first element will be an <h1> or <h4> representing the menu title. In these cases, .light is available for both. However, a header element is optional in any case. After the header (or at the beginning of <div.menu-full> if no header is used) comes an <ol> element, which provides the menu item styling. No additional classes are needed at the child level. To add subtitle text to a detailed menu (a menu with the .menu-detailed styling class), use <span.smallprint>.

This code demonstrates a .menu-detailed menu item that includes subtext:

<li> 
    <a href="{LINK_URL}">{LINK_TITLE}
    <br /><span class="smallprint">{LINK_EXTRA_TEXT}></span></a>
</li>

The UCLA Newsroom application uses .menu-full with .menu-detailed and .menu-padded. It also employs the <h1.light> entity and uses .menu-first on the title element and .menu-last on the last list item.

For maximal compatibility, the first element of the menu should be tagged .menu-first and the last element should be tagged .menu-last. This is not required for browsers that support the :first-child and :last-child pseudo-classes, but these tags enable consistency across mobile browsers that do not provide full CSS 2.1 support.