Tray Navigation (Push)

‹ Back

This is the push variant of mobile tray navigation.

Scaffolding the menu

The menu requires the following markup to get started. Some of the classes used may need to change depending on implementation.

<body>

  <!-- container for the entire website -->
  <div class="layout tray-container" data-tray-layout>

    <!-- container for the slide-out tray -->
    <div class="tray" data-tray>

      <nav aria-label="Mobile Navigation" role="navigation">
        <ul>
          <!-- navigation goes here -->
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

    </div>

    <!-- container for the main website that will get pushed away from the navigation -->
    <div class="tray--page layout--content" data-tray-page>

      <!-- header content will sit over the darkened overlay -->
      <header class="header" role="banner"></header>

      <!-- container for everything that will get darkened by the overlay -->
      <div data-layout-positioner class="layout--positioner tray--open-overlay">
        <!-- website goes here -->

        <!-- make sure your footer is inside the tray--open-overlay element -->
        <footer class="footer" role="contentinfo"></footer>
      </div>
    </div>
  </div>

</body>

The menu is accessed via the public variable Ornament.C.PushTray

Accessing the menu externally

The menu features several public functions that you can call anywhere.

DOM Elements

JS Description
Ornament.C.PushTray.anchor The menu button that opens/closes the tray.
Ornament.C.PushTray.tray The tray

Public Functions

JS Description
Ornament.C.PushTray.openMenu(); Slide the menu open.
Ornament.C.PushTray.closeMenu(); Slide the menu closed.
Ornament.C.PushTray.toggleMenu(); Either close or open the menu.
Ornament.C.PushTray.isOpen(); Returns true or false depending on if the menu is open or not.