Bootstrap Tutorial for Beginners - 10 - Sidebar Menu

Facebook - https://www.facebook.com/TheNewBoston-464114846956315/
GitHub - https://github.com/buckyroberts
Google+ - https://plus.google.com/+BuckyRoberts
LinkedIn - https://www.linkedin.com/in/buckyroberts
reddit - https://www.reddit.com/r/thenewboston/
Support - https://www.patreon.com/thenewboston
thenewboston - https://thenewboston.com/
Twitter - https://twitter.com/bucky_roberts

---

Closed Caption:

are ready guys welcome back in in this
video I'm going to show you how to make
a sidebar layout that you can toggle on
and off
now this type of layout as you can see
it has a sidebar on the left where all
of your usually navigation items are and
your main area on the right
this is the part that whenever we
collapse it look what happens is just
doesn't shift over actually expands and
is responsive now another reason this
layout is cool is because on smaller
devices let's say a phone that was that
sighs the entire menu is off the screen
in the user can toggle it whenever they
you know want to go to a new page or do
whatever so it's one of my favorite
types of layouts you put that back to
normal and this is actually one then i'm
working on for a little section of my
website right now and I don't know I
just like it because it feels like i'm
working with actual piece of software
and it looks kind of like a control
panel rather than you know
plain old boring generic website anyways
whenever we make this project here's
what we're going to do we're going to
have a rapper and this wrapper is going
to encompass everything
so the rapper is essentially your entire
website now inside here we're going to
have two sections the sidebar in the
main page content now the rapper is
going to say okay depending on and then
we're going to write a little bit of
JavaScript you want to use this layout
which is all your main content or this
layout with the sidebar
so what we're doing is we're making two
layouts one with the sidebar
one of the outside bar and we're going
to use this button to switch between
them
it's pretty easy so let's see if we can
figure out how to do that now
i already added two files one is this
index HTML this is our basic template
and this sidebar . CSS you can actually
stick it all in one file but whenever I
post it on github arm you know it was
kind of going to look jumbled together
so since I have my CSS and another file
actually need to include a link rel
stylesheet
the hof sidebar CSS
all right now remember what we need to
do in order to get this functionality is
we need to surround everything in a div
our main div and this is our rapper
you can actually give it whatever i do
you want but a lot of people usually
named a trapper get everything properly
formatted and remember we're gonna have
two sections one is the sidebar and the
other one is the main content i'll just
say age content and another thing i want
to show you guys is that whenever we
design this layout
I'm going to have the sidebar be
unresponsive that just a normal generic
sidebar it's going to be static
the only bootstrapping we're going to do
is this main page content because that's
the area you see that expands and
contracts is pretty much adaptable to
your website
this can just be okay a static little
chunk of HTML
do you want to display it or not so of
course you can do whatever you want but
i'm just going to stick with the bare
basics
so first let's make the static non
bootstrap sidebar so make a div and I
just saw at my items that items in the
navigation list as an unordered list
so anyways the ID of this could be like
side bar wrapper and let's just stick on
order listed here so we have some you
know navigation items and I'll say
a class sidebar half we just make like
three of them and we will make them
linked to something
let's make a bed link and uh can we have
the first one the account page and on
order some other pages that we have like
settings and log out or something
so say that I don't know this is like a
social networking admin panel whatever
who cares re now that's all we're going
to have for the sidebar in now i have to
cough all right
a little whooping cough there alright so
now we get the fun part of the page
content
so this is the part that we have to make
adaptable all were doing with this is
we're going to say okay do you want to
display or not so I'm going to be
putting everything in diff just so i can
design a little bit better and I need ID
so we can reference it and this can just
be like a rapper
so this is going to be your entire right
hand side
so now we have to do is we need to
bootstrap it so you know it's actually
responsive and first thing that we need
to do for that is put it in a container
and I want mine fluid because it's going
to take up the entire width of this
right hand side and now inside here you
remember not dialogue we need a rose
and for each row we have a column now
for this right here you see that i have
three columns one for this one for this
and one for these panels in this example
I'm just gonna make one huge column
because I want to make it really basic
just to demonstrate this idea but
whenever you're designing actual site
feel free to put you know a three
different columns in here or you know -
and they can be different sizes whatever
you want to do so for div
I'll set this class equal to column
large 12
so just set it equal to 12 if you want
to take up the entire thing and now
check this out
see in this example what i did is i made
a toolbar at the top but in the
demonstration i'm showing you guys is
going to kind of look like this we're
just a sidebar and the main area so he
can't stick that little button that the
user clicks on the toolbar because we
don't have one
so in this example I'm just going to put
it like somewhere around here and uh you
know do whatever you want like i said
but that's what i'm going to do so it's
going to be a link href i'm so lazy that
every life time I had a key i just wait
for like all my code to pop up for me so
that's what I want I don't know kind of
takes me awhile but whatever
alright so now what class that we want
what we want to make this into a button
so button
In button success so this will just be a
plain blue button and now we need to
give it an ID so i'm gonna name this
menu toggle and i'll just say like
toggle menu pretty creative
so essentially we're going to be
clicking this button right here and
whenever we click it it's going to
change layouts to either this one or
this one
so that's all we're going to do we have
two different layouts in this button is
going to switch between them
easy easy beautiful cover girl stuff all
right let me just add a couple other
things so by side bars sidebar layouts
are cool and just a paragraph
let me add a bunch of texts in here so
you guys can see whenever we hide the
menu and show it again that the content
is actually collapsing and expanding and
our responsiveness work so i love by
seems like a good thing to type
all right that should be enough text to
a take up the entire screen now the last
thing that we're going to do is we need
a little bit of JavaScript code it's
actually jquery and this is the code
that's going to change the classes so
again like I said we're making two
different layouts
we did it yet but we're about to and CSS
for layout is this one layout is this
now in order to change those we're going
to give a rapper
the rapper a classic alike will say like
is toggled or is not toggled or are
showing menu or not showing menu
whatever but that's what that bun is
going to do so that's the reason for
this driver script and up like a menu
toggle script
script script and the first thing is we
need to select this button right here
because this is the thing that's going
to cause the action so to get it
the other side menu toggles so this is
the selector if you aren't familiar with
the jquery so we want to select this
button and this is just were referencing
it by the ID so we're going to select
that bun and we're going to say whenever
the button is clicked
then we can do whatever we want so
function
not one II let me make sure I got more
semicolons in place
all right so here's the thing that we
need to watch out for you see this
button right here
it's a link but the default action of
your browser whenever you click a link
is to go to a URL
now all we're doing with this link is
retreating a kind of different we don't
want to go to a new website
we just want to use it to talk with the
menu on enough so we actually need to
take care of that by preventing the
default action which is the pretty much
tell the computer that hey whenever you
click this it's not supposed to uh you
know from the default action of going to
a webpage so II prevent default event
so again this is the event in other
words whenever you Cee
that's just the button click and that's
all that means in we're saying OK
prevent the default arm clicking action
of a link in other words don't go to a
URL then you know it's kind of weird way
to say it but whatever
and what we're going to do after this is
we just need to change the layout the
overall layout
now the reason i made this parent right
here is because this is our container
for everything else
so all we have to do is we need to give
this a layout and actually select this
and it's pretty much whenever we arm
have a reference to this then we can
control whatever is inside it
pretty good way to explain it
alright so we're just going to say for
the rapper
toggle clasp and i'll name it
toggle alright so what this means is
whenever you click this one right here
whenever a click on the button happens
then
don't worry about going to another URL
and also toggle this rappers class to
toggled or not call
toggle that's what this toggle clasp
function does it adds or removes the
toggle clasp so by default right now it
doesn't have it when we click it it will
add it when you click it again it will
hide it when you cook it at it and that
is how we can just say on and off and on
and off and you don't have to worry
about a bunch of state variables really
easy that way
so now we get to hop over in the CSS in
our she stick that in on new video but
for now
there you go thanks for watching see you
next time