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!
Red 28 Jan, 2011
Joost 29 Jan, 2011
Since the tabs have a fixed width, it would be very trivial to have an image fall-back for the more css3-challenged browsers out there.
Web Design Company 29 Jan, 2011
Petr Lev 30 Jan, 2011
Izdelava internetne strani 30 Jan, 2011
Laura 31 Jan, 2011
Laura
jack 1 Feb, 2011
Joseph Taylor 1 Feb, 2011
Robert Visser 1 Feb, 2011
In the full page version, I'd like to see the CSS take advantage of orientation media queries.
Thanks for the post.
Chris F.A. Johnson 2 Feb, 2011
csabi 3 Feb, 2011
I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials, it will bring you some extra traffic
Please give a chance for my website: http://www.tutorialswindow.com
Thanks!
stevewckrt 4 Feb, 2011
http://www.bugsketch.com
Watch live football games streaming on your computers.Never miss another football game again.
Our instant access site allows you to Watch Live Football Online On Your PC minutes after subscribing. We provide access to all of the latest football streams and live soccer feeds.
san fransisco 8 Feb, 2011