Menu icon Foundation
How do I create an off-canvas nav like Zurb/Foundation website

Looking to create an exact replica of http://foundation.zurb.com, with tabbed layout on desktop and off-canvas for mobile. I took a look at the Docs and all I found were documents detailing one OR the other, not both like what is showcased on the Zurb website.

Are there any walk-through's or documentation on how to do this? See screenshots for examples and thanks for any responses!

Screen shot 2015 12 21 at 9.41.58 pm

Screen shot 2015 12 21 at 9.42.03 pm

off-canvasoffcanvasnavigationnavFoundationtob-bartopbarjavascriptjsscsscss

Looking to create an exact replica of http://foundation.zurb.com, with tabbed layout on desktop and off-canvas for mobile. I took a look at the Docs and all I found were documents detailing one OR the other, not both like what is showcased on the Zurb website.

Are there any walk-through's or documentation on how to do this? See screenshots for examples and thanks for any responses!

Screen shot 2015 12 21 at 9.41.58 pm

Screen shot 2015 12 21 at 9.42.03 pm
Rafi Benkual almost 4 years ago

Hi Zach-
We made this navigation using a desktop menu and an off-canvas. It works really well this way.

We used visibility classes to show and hide each one based on breakpoint.

For example the desktop menu could look like:

<nav class="marketing-topbar show-for-medium">
  <ul class="menu">
    <li class="topbar-title"><a class="zurb-logo" href="{{root}}index.html">
    <img src="/assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
  </ul>
  <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
    <li class="has-submenu">
      <a href="{{root}}learn/about.html">Learn</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="{{root}}learn/about.html">About Foundation</a></li> 
        <li><a href="{{root}}learn/tutorials.html">Tutorials</a></li>
        <li><a href="{{root}}learn/classes.html">Classes</a></li>
        <li><a href="{{root}}learn/case-studies.html">Case Studies</a></li>
        <li><a href="{{root}}learn/brands.html">Brands</a></li>  
      </ul>
    </li>

You can get code for a menu and how to build one here: http://zurb.com/university/lessons/how-to-re-create-top-bar-with-foundation-6

The off-canvas tab bar was set to only show on small screens -

<div class="title-bar hide-for-medium">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvas"></button>
    <span class="title-bar-title"><img src="/assets/img/zurb-logo.svg" alt="ZURB"> Foundation</span>
  </div>
</div>

Zachary Straub almost 4 years ago

Hi Rafi,

Thank you for your suggestion. I was unfortunately not able to get an offcanvas to work with that solution, but was able to get one working by following this article:

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

I stripped all of the original top-bar code out of my navigation module and commented out all of the custom styles I had previously and just c/p'd the rails links inside the code samples listed in the article.

It took me a few minutes to figure this out, but I was then able to turn on the offcancas by adding "data-offcanvas" inside the "off-canvas-wrap" class, referenced in this SO post, 1st comment:
http://stackoverflow.com/questions/20792459/zurb-foundation-5-offcanvas-not-working/27194862#27194862

For others reading, the app we're using uses SCSS and Rails so all of our libraries and plugins files are imported automatically. You may need to plug your libraries in manually. Format looks like this:

<html>
<head></head>
    <body>
        <div class="off-canvas-wrap" data-offcanvas>
            <div class="inner-wrap">
                <header>
                    <nav</nav>
                </header>
                <div class="main-content">
                     <h2>Main Content Goes here</h2>
                </div>
            </div>
            <!-- end inner wrap -->
        </div>
        <!-- end off-canvas wrap -->
        <footer>
    </body>
</html>

Thanks and hope this helps!