JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5

Tutorial for creating custom JavaScript and CSS drop down menu systems for your website. Exploring Javascript functionality to render special behaviors in our drop down list menus. Pure CSS menus are king but JavaScript in the mix is fun too, why not play!

---

Closed Caption:

hello my good friends today I'm going to
explain a menu system and then share the
code with you guys
first let's take a look at the script in
action so you can see what it is before
listening to me ramble on 42 hours
it's a world of warcraft menu system
that's one this tutorial requests from a
good friend of mine named Brendan was
teaching me how to get hot chicks in
return for me teaching him web
development stuff you can see this is
the forum topic right here I'll show you
he said he wants to understand how to
create the world of warcraft menu system
which is this one right here so you can
see as I go over the menu items they
fade out and fade in and they're all
kind of drop down menus at the show sub
menu items under the main link when you
click it sounds like he's giving a
little confused in his own experiment so
we're going to help him out with this
little video and script
now let's take a quick look at what the
exact code that you will be getting
today produces this is the page here you
can see as I go over the menu items each
fade in and out and they give me a nice
submenu under the menu item and this one
is programmed to not be a sub menu item
that just goes to direct to a page but
these won't go anywhere they won't
navigate anywhere when the user clicks
them they'll just open up a menu and
actually they open and close the menu so
you can see the user can just toggle it
right there and at the end of the video
i'll show you how to put some
enhancements in where you can customize
the way it x for instance if you want to
roll down into the page and you want
that menu to go away right when you
leave its boundaries
we're going to add some code for that so
i'll show you how to do that as well
that way you can tweak it out to your
liking and i'll also show you how to
Center those if you want to send to
those or maybe push them a little more
this way to the left so they're not so
much on the edge of their corresponding
link that opens them see what I'm saying
and I also threw in a little bonus of
showing how to blend the background of
that drop menu into the background of
your header that way things look a
little more blended for you if you want
it's just simple JavaScript CSS and HTML
ok here's the script that I produced as
the standalone example that you saw
right here the first thing you're going
to need is it you want your menu to have
these nice little Sadie kind of in and
out fade effects going to have to use
either jquery or you can use my script
that I use right here
hey defects that Jas which is just a
more efficient way to fade in and out
you can fade objects on your page in and
out using this lightweight script here
which works externally just like jquery
does so if you look inside of your
jquery file you'll see that it's much
much much much bigger than this so this
is just the slim lightweight way to fade
things in and out if you don't already
applied jquery to your pages but if
you're already applied jquery to your
pages it would make sense if you want to
keep jquery and play to just use your
jquery fade methods if you're familiar
with calling jquery's fade methods and
you can just use jQuery instead of my
file here but if you'd like to do it
exactly the way I'm doing it you can
just grab this fate effects that Jas
file and this right here shows you how
to apply it to the script actually this
code in the script already shows you
you're going to be getting all of this
code here
ok so basically the cold from fate
effects . Jas is going to be in your
file here in this document and we can
use those functions we can call fade in
and fade out anytime we need or like I
said you can link to jquery right here
link to the jquery file and you can call
it fade in and fade out methods now
you're going to see in the script
there's extra things in the page that I
put in place that are really not
necessary to drive this menu system but
the other things are in place to show
you how to lay this menu system anywhere
you need to be super instance if you
have a header so i put a header in place
i also put a logo did and my logo did is
this dashed blue line that you see
that's a div that holds the company logo
and right under it is where I have the
menu system give so to understand this
script fully you're gonna have to have
basic knowledge of CSS HTML and some
JavaScript skills
not much
explain the JavaScript more than I'll
explain everything else i'll start with
explaining the HTML then we'll touch on
the CSS and then i'll explain this
JavaScript here let's take a look inside
the body element of the page all of this
content here that i have highlighted
first thing is i have a comment that
says start header then I have another
comment with a header ends says and
header that way you can keep track of
where things are in case you have a lot
of menu items within your header and
then under that we just have a div that
holds everything else on the page so i
just called it rest of page so it has an
ID of rest of page and let's open that
you can look at the HTML just an h2
heading and a paragraph element you can
have all kind of crap in there that
would be like the rest your page wrapper
for the rest of the page that div face
was close that up now let's take a quick
look at the HTML within the header did
you can see the first thing we have that
logo give sitting in place right here
above everything else and it opens and
closes right there in that line then we
have another comment for ourselves says
start the menu system and then when the
menu system ends you put a comment
analysis and the menu system you can see
that did that contains all the things
within the menu system is called header
menu system and it has a nice long name
just because I wanted to make it clearly
identifiable to you can shorten that up
after you figure things out and within
the header menu system which is sitting
under the company logo i'll show you
again here's the company logo did that
has the blue dashed line around it and
then under that is the four items within
the navigation menu so you have your
header menu system which is that
navigation menu and here's your for
items that are within it
now the first three have IDs of
container one container to and container
three the last one doesn't need an ID
because it's not going to render a
drop-down that just goes directly to you
can make that go directly to contact the
PHP or HTML whatever you working with
that's just a direct link you see my
contact link that would just go straight
to the contact page and render no drop
down like these do now i'll show you
the energy now i'll just show you what's
going on inside of container one year
and container to and container three its
content is exactly the same pretty much
except it has different IDs so it has an
idea of drop menu one if we open up
container to you can see that has ID of
drop menu too but it's all pretty much
the same exact code in the same HTML
structure within each of those
containers so let's look what is exactly
in container won the first thing we have
in container one here is that link that
says services
let's take a look that's this blue link
right here and remember these containers
container 123 and even this one here are
all set to flow
we're using CSS to do that with floating
them left that way they sit right next
to each other because if you didn't
float them left they would sit
underneath one another they would layer
down the page like a normal block
element div would but using float left
we can make them like inline elements so
they'll sit together horizontally up top
there
ok so after that blue link you'll have a
gift called drop menu one and that is
actually this drop menu here and these
three items within it
you can see my three little link items
within just 3 simple links we give each
one of these little drop menu that you
see here an ID that way we can correctly
communicate to these drop menus through
the JavaScript and we can also style
them up using CSS and we can just use a
class to style them all the same or you
can style them independently with the
CSS as well because they also have
unique IDs so we're putting that to use
in our CSS so the way the drop menu
comes into play is that this services
link has an on mouse down event which is
like similar to on click but i just made
the on click event be equal to return
false
that way it does nothing and we're
giving it a pound signed as the hof that
way it doesn't navigate anywhere we give
it the on click so it doesn't show the
little pound sign in their address bar
when they click this link
what happened is a little pound sign
will show up in their address bar when
they click that link if you don't put on
click return false and all you have to
do is on mousedown you run the drop menu
function for this drop menu one right
here and this is a JavaScript function
that is up in the JavaScript code here
in the head of document i'm gonna
explain that drop menu function and
that's really the magic behind
everything is that drop menu function
ok so you see the inner workings of each
of ID container 12 and three
like I said they all have the same
structure within them but they just have
different ideas for their corresponding
place in the menu and that's all of the
HTML in the document i'm going to skim
over the CSS very quickly because if you
don't know CSS you really should learn
some CSS before trying to adapt a menu
system like this into your pages if you
want it to be too happy if you wanted to
look any different than mine
you're gonna want to know some CSS ok
that's all I'm saying I'm gonna explain
the CSS i have been placed a little bit
this give my header that targets d div
ID of my header right here it's in the
HTML so anything that's within this
affects that did these properties affect
the div ID of logo which is this dashed
box of top inside of the header easy
there's its dashboard right there and
its height its height is really what
determines where this menu is going to
be placed vertically on the page you can
see our for menu items just really
stacked right underneath that logo did
now the next thing is the header menu
system did and that's the div that
contains these four items altogether so
that's the parent element of those four
links you can see it's just set to
margin left 16 so it's not so much next
to the end of the page here on the left
then you target the header menu system
give that contains all four of the menu
items target give within that means
you're targeting the child did
within that main did and each one is set
to float left and have a margin of 20
pixels on the right and left and 0
pixels on the top and bottom so that's
how we're getting a little bit of
spacing here you see this 40 pixels
between each one of these because they
have a margin left and right of 20
pixels each now the next thing is the
drop menus
this is the styling for the drop menus
drop menus are these actual little guys
that pop out here on the page little
magic menus so you can clearly see all
of the display settings in all the
different various CSS properties that i
have a play within that if you don't
understand these properties fully as you
skim through them here and look at them
then you would want to research them in
depth at that point and then that's how
you learn everything and these have a
top position of 100 that affects exactly
where it is on the page in its vertical
position all three of these little menus
i'll show you what i mean let's just
change that to 120 and you'll see what
it does go back to the page refresh it
and then hit one of those items you
pushed it down 20 pixels so you just
leave that at the exact pixel placement
that you want it and then you get a
seamless look I'm not even gonna bother
explaining the rest of those you can go
ahead and research them if you fail to
understand what they do now the drop
menus child a tags so that means all of
the little links within each one of
these drop menus you see the three links
in this menu is three links in this menu
and there's three links in this menu
each one of those links are a tags those
little buttons are a elements link HTML
elements you can see they're set to
block that way they take up a whole
display block within the little dip and
it's not just a little word that has
only the clickable length of the word
you have the whole clickable length of
the block
ok so you know what this rule applies to
all of these lines they apply to those
little links now this just applies to
the hover state of those links you can
see when i hover over those
they change white white background to
change to a blue border instead of the
black you can also actually change the
color of the links to be blue if you
want when you hover over it
let's do that let's go ahead and change
the color of the actual words to be a
bright blue like that now when we
refresh the page you see now when we
hover over and they're still black
little words in there
let's refresh the page now you see we
have nice blue words when we hover over
i put these three rules in place that
way we can specify a left position for
these menu items to get them off of the
edge of the little clickable item that
initiates them you might not want them
straight onto the left edge of those you
might want them pushed in a little bit
this way you can actually sent to them
and this is the styling for the day of
rest of page which we are going to make
the rest of page you're going to show
you some additions to the script to wear
when you hover off of this little menu
item right move my mouse leaves that
little dip that holds those three links
will make that div go away if you want
to have that kind of functionality on
your page and you can make it to where
when you hover off it goes away or you
can make it stay there and then when
somebody clicks OH tries to interact
with something down in your page then
you can make it go away
so there's a lot of different things you
can target and you can make it behave in
a lot of different ways
ok finally we're going to take a quick
look at the JavaScript that's in place
and then we'll tweak the menu out to a
different functionality that i was
talking about
let's open that up and you can see it's
not much at all play the first line is
we set up a little menu array and I just
named it ma for short stands for menu
array and that holds the three values
that correspond to the IDS of your menu
items your little drop menus those three
names correspond to those three drop
menus if you have five drop menu just
put them all in there separated by
commas now we're doing this so we have
an easier way of handling the fade in
and fade away when you click on certain
ones you want to make sure
or that if this menu is open for staff
when you click services then that one
goes away and services open so that's
why I packed into an array like that so
we can use a for loop to take care of
that logic for us in just a few lines of
code and i'll explain that for loop
right now so here we have the drop menu
function that's the one that these links
call like right when i click locations
here boom that function fires off in
JavaScript that one too and that one
this one doesn't call that function so
it won't initiate it but this one and
this one and this one do and that's this
function right here drop menu and you
can see each drop down menu is
dynamically represented by this X
variable so this X argument is a
variable that we can use within our
little script here that will target each
respective div that is being called so
when this is clicked
it's this little drop-down menu that is
the target object when this was clicked
it turns into this being the target
object so that's what the X represents
so when each one of those main menu
links or click to open up a drop menu
first thing we do is run this for loop
here which will run over this menu array
it will iterate through each of the
items within it
so you drop menu 1 2 & 3 alright so
here's the logic of the for loop for bar
menus in menu array and you can see we
have three menus in our menu array so
that establishes that this loop is going
to run three times then to access each
one of these menus as they run through
the loop
all you have to do is this code right
here to target the menu array and then
the respective menu inside of it that's
passing through the loop you put that
within your square brackets so that
holds the value of whichever one of
these menus is passing through that loop
this code right here so you can evaluate
it and say if that value is not equal to
x
then you're going to hide it you want to
make it display none and you can also
run the fade-out so what that means is
when i click one of these links i don't
want the menu item that I'm clicking for
to not show i just want the other ones
to disappear so any other ones are open
they disappear when i click on the one
that I want so that's how you get that
functionality is you just say if the
menu item passing through the loop is
not equal to the target menu item that
the person is clicking and you hide it
and that's what this code right here
does document.getelementbyid e whichever
menu is passing through the loop style
display equals none if it's not equal to
the target menu item that the person is
clicking on you want to make it display
none
you can do that through this for loop
for as many menu items as you want
now the last little bit of logic that we
have to explain is this simple if-else
condition statement that's the end of
the script right there so we say if
document.getelementbyid ID and the
dynamic drop menu either drop menu 1 2
or 3 style display is equal to block
then we're going to fade it out else
we're going to fade it in now this
little bit condition gives you the
toggle functionality for instance let's
say we first come to the page in the
user opens this link here for this
submenu you can just click it again and
it goes away
so that's how you get that toggle
functionality within each one of the
individual links
ok so if the little submenu being
requested if its style is already block
and it's displaying already and you want
to fade it out because the user is click
this link again to toggle it away
see that's how you get that
functionality else if it's not already
showing you want to fade it in so for
instance services drop-down is not
already showing so we're going to fade
it in ok so that's the best I can really
explain the script
ok now let's go down into the HTML and
i'll show you a little something you can
do to change the behavior of things
we're going to add in on mouse over
event to do
the rest of the page tip that's going to
be equal to a javascript function that
we can fire up when the mouse when the
users mouse goes over that did any time
it goes over that bit what we're going
to do is we're going to run drop menu so
we already have the functionality and
place those utilize it one more time
right there
run drop menu don't pass any arguments
through it now let's watch what happens
you can even put a style here is my page
doesn't have much content your page
would be much taller much higher
vertically because you would have a lot
of content on your page mind just has
two sentences so I'm going to give it a
height 500 pixels that's fair
now let's run the file let's refresh
this and it gives us that functionality
that i was talking about now watch when
i leave this menu system with my mouse
see it goes away you can set it up to
have animated effects if you want so
that gives you the functionality of when
you use mouse leaves that menu system
you can make it go away very easily and
you can change this to on mouse down so
if they happen to click anything so what
I'm talking about is if you refresh
you'll see if i leave the menu system
now the little drop-down it won't go
away until I quick and try to interact
with something on the page you might
want that kind of functionality see it
stays in place until I try to interact
with something else
ok so I'm going to leave it just like it
is here and this is the code that you
will get that corresponds with this
video tutorial and I'll have this code
under the video developed PHP just like
always with the rest
ok guys that about wraps it up and I
don't want you guys to think that having
javascript as opposed to CSS a pure CSS
dropdown menus is better but I'm just
saying that you can apply javascript if
you want to make make magic happen
through JavaScript if you want to use
that instead of all CSS it's fun to
explore the things the JavaScript can do
because javascript is going to become
more and more unnecessary a tool for you
within all of your applications