Tray Navigation‹ Back
The tray navigation has two modes that determine how nested navigation works.
Complex mode allows the user to drill down through the menu levels.
Simple mode allows the user to show/hide children menus similar to accordions.
This is changed in the
tray-navigation.js file by setting
simple to either true or false.
Scaffolding the menu
The menu requires the following markup to get started. Luckily Ornament comes with this markup out of the box, ready to go!
<div class="layout"> <div class="layout--mobile-tray"> <nav class="navigation-mobile"> <div class="pane-wrapper"> <div class="pane"> <div class="pane--navigation-container"> Navigation list goes here </div><!-- .pane--navigation-container --> </div> </div> </nav> </div><!-- .layout--mobile-tray --> <div class="layout--content"> Website goes here </div><!-- .layout--content --> </div><!-- .layout -->
The navigation links need to be an unordered list (
ul) and will need a class of
non-pane to indicate that it isn't a pane.
Multiple Menu Lists
Adding multiple menus is as easy as adding another
ul with a class of
To add multiple Koi navigations, you would do this:
<div class="pane--navigation-container"> <%= koi_render_navigation "header_nav", "header_navigation", renderer: :sf_menu, level: 1..3, expand_all: true, dom_class: 'non-pane' %> <%= koi_render_navigation "footer_nav", "footer_navigation", renderer: :sf_menu, level: 1..3, expand_all: true, dom_class: 'non-pane' %> </div>
Adding additional content to the first pane
Adding content to the first pane is as simple as just adding extra elements after your lists:
... </ul> </li> <li><a href="#">Link</a></li> </ul> <p>Hello, I am in the mobile tray!</p> </div><!-- .pane--navigation-container -->
Accessing the menu externally
The menu features several public functions that you can call anywhere.
The menu is accessed via the public variable
||Returns how many panes deep the menu is open to.|
||Returns true or false based on the related setting. See settings for more info on that.|
||The menu button that opens/closes the tray.|
||Slide the menu open.|
||Slide the menu closed.|
||Either close or open the menu.|
||Returns true or false depending on if the menu is open or not.|
||Returns a jQuery object of the parent of the currently open pane.|
||Go to the ID of a navigation item (either on the LI or A)|
||Go back one level|
||Goes back to first pane.|
||Will recalculate everything on the currently visible pane and update the height of the mobile menu accordingly.|
||Runs the height update function after waiting the appropriate amount of time for a pane transition to finish.|
||Updates bindings on the anchor, back and forward buttons in case they somehow get lost via AJAX or DOM manipulation.|
At the top of
tray-navigation.js you can find a bunch of variables ready for changing. These include classes, text strings, animation timings and so on.
Some of the less obvious settings:
jumpToCurrent will decide wether the menu will load in to the current page already visible or if it will start from the top.
simple will fallback to a simple accordion-style menu if set to true.
showOverviewLinks will show overview links on secondary panes. Turn off if parent pages aren't real pages.