Menu icon Foundation
Tutorial/sample for Off-Canvas Multilevel Menu in Foundation 6

Off canvas

Yes I understand in the foundation 6 is made simple, so that advanced users can easily perform Customization to making it more flexible

But for beginners like me it was a bit difficult (for me), especially I do not understand how to use of the existing documentation. the offcanvas in the foundation 5 can be easily for use offcanvas multilevel immediately , but how to make it in the foundation 6, I see in foundation 6 is extract in two component like : http://foundation.zurb.com/sites/docs/off-canvas.html and http://foundation.zurb.com/sites/docs/drilldown-menu.html

I'm so sorry, Any tutorial or sample about that ?

off-canvasMulti-level-menu

Off canvas

Yes I understand in the foundation 6 is made simple, so that advanced users can easily perform Customization to making it more flexible

But for beginners like me it was a bit difficult (for me), especially I do not understand how to use of the existing documentation. the offcanvas in the foundation 5 can be easily for use offcanvas multilevel immediately , but how to make it in the foundation 6, I see in foundation 6 is extract in two component like : http://foundation.zurb.com/sites/docs/off-canvas.html and http://foundation.zurb.com/sites/docs/drilldown-menu.html

I'm so sorry, Any tutorial or sample about that ?

Euan G over 3 years ago

Same problem here, documentation is not very clear

Brett Mason over 3 years ago

So there's a few components you need in order to do this, but the basic structure is this:

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu" data-drilldown><!-- start of the drilldown multi level menu -->
          <li>
            <a>Item 1</a>
            <ul class="vertical menu">
              <li><a href="#">Item 1A</a></li>
              <li><a href="#">Item 1B</a></li>
              <li><a href="#">Item 1C</a></li>
              <li><a href="#">Item 1D</a></li>
              <li><a href="#">Item 1E</a></li>
            </ul>
          </li>
          <li>
            <a>Item 2</a>
            <ul class="vertical menu">
              <li><a href="#">Item 2A</a></li>
              <li><a href="#">Item 2B</a></li>
              <li><a href="#">Item 2C</a></li>
              <li><a href="#">Item 2D</a></li>
              <li><a href="#">Item 2E</a></li>
            </ul>
          </li>
          <li>
            <a>Item 3</a>
            <ul class="vertical menu">
              <li><a href="#">Item 3A</a></li>
              <li><a href="#">Item 3B</a></li>
              <li><a href="#">Item 3C</a></li>
              <li><a href="#">Item 3D</a></li>
              <li><a href="#">Item 3E</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
        </ul>
      </div>
      <div class="off-canvas-content" data-off-canvas-content>
        <div class="title-bar">
          <div class="title-bar-left">
            <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
            <span class="title-bar-title">Foundation</span>
          </div>
          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
          </div>
        </div>
        <p>content goes here...</p>
      </div>
    </div>
  </div>

This is using the title-bar component so its similar to F5. Hopefully its fairly straight forward to follow but if you get stuck ask away!

Feather Light over 3 years ago

Thanks for you're reply :)

Yes Euan G, The documentation is very very difficult for beginners, Okay for advanced user is simple to understand, but for me, for example I try to copy paste code in off canvas foundation 6 documentation code, not working for me, yes I think I'm stupid, but I hope foundation is for every one, can understand for beginer and advanced user too, not advanced user only, the documentation not for advanced only.

Thanks for your code Brett Mason, but I copy paste your code the menu not show for me, it's need a javascript configuration ?

Feather Light over 3 years ago

I know in foundation 6 is many code reduction, and yes it's good for a 'framework'

But if the documentation is also very minimal, I think it is very bad as the best framework, I think the documentation in foundation 5 more better, about the 'EXAMPLE' that can be understood by beginners, and beginners can learn about best practice from there

Hopefully foundation executive can reading this :(

Or only me who is too stupid :(

Brett Mason over 3 years ago

Sorry about that I made a typo in the above code (the off canvas ID should of been OffCanvasLeft not OffCanvasleft) - I've updated the code in my first post. Here's an updated codepen: http://codepen.io/brettsmason/pen/QyWmZb

Also out of interest what do you think would be helpful to you in the docs? Be as specific as you can. I've been thinking about doing some pull requests to the docs on Github so any input would be great :)

Feather Light over 3 years ago

Btw, thanks for reply Brett Mason :D

"Also out of interest what do you think would be helpful to you in the docs?"

Maybe about the 'total' example/explanation in documentation, why many people here still ask about
'how to use ____ ?'
'how to combine ______ component with ________ component ?'
'how to styling _______ component in foundation 6 to like foundation 5?'

This is fundamental, I think many people ask something like there because 'nothing' in documentation. Or at least can only be understood by professionals/advanced, and are not understood by the beginner

For example, in foundation 5 have sticky or contain-to-grid class in navbar/offcanvas, maybe in foundation 6 separated about sticky (component) and navbar, but for beginner is can't understand to 'combine' them

Or like in (maybe) all of javascript description, for example i want to disable 'forceTop' option in offcanvas. The question of beginner how to use this variable, because no example in documentation, full script javascript from to . In documentation now only part of script, who only can be understood for advanced user no for beginner

So my conclusion is about :
maybe will good for adding 'combine' section in documentation
the full of example, like html tag, etc

Vladimir over 3 years ago

Well I learn best from finished themes I find on the net. But I struggle to find any useful theme that is based on F6, and also find that new documentation is written for hardcore pros.

Jay Thatcher over 3 years ago

So, we have ideas about a desired result we'd like to achieve, which now requires understanding how to combine 2 or 3 features. That's okay. I'm sure we'll be able to combine them and change them in unexpected ways. But to get familiar with it, I spent significant time unsuccessfully combining the navigation pieces, so I found Brett Mason's CodePen very helpful. Not because I'm lazy or easily offended, but because I struggled with combining the code in the way that works. So I'm grateful Brett was willing to show me how to structure it properly. Now I can improvise and make changes from here. Feather Light asking for help is not being ungrateful or complaining. I think this forum and community is an appropriate place to ask these kind of questions.

Vladimir over 3 years ago

Nearing my 40's, been also doing 3D, pro photographer, not so good with music since I am a bit deaf on one ear since I have Meniere's disease, been doing php development for more then 10 years now.
I am not defensive, I am not attacking anyone, I just want to say that I found article on how to re code F5 top bar in F6 but I am not able to found any proper example on how to make a simple centered navigation in a way that it will work as supposed on all devices. I am not going to play and use try&change approach since the code I am writing in Laravel is going to power new project which is due in 3 weeks. If I was in my 20's and early 30's I might had time to sit and play with it but now I don't.
I am all for learning from documentation but we all need a bit of tutoring in the beginning to guide us in the right way. Without it we would all be roaming around as majority of people on forum and new users are doing now. So simple introduction "those are building blocks for menu, simple usage is this, you can try to extend it with this, try also this...", and we would be happy and try to help new users get along with F6.

Vladimir over 3 years ago

Wisely spoken but completely off topic :)

Avram Walden about 3 years ago

I'm an avid user of Foundation, mostly because it's my favorite grid system. I'm well versed in front end code and this component has confused me since I first tried using in F5.

For users who do not want to use a global $(document).foundation(); call, it is unclear which element to pass into the var elem = new Foundation.OffCanvas(element, options); snippet provided on the docs page. I've tested with every element in the example markup and nothing seems to activate the off canvas functionality. I don't really like that I have to dig through source code to make sense of a framework which has so many man-hours going in to its production, the docs need to be thorough.

It's also perplexing to me that I need to wrap my entire site in the off-canvas wrapper in order to use this. When using modern libraries such as React, Angular or Meteor which encourage writing everything as components, I don't see how this is usable. How do I include the button in an existing menu without rewriting the entire structure of the markup? It would be nice if these things could be dropped, rather than engineered, in to existing projects.

It looks I'm going to end up writing my own off-canvas like functionality, which is disappointing since the entire reason to include a framework like this is so you don't need to re-invent the wheel.

Rafi Benkual over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

 

Gediminas S. over 2 years ago

Thanks Brett Mason for the downloadable example - it is definitely needed here, because there is so many places to make mistakes. I have been integrating so many javascripts in my developer experience, but still, javascript is the hardest part to make it work together with other scripts in the website, so downloadable examples are so helpful!

I have found one glitch in this example. When hovering <ul> section, there is a blue line under first menu <li>, which continues to appear after hovering to any other <li>. Why this happens? 

Thank you guys!

The Glitch

Rocky Outcrop over 2 years ago

Good catch, I see that too but on my browser (Chrome) it's grey. 

Very odd. It appears when the off canvas menu button is clicked and the new menu slides in.

It disappears when hovering on the off canvas menu. 

Only appears on the first element. Looks like the sort of thing you'd make appear briefly having clicked a link just before the new sub menu slides in.