Tray Navigation (Push)
‹ BackThis 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. |