CSS3 Hover Tabs without JavaScript
Wednesday, November 4th, 2009
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing.
I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.
Click here to view the demo
So lets have a look
The HTML
<div id="csstabs"> <div id="tab1"> <h3>Most Recent Posts</h3> <ul class="tabcontent"> <!-- tabcontent //--> </ul> </div><!--end #tab1//--> <div id="tab2"> <h3>Most Popular Posts</h3> <ul class="tabcontent"> <!-- tabcontent //--> </ul> </div><!--end #tab2//--> <br class="clearboth"/><!--stops things going funny in IE7//--> </div><!--end #csstabs//-->
We have:
- one containing div that has all the content in – #csstabs
- two divs containing tab content and title – #tab1 #tab2
- h3 tags for headings (can be changed to span or other heading tags)
- tabcontent lists (these can be divs if you wanted)
The CSS
#csstabs{
position:relative;
width:300px;
height:290px;
}
#csstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
}
We give the CSS tabs a relative positioning so we can position things absolutely inside and then add a width and height to it. We then add to the h3 a height and borders on 3 sides and we give the tab content some padding and a background and border.
#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:42px;
background:#fff;
height:230px;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
background:#fff;
}
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:40px;
height:230px;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
}
We then assign values to the individual tabs.
.tabcontent gets a z-index with the higher number going to the tab that will be shown on the front in this case #tab1. They are then both given the same absolute positioning with the top value, placing the .tabcontent box just under the h3 tags so that on hover they cover a bit of the .tabcontent border.
They then get a background color and a height.
The h3 tags get a z-index of 3 to make sure they’re always on top, they get position absolutley to the top of the tabs with an appropriate left indent and are given a fixed width.
Then comes the hover bits
#csstabs:hover h3,
#csstabs:focus h3,
#csstabs:active h3{
background:none;
}
#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:#fff;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
}
#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:#fff;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
}
Firstly when we hover over the containing div all h3 tags lose their background, that ensures the border line shows up underneath.
Then for tab1 and tab2 depending on which heading we’re hovering on the h3 get’s a z-index of 4 and a background color. The tabcontent gets the same but a z-index of 3. So both elements are brought to the front with the h3 further forward.
Because the h3 overlaps the tabcontent box by 1px you can move seemlessly from the h3 element into the tabcontent without losing the focus, it also means that the current header will cover the border of the tabcontent box making it look connected.
CSS3
But wait, what’s that? You have a webkit browser? Well how about some CSS3 tricks. It’s not much but a little fade between the tabs? Oh ok then.
So first things first add opacity:0 to any .tabcontent boxes that aren’t shown intially.
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}
Then under your #csstabs:hover h3 declaration add this.
#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}
That will fade out the .tabcontent areas in 0.75 seconds easing into the animation, pretty self explanitory really!
Finally for the .tabcontent hover classes we need to add a fade in.
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}
So that will fade in the .tabcontent that is being hovered over in 2 seconds again easing in.
So there you go you’re now using CSS3, exciting isn’t it!
Drawbacks
Whilst at first glance it all works nicely there are two main drawbacks of the technique. It requires a fixed height and width, although giving the tabcontent box an overflow:scroll can help if you can live with the scrollbars. Which is great for plenty of situations but not necessarily for dynamically generated content.
The other is that so far I haven’t got it working for tabbing through the page so there are issues regarding the accessibility of the links.
Want to do something with CSS? HTML? JavaScript? Want to see more tutorials? Let me know what you’d like to see via the contact page – I’m happy to take on a challenge!
Want to read more articles like this? Subscribe to our RSS feed.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Follow me on twitter - @dsparks83
if it works in IE will be better.
btw thanks.
Hmmm, it does work in IE8 and IE7 if you check out the example in the blog sidebar.
I’ll have to have a check as to what I’ve missed out on the demo! – Thanks for pointing that out.
I tried it, it works with FF 3.5.5, Safari, opera, IE7 and IE8 but not working with IE6
Hi, thanks for the comment, as per the comment below IE6 users get the universal IE6 stylesheet so see two basic styled lists instead.
Will not work in IE6
Thanks for the comment Brandon, sadly a lot of these things won’t work for IE6. On the demo IE6 users should be seeing a page style using the universal IE6 stylesheet by Andy Clarke, with a few tweaks to stop the lower tabs showing through.
For me it’s just a classic CSS, you could do that before CSS3.
And using webkit is not what I call CSS3
Hi Zorg, thanks for taking the time to comment.
For the most part the tabs are classic CSS you’re quite right. They do however then make use of the CSS3 transition for a little extra finish to them – it’s not “just using webkit” as the transition property is an upcoming CSS3 property and if support was afforded in other browsers could be written as -moz-transition -o-transition or even just transition.
Whilst it may not make the final CSS3 specification transitions and animations are considered CSS3 properties.
good! I put it in my web, thanks for the info
Cool. IE6 is still used in most banks and government offices. I’d want something that at least works in IE6
and on.
But if I was doing a new website from scratch, CSS is the way to go. Less code, more SE friendly.
Peter
Peter Moss´s last blog ..How to configure IIS 7 to redirect requests made to non-www domain to www domain?
I haven’t found many CSS based solutions for anything that work in IE6 and I think a JavaScript based solution would have to be used if you really needed it to work in IE6.
However these kind of things are often additional functionality and with many people not supporting IE6 at all I think it is a marginal issue.
Unless your other screenname is Christopher Dosin, you have a “fan” translating your excellent tutorial into German, and posting it for his own on his blog:
http://www.dosonaro.com/css3-hover-tabs-ohne-javascript/
Thanks very much for pointing that out!
I dont suppose you have a vertical version of this?
Not at the moment but the principle is the same. I’ll put something together for you though.
Awesome! looking forward to it.
Thx Dave.
can’t get to 2nd set using only a keyboard to navigate
Thanks for you comment PD – It is noted at the end of the tutorial that this isn’t a 100% accessible method yet and it is something I will be looking at for any future revisions.
Nice work, but I sometimes get confused with regard to which tab is active vs being hovered. The transition effect is also way too slow, in my opinion.
Some better styling between hovered / active tab would go along way.
Hi Derrick, thanks for taking the time to comment.
The transition effect can be easily speeded up, I feel the slow transition helps to highlight the effect in the demo.
I guess to help avoid confusion a background colour could be added to the active, hovered tab.
When making a demo I like to leave things basic unless they are specifically needed, it helps people to imagine what they can do with it and also helps understanding for people who may be struggling.
Dave,
Hi.
Great work. Thanks.
Have been looking for a way to modify the CSS to enable selecting a tab upon click (or mouseover) so the tab would remain active. Any thoughts?
Began by changing the tabs to ul li and then placing the content in html5 sections and articles. (Could, of course, be placed in divs.) No solution, yet. Issue appears to be one of navigation. There’s no differentiation between active and non-active tabs.
Thanks.
Rob.
I’m not really sure Rob, the only way I’ve seen things done with on click events is using a quick bit of JavaScript, something a bit of JQuery makes quite easy. As of yet I don’t think CSS supports clicking properties and I don’t think there will be any desire too as it move CSS quite a bit further away from it’s intended presentational properties.
Awesome! Thanks for the CSS3 transition tip! I’m curious if there’s an IE alternative for this one. Perhaps a Microsoft filter? That would be very nice.
Thanks for the comment Martijn. I don’t know of any IE alternatives at the moment and certainly nothing in terms of a microsoft filter. Filters generally are something I’ve avoided and just try to offer a workable alternative for IE browsers until the CSS3 features are actually supported.
I like web design a lot. Your website is awesome. Do you guys know any good web classes that I can take?
Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.
Keep on the good job! Awesome! Thanks for the CSS3 transition tip!
Hi Dave, thanks for this useful lesson! Never thought you could accomplish with CSS3 already. Good food for thought.
On a side-note, have you checked out the other jQuery tabs tutorials available? See http://www.extratuts.com/amazing-jquery-tabs-tutorials. Perhaps you can dig up some more inspiration?
Awesome! Thanks for the CSS3 transition tip!
Wow, Dave, I am not sure why no one on here is listening to you or understands coding. CSS rarely works on IE6, people! The poor guy has been nice and repeated himself numerous times. Either listen or stop commenting.
Dave, the tutorial is great! Keep up the great work, I have tested this and it works wonderfully.