Menu icon Foundation
Priority navigation to off-canvas: how to?

Found this amazing Australian banking site with one of the best navigation schemes I've seen in awhile:

 

https://www.regionalaustraliabank.com.au/

 

It seems to have been built with Angular, so I'm wondering how this could be reverse engineered with plain ol' HTML/CSS/JS. I know there's nothing like a priority nav in Foundation, but could there be some combination or rework of some components?

 

 

navigationpriority navhow totutorialexperimental

Found this amazing Australian banking site with one of the best navigation schemes I've seen in awhile:

 

https://www.regionalaustraliabank.com.au/

 

It seems to have been built with Angular, so I'm wondering how this could be reverse engineered with plain ol' HTML/CSS/JS. I know there's nothing like a priority nav in Foundation, but could there be some combination or rework of some components?

 

 

Val Ery over 2 years ago

Hi, Daniel!

The site is really good! Is made on the Sitecore CMS

I probably would have done so:
1. sticky NAV, the total height 100%;

<nav>
  ...
</nav>


2. two blocks - one with menus (e.g., 70 pixels), the second - hidden, with the height (100% - 70 pixels)

<nav>
  <div class="menu">
    <ul><li></li>...</ul>
  </div>
  <div class="mega-menu hidden">
    <div class="mega-menu-1 active">
      ...
    </div>
  </div>
</nav>


3. for menu items - I would use either a trigger plugin or jQuery (for adding/removing classes)

Something like this:

- when you click on Item 1 to div "mega-menu-1" add a class "active",

- and for the parent container - remove class "hidden"

I'll try to make on codepen.io. Only after the holidays. OK?

Daniel Lewandowski over 2 years ago

Hi Val-

Thanks for your thoughts! I think you might be onto something.

The trickiest part is the priority feature that moves each menu option into the sidebar as the window collapses... Does that mean having to 2 sets of nav links? 1 for the horizontal bar, 1 for the sidebar, and show/hide as needed? Would be tough to maintain. 

Look forward to seeing your codepen whenever you get the chance, very much appreciated! I'll try and do the same and share.