Design Lunatic – CSS-Only Tabs

CSS-Only Tabs

Jun 22, 2011 | In CSS, Tutorials | By: Design Lunatic

In this post, we will learn to create a functional tabs interface with only css (and html). Not using javascript is extremely useful because if the user has an old browser that doesn’t support javascript, these tabs would still work. This also makes it an excellent fallback solution for a more advanced javascript-powered tabs plugin. Using only CSS also decreases the page load time, because not downloading the javascript library that would normally be needed saves a good amount of time. This solution has a few problems though – it isn’t possible to style the active tab, and the height of the tab’s content must be known as well. These are small problems though, and I believe the advantages outweigh the disadvantages.

Now, the tutorial.

First, we have to create a simple html page. We will call our “css plugin” Ctab, so we will base all the div names on “ctab”.

<!DOCTYPE html>
<html xmlns="en">
<head>
<title>CSS-only Tabs</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class="ctab-container">
	<div class="ctab-nav">
		<div class="ctab"><a href="#content1">Content 1</a></div>
		<div class="ctab"><a href="#content2">Content 2</a></div>
	</div>
	<div class="ctab-main">
		<div class="ctab-content" id="content1">
			<p>This is content 1. Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
		<div class="ctab-content" id="content2">
			<p>This is content 2.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
	</div>

</div>

</body>
</html>

We have a simple html page. Html5 doctype at the top, we include the stylesheet (I like to keep things separate), and we have some simple markup for the tabs.

Now, the way “Ctab” works is as following. We have a main container with overflow set to hidden. We also have smaller containers inside that, with fixed heights. When you click on a link, the page scrolls the inner divs upward, resulting in an instantaneous content change. Of course, we need some CSS to make this work.

.ctab-container {
width: 500px;
height: 335px;
}

Our main container has a width of 500, but you can set this to whatever you’d like. Its height has to accommodate both the nav and the visible content.

.ctab-nav {
width: 500px;
height: 35px;
margin-left: 1px;
}

.ctab {
float: left;
height: 35px;
padding-left: 7px;
padding-right: 7px;
text-align: center;
line-height: 35px;
border: 1px solid #777777;
border-bottom: none;
margin-left: -1px;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

.ctab:hover {
background: #eeeeee;
}

a {
text-decoration: none;
color: #555555;
display: block;
width: 100%;
height: 100%;
}

a:hover {
color: #333333;
}

Our nav style is simple: A nav with a height of 35px, with some tabs that have a nice border radius to make things easier on the eye.

Now, here’s the main part. A container that holds the content divs, and the content divs themselves.

.ctab-main {
width: 500px;
height: 300px;
overflow: hidden;
border: 1px solid #777777;

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.ctab-content {
width: 500px;
height: 300px;
margin-top: -14px;
font-family: arial;
font-size: 14px;
line-height: 21px;
}

The height of ctab-main and ctab-content have to be the same, or else you’ll see the next content div when you haven’t clicked on the corresponding link yet.

There you have it; A simple “CSS plugin” that duplicates the functionality of many jquery plugins out there, minus the jquery.

Categories

CSS-Only Tabs