Foundation for Responsive Web Design Tutorial - 8 - Top Navigation Bar Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys in this video I want to
talk to you a little bit more about that
top navigation menu and I'm gonna be
showing you guys how to add a bunch of
different components to it for example
not only the title in the buttons but
also how you can have a drop-down menu
and however let's say you want to
collapse the screen or you're looking at
it on a smaller screen device and you
don't have room for all the buttons then
you could replace it with a hamburger
menu and a bunch of cool stuff so let's
go ahead and get started so I ripped out
everything from the last tutorial so we
have a blank slate right here and the
first thing I'm gonna do is before I
even add any row I'm gonna add nav and
it takes a couple components the class
is top bar and it also needs another
keyword so it can work with JavaScript
data top bar I guess it's not going to
pop up for me and the role of this is
going to be navigation all right so
that's our starting point now this
entire navigation menus can be broken up
into two parts the first one is just
your website logo and the second part
are the buttons now there's actually a
lot involved in the buttons and it
includes you know the drop-down menu and
all that but we'll just group it into
one main section called the buttons so
for the logo I'm gonna make an unordered
list and I'm gonna give this the class
of title area now inside here I'm just
gonna have item that says the new boss
then and I'm also gonna show you guys
how to do something really cool with the
hamburger icon so first before we get to
that I'm gonna add an O I in the class
is just gonna be name and I'm just gonna
stick my logo in here so my logo is just
gonna be basic text but if you want to
include you know your little image of
your company's logo whatever you want to
do that's fine so a href
they in there and also let's just type
the new Boston won't get too creative
alright so there's my logo all it is is
the word the new Boston pretty boring
but hey don't judge me alright so the
next thing I want to do is this right
underneath this list item right here I'm
gonna add another list item and I'm
gonna say toggle top bar and menu icon
so these are two separate classes and
what this is going to do is it's gonna
say for smaller screen devices whenever
we don't have enough space to show all
the buttons on our menu then just create
a hamburger icon in other words a
drop-down menu and we'll stick them all
in there instead and we don't have to
write this functionality ourselves it's
already built in the foundation which is
pretty awesome
now one other weird little tricky thing
is that inside here we need add a dead
link and we just need to add our spans
like before so now it says okay when I
don't have enough room this is where I'm
gonna put that hamburger icon so the
user knows that it's a button and they
can click it again kind of weird but you
know yellow foundation their creators
not me so now that we got all our basic
functionality taken care of let's go
ahead and add the menu buttons so not
the hamburger icon the actual buttons
such as like file edit view whatever you
want on top of your menu so section and
the class is top bar section and let me
break it up like this alright so first
I'm gonna make my right buttons and then
I'm gonna make my left buttons so on my
menu I'm gonna have some buttons on the
left and I'm also gonna have some
buttons on the right and let me show you
guys what I'm talking about so the menu
bar right here here's your entire menu
and you see how you have these buttons
on the left and it's actually probably
going to look
but closer I let and you also have your
buttons on the right well you can
actually break these up in two different
sections or if you only want to have
buttons on the left you can do that as
well
but this is how you do it this way so
for the unordered list the ones on the
right you give it a class of right
beautiful now I'm actually gonna copy
this actually you know what it's gonna
be painting alright so now let me just
make some stupid sample buttons like
profile and for this list item and the
link itself you have no styling just by
default the only time you want to have
styling is if instead of a regular
button then you want to make it a
drop-down so we'll say that we're gonna
have well say that make will make this
right here that says Bucky and then it
says my profile and logout on the right
hand side so it'll say Bucky of course
we would have to change that for the
user's name and for the list item itself
we need to add a clasp and we need to
say has drop-down that's just our way of
town Foundation hey this isn't just a
normal um you know list item button it
actually has a drop-down menu inside it
so of course we need to actually add
that functionality and in order to do
that inside your list item where you
would typically just stick a single link
instead you're gonna make that link and
that's the default text that's gonna
appear on it and inside you make another
unordered list so it's like a menu
within a menu so this is going to be the
drop-down menu inside your button now
for the class this is just drop-down
that says this is the area that pops up
whenever the user clicks this button and
then you can just add some items just
like before so what was it like I don't
know we'll just say logout
we'll just keep one make things really
simple so now let's check this out so
this is our regular bun our regular list
item and then we have a special list
item that's a drop-down and of course we
only have one item in the drop-down
which is logout but if we wanted to add
more than we could do that as well
now also take note that it makes a
little triangle on the right-hand side
and that's how whenever the user is
looking at your webpage they know that
this is a regular button and whenever I
hover over this that there's gonna be
more so I don't know I think it's a
pretty cool little indicator but anyways
now let's just go ahead and make our
left buttons and this is gonna be really
boring because we're just gonna make
class of left and we'll just stick some
normal buttons in here see let me save
this behind one and button two beautiful
so actually let me change this to
something that would be a little bit
more useful I really don't like just
calling things like placeholders I hate
that names foo and bar you know how like
all the examples use fubar I'm like what
is this this is the dumbest thing I've
ever seen so that's why I never use
those alright so we got our navigation
menu broken up into two sections the
logo and the buttons and we also took
the button section and broke this up
further so we have left buttons and
right buttons and check this out
whenever we start shrinking this and
foundation is like hey you don't have
room for all these buttons what it does
is it creates a hamburger icon right
here and whenever we click it all of our
buttons are right inside here now if we
ever ever drop down like this whenever
we click it it brings you in to that
drop-down and then you can go back and
forth back and forth tah go on toggle
boom so a lot of different pieces and
there you go that's the basic structure
of how to make mom and also I promise
you to mention this in like the first
video any source code not only for this
tutorial but for all my other tutorials
I'm going to be putting
on my github so if you guys are like
alright I want to end like a drop-down
menu but I'm too lazy to type all this
just head over to my github and you know
wherever you saw that template from the
first video they're all going to be in
that same directory so just copy the
pieces that you need paste in and you
know like change the buttons to say
whatever you want but there you go in
that way you don't have to type
everything again and it's all there if
you ever want to come back and grab it
so thank you guys for watching don't
forget to subscribe see you guys in the
next video