CSS Tutorial for Beginners - 43 - Horizontal menu Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to take a
first look at horizontal menus and
whenever you're creating a horizontal
menu or a vertical menu for that matter
it's always about a four or five step
process and that's what we're going to
cover in this video now the first thing
we want to do is establish a section
that's going to hold our menu items so
we need to first make a section and what
do we use for sections we use the div
element tag and so I've created an ID
we're going to use an ID for this and
I've called it nav which obviously
stands for navigation bar and so I've
already typed out the code so I'll go
ahead and copy and paste it in here so
our background color for this section
will be dark green we're going to set
the height of this section to 35 pixels
we want the font size to be 25 pixels
we're going to have a font weight of
bold we want our menu items to have bold
text and the font we're going to use is
Tahoma
so let's go ahead and save this and
we'll refresh over here and there you
can see now we've got our nice green
section now keep in mind that these some
of these items like the font will be
inherited right we're setting up
inheritance here and you'll remember
that it starts out with a div that's the
parent element and then we'll have a UL
element and inside there is a list
element and inside there is a anchor
element and actually that's the five
step process we started out styling our
nav section and the next we'll do the UL
element but before we do that let's go
ahead and put in our HTML for our menu
items and these are going to look very
similar to the vertical menu list items
that we used same process so again UL
element the li element and the anchor
element so as I said we'll start out
styling the UL element first so let me
copy and paste this now you will
recognize this when we did those
vertical menus you always want to
eliminate any padding or margin that the
browser will automatically insert into
our menu items so we're just going to
set this to zero because again we want
to control the padding in the margin we
don't want to let the browser do that
we're also going to get rid of the
bullet points and we do that with the
list - style - type CSS property so
usually these three will always go in
the UL element section and then we want
the text to be centered so let's see
what we get here
and there you can see we've got our menu
items now the bullet points aren't there
and no extra margin or padding are being
placed into here by the browser but now
we need to have our menu items side by
side by side and we do that by styling
against the list element so let's go
ahead and paste some code into here for
that and we'll just move right down here
now of course for these menu items to be
side by side by side we need to convert
our list element to inline we want that
to be in line because remember by
default they are block elements so they
don't they will be displayed in a
top-down order to get elements to
display side by side you need to convert
them to inline so let's go ahead and
refresh our page and there you can see
now our list items are side by side by
side and we've got 15 pixels of space
between them and that's good and this
vertical-align:middle basically just
centers our text inside our section so
that's what that property accomplishes
for us and so now we need to go ahead
and perform our fourth step and that is
we have to style our anchor tag and
remember the anchor tag is this area in
which we get the hand all this area is
the actual anchor tag so that's what we
need to style now and obviously we don't
want to keep this default purple color
that the browser is using so let's go
ahead and copy and paste that and let's
just go ahead and refresh our page and
I'll explain each one of these so there
you can see we actually need to widen
this a little bit so there you can see
now we got rid of the underline with the
text - decoration property by the way
you might be asking well why didn't we
put that up here and the reason is this
is not actually inheritable you can't
inherit this property so that's why we
didn't put it up with our UL rule set we
actually have to put this in our anchor
tag rule set and for some reason I've
got two colors here actually I think we
only need the white ones so let's go
ahead and get rid of this property let's
refresh that I don't think that changes
anything
no it didn't okay so um and we actually
added 8 more pixels of padding around
our content for our anchor tag so that
gives us a little bit more room from the
edges the color of the text again will
be white and we're using the
vertical-align:middle property again and
that will keep everything nice and
centered within our section now we
need to add the Hoover property we've
talked about that throughout the series
so everyone should know what that is by
now so I'll just go ahead and copy and
paste that in here now what we want to
do here is just add a little effect so
that when the user hovers over a
particular menu item we'll get a nice
little contrast to inform them that
they're over that particular link so
let's go ahead and hit refresh and there
you can see now that when we hover over
each one of these items the color
actually is in Reverse so you can see
the background is now white and the
color of the text is now black which we
specified right here and here we put the
background color as white as opposed to
dark green and so that gives a nice
little effect to let the user know that
they are hovered over that particular
link now in the next video we're going
to actually take a look at buttons and
making some really awesome buttons
because I've had a lot of requests from
people that want to do really
professional quality looking buttons so
I'm going to put together that CSS code
for the next video we will come back to
horizontal menus and we'll actually do
some drop-down horizontal menus in the
future