In Step 2 of our 2-column tableless layout, we made our basic layout look significantly better with changes to some margins and padding that improved the structure. In this step, we are going to focus on the menu area.
A well-made menu really can make a site, and I think that once you see how this simple design looks with the menu in place, you’ll start to actually ‘see’ how it’s going to come together. If you’ve never worked much with menu styling, you will get to learn quite a bit about it in this tutorial step.
Let’s begin by looking at a zoomed in shot of our inspiration menu:
Now personally, I don’t care much for that little green text above the menu (the text that reads ‘clueless’) – so we’re going to skip that. I prefer to keep the green text as the paragraph color for the other sections we may need in a menu area (for instance, the author section you see above that.
However, we have a lot of work to do, so let’s take a look at what we have to start with:
Not very appealing, is it? Well let’s start changing that now. First let’s change a couple of simple things with the font and background color. Make the following two changes (in bold) in your CSS:
body {font-size: 76%; font-family:sans-serif;}
...
div#menu { background-color: black;}
Changing our menu background to black will let us see how our menu will look down the line, and sans-serif is the font used in the design. The next thing to do is going to be to get rid of the list dots and way that the list automatically is indented so that we can control how much indent we want later. Add the following line to your CSS in your menu section that will apply to our unordered list (ul):
div#menu ul {list-style-type:none; margin:0; padding:0;}
Now we need to style that menu to make it look like the dark rows. So we’ll make some additions to the rule we already have. Find this rule in your CSS menu section:
div#menu ul li a:link, div#menu ul li a:visited {
color: white;
text-decoration:none;}
And then we’re going to change it to the following:
div#menu ul li a:link, div#menu ul li a:visited {
color: #FF9;
text-decoration:none;
background-color:#333;}
Now our menu looks like this:
However, that’s not what we want, so add one more rule to that same section you were just in:
display:block;
And then your menu will look like this:
Now we need to give each of those links a little visual depth because our inspiration image makes them look sort of like buttons. We’re going to do that by adding borders:
div#menu ul li a:link, div#menu ul li a:visited {
color: #FF9;
text-decoration:none;
display:block;
background-color:#333;
border: 1px solid #666;
border-bottom:none;
border-right: none; }
Next let’s continue on by adding a little padding around the text of our links. We’ll simply add this single rule to the same section we’ve been adding to:
padding: 2px 0 2px 30px;
That gives us 2px padding on top and on the bottom, none on the right, and 30px on the left. So, here’s what we have at this point:
Starting to look much more like it, isn’t it? Well, it’s not quite ready yet, but nearly. In our inspiration menu, there was some space around the menu itself, and we need just a touch of space between each menu link to give it the final touch of depth. To accomplish those spacing needs, we’ll set the margins around those links. Also, we need to decrease our text size to match better. So… add the following two final lines to your CSS (in bold):
div#menu ul li a:link, div#menu ul li a:visited {
color: #FF9;
text-decoration:none;
display:block;
background-color:#333;
border: 1px solid #666;
border-bottom:none;
border-right: none;
padding: 2px 0 2px 30px;
margin: 2px 10px;
font-size: .9em; }
Now we have 2px margins on the top and bottom of each list item link, and 10px on both the right and left sides. Our font size is fixed, and now our basic menu look is complete:
Looks pretty good now, but as I said before, the inspiration menu has a mild hover effect that makes the buttons look like they are moving. So, let’s create our own. Add this new CSS rule below the above one:
div#menu ul li a:hover {border:1px outset #333; border-bottom:none; background-color:#000;}
Now when you hover over each link, you should see a very nice button effect.
There is one glaring thing left in our menu area now, and that is the H2 header that is looking very out of place. It needs to look more like this (though we won’t add the little arrow until a bit later on):
So now we need to make some changes to one of our existing rules. Find this in your CSS menu area:
div#menu h2 { color:gray; }
In our inspiration image we see that header uses a medium gray. Personally, I don’t think that’s enough contrast for the black background, so I’m going to use a lighter color as the font color. If you want to use a medium gray, it’s up to you. The first things we’re going to do are change the color and the size of the text by rewriting the above rule to the following:
div#menu h2 {
color:#FFC;
font-size: 1.1em;
font-weight:normal; }
The next thing to do is to add a little padding around our text to move it away from the margins, plus we’ll add a bottom border to our heading. Add the following two rules to our CSS h2 section we are working in:
padding: 2px 0 3px 18px;
border-bottom: 1px solid #666;
Your header text should look nicely indented from the window edge with a bottom border now:
We need to put some margin space around our heading, as was done in the original, so add the following line to the CSS h2 section we’ve been working in:
margin: 2px 5px 10px 5px;
Now it’s spaced properly, and we have only one last thing to do – fix the header text more by changing the font-family and how far apart the letters are spaced. You’ll finish up the menu by adding these two final rules to your CSS section we’re working in (in bold):
div#menu h2 {
color:#FFC;
font-size: 1.1em;
font-weight:normal;
padding: 2px 0 3px 18px;
border-bottom: 1px solid #666;
margin: 2px 5px 10px 5px;
font-family:arial;
letter-spacing: .25ex; }
One small thing that you have to change for Internet Explorer, however. If you’ll look at the menu you made in other browsers, it renders perfectly, however, when you put that margin around the links it shows as significantly larger in IE. So… here’s what you do to fix it:
Go back to your div#menu ul li a:link, div#menu ul li a:visited section.
Find the line: margin: 2px 10px; and remove it.
Then go above that rule and create the following one:
div#menu ul li { padding: 1px 10px }
IE renders padding much better than it handles margins, so that will work fine and look like it’s supposed to look. You do have to decrease the padding on the top and bottom slightly, but that’s all.
Now you are DONE with the menu!
Okay, let’s take a look again. Here was what we were going to aim for (skipping the green text and waiting on the little arrow graphic until later).
And here is what we created (remember I chose to use lighter colors for better contrast):
Pretty close? I think so. Remember, it doesn’t have to be exact, we’re calling that our ‘inspiration’ piece for a reason. Never be afraid to make changes.
What’s best of all? No javascript for rollovers, no images, and just pure CSS that can be changed whenver we feel like it and it will change the entire menu for us.
We’ll obviously continue working on the page more, but I think you can start to see how it will come together better with the menu in place.
~Nicole
