Make a SEO Friendly Vertical CSS Menu with Simple Hyperlinks

SEO Friendly Vertical CSS Menu - The Code

I've been designing web sites for a while, and one of the most enjoyable aspects of design is using CSS, or Cascading Style Sheets, to really get the look I'm going for. Once you understand the concepts behind CSS, it gets much easier achieving the effects you're looking for. Below are a few CSS tricks I really like.

SEO Friendly Vertical CSS Menu - The Code

This CSS trick really can make a site menu look top-notch. Let's use the following code for an example:

<div class="menu">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2 </a>
</div>

We can make this hyperlink list look really cool with just a few Cascading Style Sheet styles. Let's start by making all the <a> tags in the enclosing <div> tag display as block elements. Making the hyperlinks display as block elements makes them act almost exactly like <div> tags. So the first style we add is:

.menu a {
display:block;
}

If you test this CSS code out, you'll see that now that each of the hyperlinks are on a new line. You can see just what space the <a> tags are taking up by adding a border style to the hyperlinks by using the following:

.menu a {
display:block;
border: 1px solid black;
}

As you might also have noticed, the entire block of the <a> tag is clickable, rather than just the text. This means that we can do some cool cool things when we hover over the links. First, though, lets add some formatting to the a tag so it displays nicely.

More Formatting for the CSS Vertical Menu

More Formatting for the CSS Vertical Menu

First, lets add a background color using the following CSS code:

background-color: #247600;

This is a nice, dark green so that we can change the hyperlink text color to white with the following:

color: #FFFFFF;

Next, let's add some 3-D style borders by making the top and right borders one color, and the left and bottom borders another.

border-top: 1px solid #174B00;
border-right: 1px solid #174B00;
border-bottom: 1px solid #75EA42;
border-left: 1px solid #75EA42;

The hyperlink text is kind of cramped in that block, so lets give it some space with the following CSS style:

padding:5px;

Now, we want the hyperlink to change when you hover over it, so let's add the following Cascading Style Sheet style:

.menu a:hover {
background-color: #4EA02A;
}

Finally, we need to make sure that once the hyperlink is clicked, that it will stay the same color (or, you can alter this so that it displays differently):

.menu a:visited {
color: #FFFFFF;
}

One more thing: so far the menu looks good, but it's going to expand across the entire web page. To avoid this, add a width style to the .menu class.

Putting the CSS Vertical Menu Together

Putting the CSS Vertical Menu Together

Okay, lets see it all put together: