hey everybody what's up welcome back to
css3 in 30 days today is day number 20.
what was it seven we're gonna be
building a drop down menu but first i'm
gonna be making some more modifications
to my silly looking microphone here a
student of mine actually suggested that
i this has nothing to do with css by the
way he said in the box it comes with a
large pop filter as well as this small
one i think i'm going to try out the big
pop filters so give me one moment how do
you take this off
whoa
that is so silly
thanks student for suggesting this to me
now i look even more
foolish oh maybe it's cool back to
coding here we go we're going to be
making a css only drop down menu this is
a super simple lesson
and all we're going to be doing is
building this simple little drop down so
i got a button here that says drop down
when i hover over it bam we just got
three drop down items normally you'd
build this uh you know in javascript
jquery and also css
but i wanted to show you a really simple
and lightweight version of just creating
a simple
css3 drop down so up here in our sandbox
we've got just a simple button right
here and then three links so that if
none of the styles are working then at
least the links are visible which is
important for accessibility
reasons uh now let's go over to our code
editor and open up the 27 drop down menu
folder folder folder is what it's called
go ahead and download that open it up in
your favorite code editor
and open up the index and sandbox.css as
always final.css is there for your
reference to make sure uh that you're on
track and if you have any issues you can
always refer to that so here we go in
the index just to quickly show you the
markup right here in the sandbox we've
got a div with the class of drop down a
button within that
div with the class of drop down menu and
then three links simple
simple sally
super simple sam
super simple sally and sam
sat on super simple sally and sam sat on
the seawall
super simple sally sam sat in the
sandbox there we go open the sandbox
and now what we're going to do is we're
just going to give it so we're going to
say drop down and we're going to go
position relative
and
let's go display inline block it's going
to be important
and z index let's
do 10.
i always just use random numbers with
that index i have no rhyme or reason to
how i use z index
all i know is that if i have if i want
one element in front of the other or
make sure it's in front of everything
i'll put a really high number so
there's your professional strategy right
there
okay
now we want to do is we're going to say
drop down
double underscore hover what i'm
selecting there is simply the button
it has the class of drop down hover
display inline block as well i want to
give this a padding of 10 pixels so
we're just making the button look a
little bit nicer here
um my fingers are typing a little slower
and clunkier than usual it's a little
chilly down here in the basement i mean
in my super high-end premium studio up
in the skyscraper background color
background
we're going to go
323 b40 kind of reminds me of ub40 the
popular british reiki band ooh baby i
love your way
everyday
i wanna tell you i love your way
every day yeah
color white i'm gonna say cursor pointer
save it let's check it out
okay so we've got a button here looking
a little bit better but i want that
uh want that border gone buttons have
weird borders by default in browsers so
i'm going to say button
no border
none
check it out yeah that's much better
cool
okay so now what we're going to do we're
going to start zipping through this a
bit more i've been spending a lot of
time making really high quality jokes so
let's get back to coding drop down hover
hover that's interesting
background we're gonna say two two two
so a little bit of a dark gray
and i'm going to also select the drop
down
double underscore menu
and what we're going to do here is we're
going to say position
absolute
we're going to go display none so this
is the menu itself that's that div at
the class of drop down under double
underscore menu as a sibling to the
button
so display none by default top 100
left zero uh maybe what i should do is
actually not display none for now so you
can actually see it so i'm going to just
comment that out
and
i'm going to show you what's going on
over here so this is starting to take
shape
so top 100 let me just take that out to
show you what happens okay nothing so
far
makes it seem like this isn't necessary
top 100
left zero
min width we're going to give it a 200
pixel min width
background uh white as well
and
we're gonna say
baby nope not that background color
three two three
ub4 no b40 box shadow
just giggly today that's all
zero three pixel two pixel and then rgba
zero zero zero zero point three so a
little bit transparent
okay check it out so far
we got a little bit of a menu here let
me take this top 100
and left out let's see if it even really
does anything
okay it's not really mattering right now
but i'm assuming
the reason i just i did that was to
override any browser specific defaults
that might be messing with it so for
example like top zero percent we'll be
covering that button the parent uh which
is the position relative if i do 100
it's at the
it's 100 down that that height so it
keeps it down there so that's good
okay so now what i want to do is i want
to fix those links there to make it look
like a better list
so i'm going to say
drop down
double underscore
no drop down
hover
and then uh combine that with drop down
double underscore menu
okay
display block when i hover it's going to
be display block now remember keep in
mind this is normally not displayed at
all but i'm
displaying it as none so the reason why
i put that there is because i'm going to
say display take away display none and
put that back in and so now it's not
there but when i hover boom it's display
block so now it appears so now we're
playing with an actual drop down menu
okay
we're going to say padding 10 pixels
start making this look a little bit
better
text decoration
none i don't want those links to have
underlines
border top solid one pixel
one pixel
e o e o e o e zero e zero e zero save it
check it out so far looking better uh
but those
list items need to be oh you know what i
didn't do this right drop down hover
final drop down menu is display block
but now this is going to be drop down
menu
a
there we go so now we're going to say
those links do that that's better right
there kind of things are looking a
little silly we're going to say border
none and also display block that's
something that we need to do
now this is looking much nicer in fact
it's just about done so now what i want
to do is say drop down
double underscore menu a and then when
you hover over the a
elements
background is going to be f o f o f o or
f zero f zero f zero
not f o because you can't put the letter
o in there f zero color and then three
two three be
forty save that check it out boom boom
look at that that is a nice
tidy little
css only drop down with only about
49 lines of css and very minimal markup
just a few lines of html so there is
your css only drop down menu thanks for
spending some time with me today coding
up the drop down menu can't wait to see
you in day number 28 and don't forget
[Music]
good job buddy