Menu Tabs
July 2nd, 2009This tutorial will take a bland, unordered list and through the magic of CSS (Cascading Style Sheets) manipulation, turn these into curved menu tabs that run lengthwise along the page. Keeping things simple, I will use CSS version 3 features to make the tabs curved, supported by Firefox and Safari 3.0 or later.
<html>
<head>
<link rel="stylesheet" href="menu_tabs.css">
</head>
<body>
<ul>
<li><a href="#">Tab A</a></li>
<li><a href="#">Tab B</a></li>
<li><a href="#">Tab C</a></li>
</ul>
</body>
</html>
The above file contains an unordered list of elements and displays on a web page as follows.
I am going to control the appearance of the unordered list by adding a class attribute to the ul tag.
<ul class="menu_tabs">
<li><a href="#">Tab A</a></li>
<li><a href="#">Tab B</a></li>
<li><a href="#">Tab C</a></li>
</ul>
The unordered list has a style class of menu_tabs. The menu_tabs style is defined in a file named menu_tabs.css.
.menu_tabs {
/* Turn off bullet points */
list-style: none;
}
.menu_tabs a {
/* Turn off underlining html links */
text-decoration: none;
}
After saving the stylesheet, the web page looks like.
To make the list run horizontally across the page, I will use the float style and add a margin separating each element. The px mentioned in the style below is an abbreviation for pixels.
.menu_tabs li {
float: left;
margin-right: 5px;
}
The list of items appear horizontally.
Define a rectangular border and add some space, or padding, between the border and text. Modify the existing .menu_tabs li style to:
.menu_tabs li {
border: solid 2px #000;
float: left;
margin-right: 5px;
padding: 5 15px;
}
Now, we have some menu tabs.
To make the tabs rounded using CSS3, we will use vendor specific CSS styles. Sadly, browsers want diverge when it comes to rounding corners.
Note: The curved borders will not render in Internet Explorer. The same also applies to using hover used later.
| Firefox | Safari |
|---|---|
| -moz-border-radius-topleft | -webkit-border-top-left-radius |
| -moz-border-radius-topright | -webkit-border-top-right-radius |
| -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
I want to make the top of the border rounded. So, I will create a new style definition and supply the Firefox and Safari properties to it.
.rounded_top li {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
Next, I will add rounded_top to the class attribute.
<ul class="menu_tabs rounded_top">
<li><a href="#">Tab A</a></li>
<li><a href="#">Tab B</a></li>
<li><a href="#">Tab C</a></li>
</ul>
The tabs are now rounded at the top.
Let’s give the tabs some color. Since the text contained in each tab is an href link, I also need to supply a style definition .beige_tabs a to change its color.
.beige_tabs li {
background-color: #ffe;
border: solid 2px #cb9;
color: #875;
}
.beige_tabs li a {
color: #875;
}
Adding the beige_tabs style to the growing class attribute we have:
<ul class="menu_tabs rounded_top beige_tabs">
<li><a href="#">Tab A</a></li>
<li><a href="#">Tab B</a></li>
<li><a href="#">Tab C</a></li>
</ul>
The menu tabs now look like this:
To make a tab change color when we place our mouse over it, we will need dive into the css file and add two more styles. Internet Explorer does not understand the hover keyword and ignores the style.
.beige_tabs li:hover {
background-color: #cb9;
color: #ffe;
}
.beige_tabs li:hover a {
color: #ffe;
}
At produce the desired mouse-over highlighting, I had to place the class attributes at the ul tag instead of on each li tag. The hover property, which only works in later browsers, is activated when any part of the tab is touched. In the screen capture below, the mouse is positioned over Tab B.
Source files: menu_tabs_20090702.zip