Foundation for Responsive Web Design Tutorial - 6 - Off Canvas Menu Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys welcome back and in this
video I'm gonna show you guys the very
basic structure of how to create a
simple off canvas side menu now if you
guys don't know what a off canvas side
menu is is basically a menu that isn't
displayed at all by default but whenever
you click a button it appears so this
right here is off canvas side menu now
just in this video the menu I'm gonna be
showing you guys is gonna be really ugly
because I'm not gonna apply any styling
to it so it's not gonna look as cool as
this I just want to show you guys the
basic structure of how to create a
toggle button and how to create an
actual menu and how it differentiates
from your main content and then I'll
leave the styling up to you guys so now
that we know what it is let's go ahead
and create it so the first thing you
should probably notice is that I took
that row that we use in all the
demonstrations so far and I deleted it
because we aren't starting with a simple
template what we're going to do is we
actually want to have part of our
template off the screen at some times
that left menu so instead of a row what
we use is a class called off canvas wrap
now the only other thing that we need to
add in here is data off is it going to
pop up canvas so this says that we want
to make a layout in foundation and it's
gonna have off canvas side menu now
inside here you might want to have it
like this so div class inner wrap so now
inside here is pretty much where we're
going to be putting all of our stuff the
menu the main content everything so any
time you make one of these menus this is
your starting point right here now for
this menu demonstration we're gonna have
four basic parts and let me write a
comment for all of these parts right now
the first one is the toggle button so
this is the thing that you click and it
toggles the menu to be displayed or not
displayed now let me add all my comments
right here so we can see that the
different piece
we have to make before I actually start
making everything so the second piece is
the actual menu and I'll say off canvas
menu so this is going to be the area
that slides in and off the screen now
the third part is just your main content
so this is just the body of your website
whether it's you know the welcome screen
your profile picture you know just the
main content of your website and the
last thing is gonna be really easy and
your guys are gonna understand on what
it is later on but I'll just say um how
can I describe this I'll say the exit
overlay and I'll show you guys what I'm
talking about
so in this demonstration you see that if
we ever want to display the menu then we
can toggle it on and off with this
button right here but you may want to
add functionality to your site where if
the user opens the menu and they're like
yeah I don't want to display it anymore
they can click in this area and that's
what some people do they actually don't
click the toggle button again they click
in this area whenever they just want to
hide the menu again well that's what
that last piece of the puzzle is gonna
be right here the exit overlay is pretty
much gonna overlay your tie remain
content and whenever they click it it
hides the menu again simple enough so
those are the pieces let's go ahead and
get started so the toggle bond is
actually really easy you can make it a
fancy button if you want but in this
tutorial I'm just gonna make a really
simple link again the look of it is up
to you I'm just gonna show you guys the
functionality of how it works so for the
class the class you need to set to left
off canvas toggle so the toggle left off
canvas toggle that's the class of the
button or the link itself now just for
the link you can just make it a dead
link and i'll just say toggle menu so
whenever we click this what it's going
to do is it's going to hide or display
the menu depending on if it's already
showing or not so now we actually have
to
make the actual menu so we have
something to toggle so I'm gonna set
this equal to aside and for the class
this is where he said to left off canvas
menu so remember these are similar
classes so don't get confused the toggle
at the end is for the toggle button
whenever you see menu at the end it's
for the actual menu that's gonna be
sliding in and out now inside here you
can actually have anything you want I'm
just gonna make a really simple
unordered list and for the class I'll
just say no bullet since I don't want
those little dots on the left side my
list items and let me just add some fake
list items real quick so a href and i'll
just say okay making sure did an
autocomplete in a weird way and why am i
getting an error right here because it
did autocomplete in a weird way all
right
that's a little bit better for some
reason whenever I make links inside of
list items in this IDE it's kind of
annoying so I'll say home profile and
log out now in this demonstration
clicking on these isn't going to do
anything it's just for looks but this is
how you would do it if you ever wanted
to now for the main content this is
where you write all the stuff we've been
learning up to this point so again
nothing new here all you do is you make
a basic row and you stick your columns
inside so whether you want it to be
images headings quotes pictures whatever
you want you don't need to you know make
this specific to the actual menu or
anything like that just make a normal
website right in here and all the
surrounding stuff is going to take care
of handling it properly so I'm just
gonna make like three columns so I'll
say class let me just make to some
medium six and I'll give it a background
color too
and columns so I just say uh what can
put in here like any now dude
let me just add another one and give it
a different background color of three
and I'll say this is some sample
contents looks good so a pretty boring
site but whatever it'll be good for this
demonstration now the last thing I want
to do is add that exits overlay so for
this I'm gonna add a class and this is
exit off canvas now it's just gonna be a
link are you freaking kidding me
alright so this is gonna be linked and
nothing is going to be inside this link
because whenever we give this class it's
just gonna overlay your entire main
content right here and I'll show you
guys what I'm talking about right now
so this is our incredibly horrible
looking website and when if we click the
toggle menu look at that our menu
appears on the left side we can click it
again to show it or hide it and of
course our main content right here
adapts appropriately now usually would
want this toggle menu in some kind of
top navigation bar that you curate and
you would want to make this not look
like you know I'm gonna throw up
whenever I just looking at this the
website design but again the styling is
up to you and I'll show you guys why I
included this element right here because
if the user ever has this open and let's
say I want to hide it so I'm just gonna
click right here then it closes so you
don't have to hit the toggle button you
can actually click anywhere on the
screen when the menu is open and it's
going to close so again this only works
when the menu is open when it's already
closed and you try to click then it's
not going to do anything it's just going
to ignore it and again most people use
this whenever they're working on smaller
devices like phones because they're
always tapping with their finger it
isn't really the mouse you have to worry
about but there you go that's the basic
structure of a simple off canvas side
menu remember
make your main template and then have
four parts the toggle button the menu
itself the main content and the exit
overlay