Menus

Main Menu

The main-menu includes megamenu, grey-tab-nav and the no-menu (thin-red-line) variations. The red main-menu is dynamically loaded with JavaScript when the megamenu is required.

The default red main-menu and megamenu dropdown is for top level sites only, and is not permitted to be implemented into your application. You may use the grey-tab-nav or no-menu main-menu options only.

The is-active class is used by the red main-menu when hovering to display the MegaMenu dropdown. This has already been implemented into the MegaMenu JavaScript functionality. This class must be implemented into your application when using the grey-tab-nav main-menu to indicate the currently active page.

JavaScript class: .js-main-menu and .js-main-menu__toggle

.js-megamenu

Activate the megamenu

.c-grey-tab-nav

Grey tab nav

.c-no-menu

Red line only

<div class="c-main-menu [modifier class] js-main-menu">
  <div class="c-main-menu__toggle js-main-menu__toggle"><a href="#0" class="c-main-menu__link"><i class="ua-icon-menu"></i> Main Menu</a></div>
  <ul class="c-main-menu__list">
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/about/" class="c-main-menu__link">About</a>
    </li>
    <li class="c-main-menu__item is-active">
      <a href="//www.adelaide.edu.au/study/" class="c-main-menu__link">Study <i>at</i> Adelaide</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/learning/" class="c-main-menu__link">Learning &amp; Teaching</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/research/" class="c-main-menu__link">Research</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/departments/" class="c-main-menu__link">Faculties</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/engage/" class="c-main-menu__link">Engage</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/student/" class="c-main-menu__link">Students</a>
    </li>
    <li class="c-main-menu__item">
      <a href="//www.adelaide.edu.au/staff/" class="c-main-menu__link">Staff</a>
    </li>
  </ul>
</div>