Hi, everyone.
Welcome back to another code review.
Earlier, I created a navigation bar that worked vertically.
It went up and down.
Today, I just want to show you how you can use the same HTML code but
create a horizontal navigation bar, instead.
So, let's take a look.
I want to go to something that looks a little bit more like this.
And, not only have I gone to a horizontal navigation bar, I want to show you
an example of showing which page is the one we're currently looking at.
So, if you notice, in the navigation bar,
the photos link looks a little bit different from the others.
It's very common to do this to kinda indicate to people
this is the page that you're looking at right now.
So let's take a look at the CSS and see how I've taken plain HTML and
turned it into something where I have a nicely styled navigation bar.
All right, we start off by saying, you know what?
We want to style all the links that are in the navigation bar.
I don't want to style all the links, instead,
I want to indicate just the links that are inside nav.
And once we do that, it was fairly simple for me to go ahead and put in that I want
a certain height, a certain background color, a certain text decoration.
One of the things I added here is a border radius.
Border radius curves the boxes, so
if you look, everything's a little bit curved over here along the side.
Nothing too important right there.
The next thing I have,
the new one, is this idea of having a class called current.
What the current class does, is it basically is a way of tagging.
Hey, you know all the different links that are on my page?
I wanna show you which one I'm looking at right now.
And all I did here was I went and I set it so
that I have a different background color.
All right.
So, it was fairly straightforward to create this horizontal
navigation bar as long as you're very careful about spacing things out.
So once again, I just wanna show you that things like padding and
margin are very important and they're very additive.
So, when you use percents, instead of pixels, it's going to keep it from being
that it looks fine on a big screen and then really bad on a small screen.
The last thing, I kind of put in here just to have some fun and
to help show you again some of the different things you can do with CSS,
is I added a hover state for any of my navigation links.
So if you take a look, I've gone in here and
I've said when somebody hovers over the page, I wanna change the color of the text
and I wanna get rid of that whole border radius thing.
So let's take a look.
Go over here, I'm gonna hover over recipes and
the text is turned from white to black, and it's gone from circle to square.
Now again, as I go over all these different examples with you, it's really
important that you realize, I am not an artist, and I am not very artistic.
And I'm hoping that you can take these snippets of code and
turn it into something that looks really great and customized for
the page that you are trying to create.
So go ahead, have some fun, and now try to make a navigation bar
that goes in all different ways, up and down, sideways, or even combinations.
Good luck.