Foundation for Responsive Web Design Tutorial – 6 – Off Canvas Menu

[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –


Posted

in

by

Tags:

Comments

14 responses to “Foundation for Responsive Web Design Tutorial – 6 – Off Canvas Menu”

  1. muss Avatar

    can i place my menu and my main content in different sections on the site, for example my menu in my header and the rest in body? or does the inner-wrap have to sandwich every thing?

  2. Rafi Benkual Avatar

    Nice video! Great Off-canvas navigations are particularly hard to find since they are usually required to do so many things: To open left, right, top, bottom, overlap, push, contain submenus, work with sticky or fixed triggers and more.

    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

  3. Decibel Avatar

    How can i make this work on foundation 6?

  4. Michael Devenport Avatar

    I highly recommend $this (responsive) design_tool_kit / framework.
    Successfully implemented in a tutorial I just completed ( a "Ruby on
    Rails" Build an Online Store with Foundation & Redis ) if interested
    find a ton of info & tips @ https://twitter.com/WEBrip . Thank you so much much Bucky! – Michael 😉 + everybody here is Bucky's Twitter account https://twitter.com/bucky_roberts (follow him!)

  5. pnr8uk Avatar

    Hi Bucky loving these videos. However when I try to use off-canvas-wrap with data-offcanvas I keep getting the error Page In HTML 5 the attribute 'data-offcanvas' is not permitted for the <div> tag. Any ideas?

  6. Web developers are the new rockstars...... Avatar

    Hi everyone, this is the first and only comment Il ever leave on youtube, Ive been struggling with this all day and switched to FOUNDATION 5 and these examples work 🙂 so use FOUNDATION 5 for all of these videos……

  7. Huy Kon Avatar

    it's not working with version foundation 6 🙁

  8. Rene O Avatar

    Maybe it's because i'm using foundation 6 instead of 5 i guess. but for the love of coding i simply can't get that exit overlay thing to work properly.. sure i got the overlay to show up and close by using the button by giving it a data-toggle but getting it to close by clicking somewhere else using the anchor tag is a clear Nope

  9. Daniel Fuglestad Avatar

    Someone else having problem with the canvas thingy not working? Nothing works.. have looked all over the markup and it does not seem like a typo. http://pastebin.com/JQ2Bfnhk

  10. Brad Chellingworth Avatar

    Thanks for the great tutorial. I had put "left-canvas-menu" rather than "left-off-canvas-menu" might help others if stuck. class names have too be spot on.

  11. Stephine Aldea Avatar

    hey..thanks for the tutorial…but can you help me how to set the side nav not hidden by default? what i mean is when you load the page in a big screen size the toggle button is hidden ang the side navigation or the side menu is being displayed..and when the screen size decrease to a mobile screen size, the toggle button is being displayed and the side nav go hidden..just like in your example..Thanks a lot..

  12. austin moyer Avatar

    x.x i keep checking back and forth between your code and mine…. not working and i know once i find the error im going to kick myself….

  13. AssossaGPB Avatar

    Mind making a massive cheat sheet for all this your going over?

Leave a Reply

Your email address will not be published. Required fields are marked *