Join Jen Kramer for an in-depth discussion in this video Working with Off Canvas, part of Up and Running with Foundation 5.
- View Offline
One of the incredibly cool new features of Foundation 5 is this Off Canvas menu. And I'm looking at the documentation for this on the Foundation website. And, what we mean by off canvas navigation is demonstrated right here in this particular box. You'll see the hamburger button over here on the side of the page. When you click that you'll get your navigation fly-out over here on the left side of the page. And you can scroll up and down to access whatever is there. Click the button again and it disappears.
And once again, this div tag is also going to get closed all the way down at the bottom at the document. So down here, we're going to go ahead and close this, /div, down here. And once again I'm going to put in a comment. End inner wrap must go after ALL content. Foundation documentation doesn't necessarily make this as clear as I would like, at least this point in time. So be very, very sure that you do this and put these divs in place here.
Otherwise, what'll happen is your entire webpage will wind up in a very, very tiny little window and impossible to read. Then, if we scroll all the way back up to the top of the page again. In our nav tag that we have here, we're going to add a class of tab-bar. And inside of that nav tag, which is now not going to end down here at line 29. We're going to put the closing nav up here, on line 16.
Inside of that nav tag, we're going to put the following. A section with a class of left-hyphen small and inside of that we're going to put an A tag and that will be the class of left-off-canvas-toggle menu-icon. This is followed by a span, followed by a /span, followed by a /a.
Okay. What we got going on there? Well, once again, menu icon is going to call for the hamburger icon. And left off canvas toggle is going to style that to appear on the left side of the page just like you saw in the foundation example. So that's the end of the section, and that's the end of the nav. Our UL here winds up getting styled in an aside tag. So we're going to say aside class of left-off-canvas-menu.
Okay? And then this UL, and I'm just going to tab this over a little bit to improve our nesting. This UL will have a class of off-canvas-list. Okay. So then we close our UL, we close our side. And then finally we're going to offer down here an A with a class of exit-off-canvas, followed by a /a. Alright, so what does that all mean? You're pulling the menu open and you're closing it and so that's what this particular link is for.
To help you be able to get rid of the menu when you're done with it. So that's what that purpose is. Okay. So, provided that I have put in all these texts correctly and I have nested everything correctly. If you go on ahead and save this and then you come back and you refresh your webpage. You now have a black bar going across the top of the page and over here on this side is your off canvas navigation button. If you hit that, then this is going to swing out and show you the navigation that you have here on your page. All right. So that is off canvas here.
You might of notice that off canvas really isn't maybe the best choice of navigation for a gripping huge screen like this. It works really well when you shrink down to a little screen like this. Rather than having the enormous drop down that you have here, which could be quite long depending on how many links you have. You now have this more friendly menu that's swinging in from the side. This is a little bit easier to navigate, I think on a foam. There's certainly plenty of room here to click with a finger, but you know, on your desktop, I think I'd prefer to go with top bar.
Would it be a wonderful thing if you could combine off canvas with top bar? Hmm.
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips