New web

Web pattern library, style and technical reference

Global Components

Menus

Side menu

Default menu shown on three-column, and two-column with menu templates. Side menus will show upto 3 levels of site structure.

Example HTML structure

<div id="side-menu">
  <ol>
    <li id="side-menu-title"><a href="#">Side menu title</a></li>
    <li><a href="#">Menu item one</a></li>
    <li>
      <a href="#" class="current">Menu item two</a>
      <ol>
        <li>
          <a href="#">Sub item one</a>
          <ol>
            <li><a href="#">Sub item label</a></li>
            <li><a href="#" class="current">Sub item label</a></li>
            <li><a href="#">Sub item label</a></li>
          </ol>
        </li>
        <li><a href="#" class="current">Sub item two</a></li>
        <li><a href="#">Sub item three</a></li>
      </ol>
    </li>
    <li><a href="#">Menu item three</a></li>
    <li><a href="#">Menu item four</a></li>
    <li><a href="#">Menu item five</a></li>
  </ol>
</div>

Parse file configuration

The default 'side-menu' is configured within the main 'UON 2016' parse file (asset #222982)

<MySource_AREA id_name="side_menu_header" design_area="asset_lineage" print="no">
  <MySource_DIVIDER></MySource_DIVIDER>
  <MySource_SET name="prefix_with_divider" value="false" />
  <MySource_SET name="suffix_with_divider" value="false" />
  <MySource_SET name="prefix_with_home_link" value="false" />
  <MySource_SET name="suffix_with_current_link" value="false" />
  <MySource_SET name="show_hidden_links" value="true" />
  <MySource_SET name="levels_to_print" value="1" />
  <MySource_ASSET><li id="side-menu-title"><a href="<MySource_PRINT var='asset_link' />"><MySource_PRINT var="asset_name" /></a></li></MySource_ASSET>
</MySource_AREA>

<MySource_AREA id_name="side_menu" design_area="menu_normal" print="no">
  <MySource_SET name="level" value="1" />
  <MySource_SET name="show_subs" value="on_current" />
  <MySource_SET name="settings.class.normal" value="" />
  <MySource_SET name="settings.class.current" value="current" />
  <MySource_SET name="settings.class.hierarchy" value="parent" />
  <nav id="side-menu" class="body-menu"><a class="menu-toggle button solid-button" href="#"><span class="fa fa-bars"></span> Menu</a>
    <ol>
      <MySource_PRINT id_name="side_menu_header" />
      <MySource_ASSET>
        <li>
          <a href="<MySource_PRINT var='asset_link' />" class="<MySource_PRINT var='settings.class' /><MySource_PRINT var='asset_metadata_UoN.Access.Restricted' />"><MySource_PRINT var='asset_name' /></a>
          <MySource_SUB design_area="menu_normal">
            <MySource_SET name="show_subs" value="on_current" />
            <MySource_SET name="settings.class.normal" value="" />
            <MySource_SET name="settings.class.current" value="current" />
            <MySource_SET name="settings.class.hierarchy" value="parent" />
            <ol>
              <MySource_ASSET>
                <li>
                  <a href="<MySource_PRINT var='asset_link' />" class="<MySource_PRINT var='settings.class' /><MySource_PRINT var='asset_metadata_UoN.Access.Restricted' />"><MySource_PRINT var='asset_name' /></a>
                  <MySource_SUB design_area="menu_normal">
                    <MySource_SET name="show_subs" value="on_current" />
                    <MySource_SET name="settings.class.normal" value="" />
                    <MySource_SET name="settings.class.current" value="current" />
                    <MySource_SET name="settings.class.hierarchy" value="parent" />
                    <ol>
                      <MySource_ASSET>
                        <li>
                          <a href="<MySource_PRINT var='asset_link' />" class="<MySource_PRINT var='settings.class' /><MySource_PRINT var='asset_metadata_UoN.Access.Restricted' />"><MySource_PRINT var='asset_name' /></a>
                        </li>
                      </MySource_ASSET>
                    </ol>
                  </MySource_SUB>
                </li>
              </MySource_ASSET>
            </ol>
          </MySource_SUB>
        </li>
      </MySource_ASSET>
    </ol>
  </nav>
</MySource_AREA>

<MySource_AREA id_name="show_side_menu" design_area="show_if">
  <MySource_SET name="condition" value="keyword_regexp"/>
  <MySource_SET name="condition_keyword" value="asset_metadata_UON.Page.Layout"/>
  <MySource_SET name="condition_keyword_match" value="two-column$|three-column" />
  <MySource_THEN>
    <MySource_PRINT id_name="side_menu" />
  </MySource_THEN>
</MySource_AREA>

Top menu

Default menu shown on one-column, and two-column with sidebar templates. Top menus will show upto 2 levels of site structure.

Example HTML structure

<div id="top-menu">
  <ol>
    <li id="side-menu-title"><a href="#">Top menu title</a></li>
    <li><a href="#">Menu item one</a></li>
    <li>
      <a href="#" class="current">Menu item two</a>
      <ol>
        <li><a href="#">Sub item one</a></li>
        <li><a href="#" class="current">Sub item two</a></li>
        <li><a href="#">Sub item three</a></li>
      </ol>
    </li>
    <li><a href="#">Menu item three</a></li>
  </ol>
</div>

Parse file configuration

The default 'side-menu' is configured within the main 'UON 2016' parse file (asset #222982)

<MySource_AREA id_name="side_menu_header" design_area="asset_lineage" print="no">
  <MySource_DIVIDER></MySource_DIVIDER>
  <MySource_SET name="prefix_with_divider" value="false" />
  <MySource_SET name="suffix_with_divider" value="false" />
  <MySource_SET name="prefix_with_home_link" value="false" />
  <MySource_SET name="suffix_with_current_link" value="false" />
  <MySource_SET name="show_hidden_links" value="true" />
  <MySource_SET name="levels_to_print" value="1" />
  <MySource_ASSET><li id="side-menu-title"><a href="<MySource_PRINT var='asset_link' />"><MySource_PRINT var="asset_name" /></a></li></MySource_ASSET>
</MySource_AREA>

<MySource_AREA id_name="top_menu" design_area="menu_normal" print="no">
  <MySource_SET name="level" value="children" />
  <MySource_SET name="show_subs" value="always" />
  <MySource_SET name="settings.class.normal" value="" />
  <MySource_SET name="settings.class.current" value="current" />
  <MySource_SET name="settings.class.hierarchy" value="parent" />
  <nav id="top-menu"><a class="menu-toggle button solid-button" href="#"><span class="fa fa-bars"></span> Menu</a>
    <ol class="inner">
      <MySource_PRINT id_name="side_menu_header" /><MySource_ASSET><li>
        <a href="<MySource_PRINT var='asset_link' />" class="<MySource_PRINT var='settings.class' /><MySource_PRINT var='asset_metadata_UoN.Access.Restricted' />"><MySource_PRINT var='asset_name' /></a>
        <MySource_SUB design_area="menu_normal">
          <MySource_SET name="show_subs" value="on_current" />
          <MySource_SET name="settings.class.normal" value="" />
          <MySource_SET name="settings.class.current" value="current" />
          <MySource_SET name="settings.class.hierarchy" value="parent" />
          <ol>
            <MySource_ASSET>
              <li>
                <a href="<MySource_PRINT var='asset_link' />" class="<MySource_PRINT var='settings.class' /><MySource_PRINT var='asset_metadata_UoN.Access.Restricted' />"><MySource_PRINT var='asset_name' /></a>
              </li>
            </MySource_ASSET>
          </ol>
        </MySource_SUB>
      </li></MySource_ASSET>
    </ol>
  </nav>
</MySource_AREA>

<MySource_AREA id_name="show_top_menu" design_area="show_if">
  <MySource_SET name="condition" value="keyword_regexp"/>
  <MySource_SET name="condition_keyword" value="asset_metadata_UON.Page.Layout"/>
  <MySource_SET name="condition_keyword_match" value="two-column-alt|one-column" />
  <MySource_THEN>
    <MySource_PRINT id_name="top_menu" />
  </MySource_THEN>
</MySource_AREA>