XHTML Tutorial CSS Tabbed Menu

Tabbed menu

One hugely useful way of displaying your menu items is in the form of tabs. The following tutorial will take you through some simple steps to build your own tabbed menu, without so much as a .gif or line of JavaScript in sight…

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>button</title>
<style>
</style>
</head>
<body>
</body>
</html>

Now let’s set out the XHTML markup for our menu, between the <body> tags:

<ul class=”menu_tabbed”>
<li><a href=””>tab one</a></li>
<li><a href=””>tab two</a></li>
<li><a href=””>tab three</a></li>
<li><a href=””>tab four</a></li>
</ul>

This is a straight-forward unordered list which we’ve given the class of ‘menu_tabbed’. Within it are four list items, each one of which contains a link.

That’s it for the markup, now let’s set up some CSS to give our document some basic styles. Place the following between the <style> tags:

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding: 30px;
}

This just gives our document a default text color (#333333), font and font size. I’ve also just given the documents ‘body’ a padding of 30px in order for our menu to be held away from the page edges. This will make it all slightly easier to view on our part.

Now some attributes for our unordered list, identifiable by it’s class ‘menu_tabbed’. Firstly, it has no list-style. This removes the bullet points from the list items – in all circumstances, in all browsers. Secondly it has a solid border along it’s bottom edge of 1px and the color #999999. Lastly some padding at the bottom in order to hold the border away from our tabs as we’ll soon see.

ul.menu_tabbed {
list-style: none;
border-bottom: 1px #999999 solid;
padding-bottom: 10px
}

Test it in a browser, your menu should now look something like this:

Now let’s style our list items, identifiable as ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’.

ul.menu_tabbed li {
display: inline;
margin-right: 5px;
}

We’ll display the list items ‘inline’ which will distribute them horizontally across the page. Each one has a margin on the right of 5px in order to hold it away from the previous list item. Now your menu should now look something like this:

Having dealt with our list and the list items within it, we can now turn our attention to the links, identifiable as the ‘a’ within the ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’. Place the following within your CSS code:

ul.menu_tabbed li a {
color:#999999;
text-decoration: none;
background: #f7f7f7;
border: 1px #CCCCCC solid;
border-bottom: none;
padding: 10px 14px;

}

There’s a little more styling involved here as most of the visual effects are tied to the links. First give the text a faint color of #999999 and remove the underline by stating no text-decoration. Then give a background of #f7f7f7 and a solid 1px border of #CCCCCC. There’ll be no border on the bottom, as this is catered for by the border on the bottom of our unordered list.

Lastly, give the links some padding; 10px at the top and bottom and 14px left and right. The 10px padding at the bottom will allow the links’ bottom edge to meet with the bottom edge of the unordered list which we also gave a padding of 10px.

Check your menu again in a browser:

Now let’s give our tabs some styling for their hover state, one simple line of CSS:

ul.menu_tabbed li a:hover {
padding: 14px 14px 10px 14px;
}

This padding overrides the padding for the links which we’ve previously set. It differs only by giving an extra 4px padding at the top which gives the tabs the impression of being lifted like so:

Finally we’re going add some style for when one of the menu items is selected. Add the class ‘selected’ to your second list item:

<li><a href=”” class=”selected”>tab two</a></li>

Now let’s add some CSS to determine what the selected tab looks like:

ul.menu_tabbed li a.selected {
color:#666666;
background:#FFFFFF;
border: 1px #999999 solid;
border-bottom: 1px #FFFFFF solid;
padding: 14px 14px 10px 14px;
}

We’ve darkened the text to make it stand out, the background is white, as is it’s bottom border. This will cover the bottom border of the unordered list giving the impression that the tab is ‘connected’ to the page underneath. The padding will match the padding we’ve given to the link hover state; slightly raising the tab.

That’s it! Check your final menu in a browser!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s