Now that you’ve got your navigation lining up all prettily, what’s next? Well, you could stop there, if you wanted. But there’s so much more you could do using the wonders of CSS, to make your navigation (and soon your entire blog!) even more beautiful.
Prettify Your World! Or At Least Your Navigation…
There are all sorts of different properties that you can use to style your navigation – both on the <ul> (if you want to style the navigation as a whole), or on the <li> if you want styles on each of the individual items in the navigation. (Remember last week, how we used the cookie crumbs to see where we were within the HTML, to style it in CSS.) For example, if you want all of the text in your navigation to be black, then you could do #navigation ul { color: #000000; } But if you wanted space between each of the items in your navigation, you would put a padding attribute on the <li>s, since it affects each individual list item, rather than the entire block of navigation, like this: #navigation ul li { padding: 5px 10px 5px 0px; } There are all sorts of different CSS attributes that you can use in your navigation… as always, if you have any questions about any of them, just ask!
Another cool thing that you see on a lot of navigations is how something will change when you hover over a page, or when that page is selected. We don’t do that here on SushiCodes, but if you go visit Fridgg and hover your mouse over any of the pages in the navigation bar, you’ll see what I mean.
Anyone Else Have That Hoverround Song In Their Heads?
It’s cool and all, but how do you do it? It’s easier than it looks. First of all, realize that all of your navigation items must be links. After all, isn’t that the entire purpose of your navigation? You want to enable your users to get to the different parts of your website… so of course, each item in the navigation must be a link. So it ends up looking something like this:
<div id="navigation">
<ul>
<li>
<a href="http://yourpage.com">Page</a>
</li>
</ul>
</div>Of course, with more <li>s in there, and each with an <a href=""> inside of it, but you get the drift.
So you have all those links. Because this is the way that HTML was made, the <a>s are what you hover your mouse over. (You know how when you hover your mouse over any normal link, and half the time it changes color? This is the same principle.) So you want to put the hover property on the link. How do you do this? Like this:
#navigation ul li a:hover {
/* whatever styles you want to change when you hover over the item in the navigation */
}You can put whatever styles you want there… make it change color, add a border to it, change the background… the possibilities are endless.
I Choose You, Pikachu!
The really, super cool thing about this is… if you want to add styles for the “selected” page (like when we went and looked at Fridgg’s Latest page, and saw that “Latest” was highlighted in the navigation bar)… it’s almost exactly the same as the hovering that we just did. Seriously. Only one little change. Awesome, isn’t it?
Instead of putting your styles on #navigation ul li a:hover {} you instead put them on #navigation ul li.current_page_item a {} And then you put whatever styles you want on it, just as you did with the hover.
So, What Have We Learned Today?
(I mean, aside from the fact that Allison consistently stays up working into the wee hours of the morning, and grew up in the age of Pokemon.)
We’ve learned that CSS makes our lives a heck of a lot easier, and lets us do all sorts of fun things to make our website just as gorgeous as we are! Yes, it’s wonderful. And, as always, there’s much more to come…
