I have decided to start writing a series of articles on CSS because of the many questions I get from friends and fellow developers seeking answers to specific questions like this one.
Creating rich menus has always been a major issue for most web developers. I remember when I first started doing web design back in 97, my jaw used to drop each time I saw a sliding menu or one with rollover effects. Back then if you wanted a really rich menu, you had to use Java palettes, which was rocket science to most designers.
Fortunately today, a wide array of rich interface elements are possible using only CSS and a little JavaScript which can be learned in minutes.
A common question people ask is: How do I create a tabbed menu with rollover effects?
The approach I like most is one that employs CSS, very little JavaScript, and of course HTML. I will start by explaining the HTML components of our menu and then move on to the CSS part.
The magical HTML List:
Almost every designer uses the ordered list <ol>, or the un-ordered list <ul> at least a few times in every project. Most people think they should use it only when they want to create numbered lists or bullet lists. Well, that was true back in the days when the Yahoo homepage had a gray background and Amazon.com had the jungle theme.
Today, it is very important to know what kind of markup you need to use and why. You will come across a variety of ways to achieving he same result and it will be up to you to decide which is best for your case. Having said that, I think there is one rule of thumb that should apply to all cases: Always use semantic markup.
Semantic means "descriptive", hence "descriptive markup". To demonstrate, take the following site menu. The first example does not use any semantic markup:
HTML:
Site Menu
<blockquote>
<a href="/">Home</a><br/>
<a href="/">Overview</a><br/>
<a href="/">Services</a><br/>
<a href="/">Contact</a>
</blockquote>
Notice how the list effect is achieved by using <blockquote> and <br>, which were not made specifically for formatting a list of items. Anybody can use these two tags to display a whole lot of things, none of which are item lists.
The second example shows semantic markup that represents the site menu:
HTML:
Site Menu
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/">Overview</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>
If we use the first method, only a human will be able to figure out that this code represents a hierarchal list of items. Another down side is that the list may be rendered differently on different platforms, so your list or menu in this case may not be comprehensible on a mobile phone for example.
Another advantage of using the html list is that you can represent a hierarchy of items in the form of nested lists very easily by starting a new list inside any of the main list items. If you wanted to have sub-lists using the first method, you will make a big mess out of your html, and it will just look stupid.
Arrange it horizontally:
CSS:
/*Setting the display for the list items to inline will arrange them horizontally*/
#menu li{
display: inline;
}
Note: You notice that I use #menu as a prefix for all my styles. This is because my main menu ID is "menu". This causes my styles to only affect the html elements inside "expenses". You don't have to use a prefix unless you have more than one menu and you want to have different styles and behavior for each. However, I always like using it as a standard. You can, however, substitute "#menu" with "ul" in your css and it will work just fine.
Note: I used "/**/" in the first css example above. Anything you write between "/*" and "*/" is considered a comment and will not affect your css. It's just to remind you and let other designers know what this style is for.
Give it some style:
We need to apply some styles to our menu to make it look nicer.
CSS:
/*Sets the style for the main menu*/
#menu {
margin: 0px
margin-top: 15px;
padding: 0px;
width: 500px;
}
#menu li {
display: inline;
margin: 0px;
}
#menu li a {
padding: 6px;
border-bottom: 0px;
background-color: #9c0;
text-decoration: none;
color: #fff;
border: 1px solid #666;
}
Note: Those of you accustomed to setting colors in your web page by manually inserting its hex code may find it strange that I used only 3 digits instead of the usual 6 for my colors. Abbreviation is possible when the two digits for each of the basic colors (red,green,blue) are the same, by representing every color with one digit. For example: #99cc00 can be referred to as #9c0, #ff9900 --> #f90, #ffffff --> #fff…..etc. This form is supported in both IE and FF.
Roll it over:
Imagine you could talk to the browser, and tell it to create a rollover effect. You would say: "when the user puts the mouse pointer over the link, please change its background color to white and text color to grey". Here's how we say it in CSS:
#menu li a:hover {
background-color: #fff;
color: #666;
}
Note: "hover" is called a Selector. A selector is the condition which is matched, will trigger the changes specified in the style class to the element which it is related to- in this case the <a> tag in our menu.
Tab it:
You may want to create a tab effect by presetting one of the links to be selected when displayed on a certain page…"Services" for example. You can do that by defining a new css class, for example "selected", and then assigning it to the link you wish to display as selected:
CSS:
#menu li a:hover, #menu selected {
background-color: #fff;
color: #666;
}
HTML:
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/">Overview</a></li>
<li><a href="/" class="services">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>
And you have a menu:
