FREE HTML TEMPLATES
Create Stylish Menus with CSS
by Larisa Thomason,
The Rollover That Isn't
That requires setting style specifications for the A tags. In this case, we're going to create a vertical menu with text links that change color when you run your mouse pointer over them.
Since you have a lot of different styles to manage, it's less confusing if you lay them out using a little grid before you begin writing the style specifications:
So on A:link style, you're specifying a block of text that's 150 pixels wide, has a navy background with white, bolded text, and no underlining. Then for A:hover, the background changes to red when the mouse pointer "hovers" over the link. That creates the rollover effect.
Here's the STYLE block: Copy it into the HEAD of your page.
Note that we added a class called "navigationBorder" to the style specification. That adds a border around the outside of the menu and gives the menu a more attractive, cohesive look.
If you'd like to create a horizontal menu, leave out the display:block rule and increase the width of the navigationBorder. You'll have to play with the sizes some to get everything looking just right. Try 550px for navigationBorder and 100px for each of the A tags.
The code to create the menu is as easy as including links in the BODY of your page:
Here's how it displays in your browser:
Now, you may be thinking "That looks great for a navigation menu, but the rest of my content will look awful with big red and blue links all over it!"
All you have to do is create a special class for your navigation links. The syntax is simple:
Where "example" is the name of the specific class. You can call it whatever you want. Then, when you create your navigation menu, you include the class name like this:
<A href="http://www.2dwebdesign.com/index.html/" class="example">Newsletter Archive</a>
Decrease File Size, Increase Accessibility
When you're specifying multiple rules for your links and adding other style specifications, the size of the HEAD section can quickly balloon. Consider placing your styles in an external style sheet instead. That keeps your page's file size small and makes maintenance much easier because you can change the colors, etc. of every page with just one file.
Search engine spiders like text links too! Be sure to include descriptive link titles when you code your links. Although some browsers don't support the TITLE attribute in links, they won't break your page.
Browser Display Issues
If you're a whiz at style sheets, you're probably wondering why we didn't rely on inheritance to set the link properties that remain the same (background color, text-decoration, width, etc.). Supposedly, if you set the property once, it cascades down through later styles unless you change it or override it - hence the name cascading style sheets, right?
Oops! Browsers don't always interpret styles that way. To be safe and relatively sure that this menu is compatible across browsers, we specified the styles for each link type. That keeps you free of most CSS browser bugs that can cause problems.
A warning though: it looks pretty bad in Netscape 4.x browsers but this CSS technique is pretty safe in the newer browsers.