posted on:January 27, 2011
Styling Full Width Tabs with CSS3
In this article I will demonstrate how to create full width "browser-like" tabs using pure CSS3 and some HTML5 markup. This article includes whole lot of new CSS properties such as box and text shadows, border radius and CSS gradients. That means a lot of vendor prefixes in the code :).
Of course, not all browsers support these properties, so we need to make sure that everything degrades nicely. I mean as nice as a it could be, right?
It degrades from this (Safari)
to this (IE8)
Markup
First let’s take a look at the markup. In this example I am using HTML5 elements.
Head of the document looks like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Tabbed Layout</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="js/tabbed.layout.js"></script> </head>
We are using John Resig’s HTML5 Shiv to make sure we can properly render HTML5 elements in all browsers, and I am including a Easy Framework’s tab script just to add behavior to the tabs.
Next in the markup structure is the header…
<header> <h1>Some cool goes title</h1> </header>
…and then we go to the nav element. This element contains actual clickable tabs:
<nav>
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
</nav>
We link the tabs to the section elements further down in the markup structure:
<section class="tab" id="tab1"> <p>Section number 1</p> </section> <section class="tab" id="tab2"> <p>Section number 2</p> </section> <section class="tab" id="tab3"> <p>Section number 3</p> </section> <section class="tab" id="tab4"> <p>Section number 4</p> </section>
As far as the necessary markup goes, this is it. Pretty simple!
CSS3 Magic
First let’s edit the header. Header has fixed height and we added a subtle CSS gradient to it, from darker to lighter:
header{
height:32px;
overflow:hidden;
background:#e1e1e1;
background:-webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#e1e1e1));
background:-moz-linear-gradient(top, #d1d1d1, #e1e1e1);
padding:0 5px;
}
Nav element has fixed height as well, list items inside are floated to the left and have the same width. We are also adding CSS gradients along with bottom border radius and box shadow. (vendor prefixes galore)
nav li{
list-style:none;
float:left;
height:24px;
line-height:24px;
-moz-box-shadow:0 0 3px #888;
-webkit-box-shadow:0 0 3px #888;
box-shadow:0 0 3px #888;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin:0 2px;
width:200px;
overflow:hidden;
position:relative;
background:#ccc;
background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#aaa));
background:-moz-linear-gradient(top, #ccc, #aaa);
}
Selected tab should blend into header so the colors must match. "Ending" color of the header gradient must be "starting" color of the selected tab. Also make sure that you define matching regular background colors for browser that don’t support CSS gradients.
nav li.selected{
background:#e1e1e1;
background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#d1d1d1));
background:-moz-linear-gradient(top, #e1e1e1, #d1d1d1);
}
Styling the anchor’s inner shadow
Now here’s a little trick. I guess you are familiar with box-shadow property and how it works. What we can define is horizontal offset, vertical offset blur and a color. Another cool option that allows us to have inner shadows is the inset attribute.
Here is our problem… on non selected tabs, we need to have only top shadow, no shadows from the side. That is not doable with the usual settings
What we’ll do is:
- add inner shadow to anchor element with vertical offset only
- make a nested anchor element wider than the parent LI element
- position anchor absolutely inside the LI element
- set overflow to hidden on LI element
That way we will simply hide the side inner shadow and have only top shadow visible. This is small detail, but without it the entire tab would not look natural (as if the header drops a shadow on it).
Take a look at the graphic to (hopefully 🙂 ) understand it better.
Here’s the CSS for the anchor element:
nav li a, nav li a:visited, nav li a:hover{
list-style:none;
display:block;
position:absolute;
top:0;
left:-2px;
height:24px;
line-height:24px;
width:204px;
text-align:center;
color:#333;
font-size:11px;
text-shadow:#e8e8e8 0 1px 0;
-moz-box-shadow:inset 0 1px 1px #888;
-webkit-box-shadow:inset 0 1px 1px #888;
box-shadow:inset 0 1px 1px #888;
}
Selected anchor doesn’t have an inner shadow:
nav li.selected a{
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
JavaScript
Last but not least, I added a simple tab script, because without it, tabs… well… wouldn’t make that much sense. This script is taken directly from my Easy front-end framework code.
tabs = function(options) {
var defaults = {
selector: '.tabs',
selectedClass: 'selected'
};
if(typeof options == 'string') defaults.selector = options;
var options = $.extend(defaults, options);
return $(options.selector).each(function(){
var obj = this;
var targets = Array();
function show(i){
$.each(targets,function(index,value){
$(value).hide();
})
$(targets[i]).fadeIn('fast');
$(obj).children().removeClass(options.selectedClass);
selected = $(obj).children().get(i);
$(selected).addClass(options.selectedClass);
};
$('a',this).each(function(i){
targets.push($(this).attr('href'));
$(this).click(function(e){
e.preventDefault();
show(i);
});
});
show(0);
});
}
// initialize the function
tabs('nav ul');
Note that we are passing a selector as a parameter to the function. This selector must be a unordered (or ordered) list of the tab navigation.
Take a look at the demo or Download files
That is it! In my next article I will take this one step further and create a full screen tabbed layout so stay tuned!
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe
Comments (13 Comments)
Sorry, the comment form is closed at this time.
Red
January 28, 2011
Joost
January 29, 2011
Web Design Company
January 29, 2011
Petr Lev
January 30, 2011
Izdelava internetne strani
January 30, 2011
Laura
January 31, 2011
jack
February 1, 2011
Joseph Taylor
February 1, 2011
Robert Visser
February 1, 2011
Chris F.A. Johnson
February 2, 2011
csabi
February 3, 2011
stevewckrt
February 4, 2011
san fransisco
February 8, 2011