Foundation for Responsive Web Design Tutorial - 9 - Top Nav Search and Left Menu Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys in this video I am gonna
show you guys how to add a search bar
right here so let's say that you want to
add a search field so the user can type
a name of their friend and find their
profile easy then I'm gonna show you
guys how to do that and also how to make
a simple side navigation menu so first
things first the search so search so
what we're actually going to be doing is
we're gonna be creating a new menu
button and the class of this is has form
since the input is actually a part of a
form now inside here we actually need to
make a div before we start making you
know our different columns and this div
the class of this is going to be a row
and collapse so this is our row and
inside here we're gonna have well of
course we need 12 columns don't forget
that but we're gonna break it up into
two sections really the input is where
the user types you know whatever they
want the name of their friend whatever
they're looking for and also a button
that's gonna be on the right and
whenever they click it it's gonna start
searching so div class in the first one
will be medium I'll just change this to
eight columns and let me make my other
one real quick so this first one is
gonna be for the input in the second one
is gonna be for the button so in the
input one just type inputs and type text
I don't know why you would really have
anything else you know no passwords or
anything or actually you may if you want
to put the login up there but for the
placeholder I'll put like a fine friends
alright so the inputs taken care of
looking good and for the button we just
make a really simple area check what re
so href and for the class we'll just say
alert button expanded and you guys are
gonna see what that is going to look
like and what text you want up here on
your button would just say search
looking good so there we go let me
refresh it and check it out
so this entire search section is
actually a new menu item well we broke
it up into two different column sections
this one is eight eight columns wide and
this one on the right is four columns
wide so I don't know maybe you want to
search for Bucky hit search and then
it'll search for Bucky alright so the
next thing I want to show you guys is
this so this is our top navigation right
here where it says nav now let me scroll
down and underneath this I'm gonna show
you guys how to add a simple side
navigation and actually let me do this
let me delete this all so I'll make
things a little bit you know easier on
you guys so I'm gonna add a div a class
in a row and inside here let's break up
this example into three parts so we'll
have the side navigation on the left and
it'll take up like four columns and then
we'll have some other stuff on the right
so I just say medium four columns and
actually let me just add another big
section on the right since we're not
going to really be putting anything in
here we'll just say right side and give
it a background color up to whatever
that color is so the actual menu is
gonna go on the left hand side right
here so let's go ahead and get started
on that so it's going to be an under
list and the class of this is gonna be
side nav now inside here we're just
going to have a bunch of different list
items with links inside
now just say like children games
what's this website gonna be what will
make this website so anyone can go to it
kids adults so I have some games for
children and then we'll have some adult
videos right there so you know something
that kids can enjoy as well and I'll
show you guys another cool thing all
right let me pull it logout at the
bottom so what I like to do whenever I'm
making my navigation menus is I'd like
to have all my links and then four links
that they don't click that often I'd
like to add a divider and in order to do
that it's just the class divider so this
is just a little line a horizontal line
and it just helps you know differentiate
between different sections so let me
refresh this and show you guys what's
going on so this is the left section
right here and foundation actually gives
you a bunch of cool functionality being
that when you hover over it then you
know you don't actually have to go over
to the text then it's actually block
level elements and a cool little
background too and here's the right side
just like that and this little line
that's the divider I was talking about
so of course you may want to style this
so it doesn't look you know this awful
but that's the basics of how to add
search menu to your talk navigation and
also how to add a left menu with
dividers and you know whatever soon as
the other thing you want to add to it
you can do that as well but yeah there
you go thanks for watching see you guys
next time