Foundation for Responsive Web Design Tutorial - 7 - Dual Menu Toggle Layout Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys so now that we know the
basics of how to create an off canvas
menu what I want to do in this video is
a couple things first I want to show you
how to create some advanced
functionality for it and what I'm gonna
be doing is showing you guys how to
create the left menu like before and
also a right menu so you can have dual
navigation menus and I'm gonna be making
this mini bar at the top so the last one
we just had a link and it said toggle
menu or toggle button or whatever well
99% of time you have this toolbar at the
top with icons so I'm gonna be showing
you guys how to add those and it's just
gonna look a whole lot better so what we
need to keep from the LES Itoro is the
basic shell the basic structure of it
and I also kept this right here since
this exit off canvas it doesn't change
and by the way I probably should mention
this right here this little keyword
that's needed by JavaScript so it can
work with a menu and actually have the
functionality to display it and hide it
so that's what that is probably should
mention that in the last video but
that's why you need to include it so
what we're gonna be doing first is we're
going to be creating the Left menu and
the right menu and actually before you
even do that let's go ahead and create
that top menu bar do I want to
capitalize everything or not no I don't
art so let's go ahead and create this
part first so we're gonna have two
hamburger icons these little three lines
one on the left one on the right and
I'll just put the logo the new Boston
right in the middle
that'll be easy to understand and why is
this like highlighting in yellow
tweaking meow art so for the top menu
bar you just have a navigation in the
class is set to tab bar right like that
now if you want to add the individual
buttons then what you do is you make a
new section and for the class for the
left one you're gonna write left small
now you write small because you don't
want it to take up like an equal amount
of width as you know the
in the middle you just want a little
section because it only needs to be the
width of the actual button inside so
that's our section now inside this is
where we actually put that icon the
hamburger icon so a the class of this is
left off canvas remember it's toggle and
the other one is menu icon nope
all right there we go now inside here
this is where things get a little bit
weird and let me make sure I have my
dead link so I don't forget we're gonna
put a span just like this but we're not
going to add any classes and we're not
going to add anything to it all we're
gonna do is we're gonna make an empty
span now you're like uh why would you do
that why do you need that well
foundation needs an empty span because
this is how it says okay I'm gonna put
the icon the menu icon those three lines
right here so why they made it this way
I'm not sure but you have to yell at
them not me so that is our left bun
right like that and let's refresh and
see what we got all right so we have our
main tab bar this entire dark thing is a
tab bar and this is the left button and
as you can see whenever you click it is
trying to toggle a menu that doesn't
exist yet so we'll create that later on
and I might as well keep that nice and
tight alright so after that left icon
I'm just gonna have the middle section
where it says the new boss then so you
know I have some branding in my app so
section not SEC section there we go
boom tomato tomahto now the class for
this is a bill and class you can add
middle to middle align everything in tab
bar section now inside here just add
heading one and for the class set equal
to title and for your title you don't
name yours new Boston but mine will be
the new Boston so now we made a title
that's going to be displayed in the
middle top of our little navigation tab
bar up there so the only other thing we
needed to do now is you know how we have
a button on the left well we're gonna
make one on the right so it's gonna be
really similar to this so for the
section of course it's gonna be right
small since you want it to be to float
to the right and instead of toggling the
left menu whenever we click it we want
it to toggle the right menu so we need
design two separate menus and that's
what we're gonna do so this one toggles
the left this one's gonna toggle the
right and then we got some branding
going on looking good so now let's go
ahead and make up our actual menus so
for the left menu like before we're
gonna have an aside and for the class of
this it's just gonna be left off canvas
menu now in here I'm just gonna make an
unload list and I'll just say canvas
list so this is actually probably a
better way to make your navigation menu
instead of just making you know your
default standard under lists it gives
you a little bit default styling and
I'll show you come some other cool
tricks as well so inside here have a
list item and you can actually have a
label now inside your label um can I
have like pages or something so yeah if
you have different subsections so for
example you might have on your left menu
a bunch of links for your profile a
bunch of links for your settings
whatever you can add a label at the top
of each one and it just gives a little
indicator of what this subsection of
items is for so now let me just add I'll
just make one link and then I'll let you
guys be creative and do whatever else
you want to do alright so the rest is
just a regular list item to show you
guys what that does so this we don't
have enough content or any content at
all so that's why it's not displaying
but you can see that the label
is clearly indicator that hey this is
not an actual button that you can click
and your buttons up here as big button
so when we actually make some content
and stick it in there you guys are going
to see those menus a little bit more
clearly but now what I want to do is I
want to make the right menu so changes
to write off canvas menu so now whenever
we plus press that button on the right
it knows hey this is the one I'm
supposed to be toggling and off cam is
list will just say uh-oh no maybe the
menu on the right hand side is your
friends list and displays all of your
friends which is no one not even in my
fake examples do I have any friends oh
so sad so sad all right so now all we
have to do is you have to make our main
content and just go ahead and do this so
for the section I'll show you guys some
other cool techniques I don't want to
overload you guys with too much but this
is another thing that you can do so you
can have your main section and let me
just add some paragraphs with some by
the way I use this all the time
bacon ipsum
it's like lorem ipsum but it gives you
like words about bacon and let me just
copy this
so just making some fake filler content
right now so we have three paragraphs
stick them in our main section looking
good and yeah you know what that is
actually it so we already have this
taken care of so let's see what's going
on right now so this is our web page by
default and this is what it would look
like on the large screen device now
whenever we click this left menu toggles
the left menu and now that we have
content you can see that this is the
label and it's a little bit smaller so
the user knows not to click it and these
are your individual buttons that would
go to a different page or whatever you
wanted them to do and of course we can
have one on the right as well so pretty
cool and just to show you guys that it
is responsive smaller devices it would
look good so actually for the chat app
I'm making like I said I'm gonna have
all the rooms right here so you know if
a user wants to chat with their family
room or their friends or maybe their
work they can select the room and then
once they're in the room it shows all
the people or users that are in there so
it's gonna be pretty cool but just
wanted to demonstrate that so hopefully
you guys enjoyed how to make a more
advanced and slightly better looking um
toggle menu layout so thank you guys for
watching don't forget subscribe see you
guys next time