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
[sourcecode language=”HTML”]
Most Recent Posts
Most Popular Posts
[/sourcecode]
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
[sourcecode language=”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;
}
[/sourcecode]
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.
[sourcecode language=”CSS”]
#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;
}
[/sourcecode]
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
[sourcecode language=”CSS”]
#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;
}
[/sourcecode]
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.
[sourcecode language=”CSS”]
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}
[/sourcecode]
Then under your #csstabs:hover h3 declaration add this.
[sourcecode language=”CSS”]
#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}
[/sourcecode]
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.
[sourcecode language=”CSS”]
#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;
}
[/sourcecode]
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!
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.
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.
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.
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.
Always a fan of CSS3 tips but I’m havin an issue with IE 9 beta. Another list of problems with our favorite browser. Appreciate the tips as usual.
I need some help managing this. The tools are great but I’m having problems. Is there anybody who’d offer to assist?
Awesome! Thanks for the CSS3 transition tip!
Keep on the good job! Awesome! Thanks for the CSS3 transition tip!
Wauw man i love the result! Great work.
lways a fan of CSS3 tips but I’m havin an issue with IE 9 beta. Another list of problems with our favorite browser. Appreciate the tips as usual.
If I was doing a new website from scratch, CSS is the way to go. Less code, more SE friendly
BR, Rosalie from <a href=”http://macphotographytips.net/”>digital photography tips</a>
I built tabs that had a separate box from the tabs, with changing content, and no JavaScript. They even worked in IE6.
By the way, using clear: both; is a bad idea due to lack of browser support.
Good workaround when you don’t want to rely on Javascript. But nowadays, when Javascript won’t be a problem often, I would prefer using jQuery for this.
I guess to help avoid confusion a background colour could be added to the active, hovered tab
BR, Rosalie from digital photography
This is very useful to me. Thanks for sharing!
mattresses
Searching for a solution to implement this great code in a WordPress widget. Grtz
Thanks for sharing. Very useful!
Jeffrey
This is great,very fast indeed, but is css3 compatible with most browsers?
Thanks for this nice article with those examples.
Dave,
Thanks for the example. This is a great way to add content to our websites without bogging down readers with too much information at once. My concern is also about cross browser compatibility.
Connie from cheap textbooks
I really wish that I know more about CSS because I really believe that I can do more. More for my existing sites and blogs that I have develop for years and I know if only I know more on CSS I will make it more attractive.
Once again this article was very helpfull. Thanks!
Loving CSS3 🙂
No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant post.
Thanks for informative and helpful post, obviously in your blog everything is good.If you post informative comments on blogs
Thanks for posting this. Also for being so clearly explaining solutions to create things on your website!
Spot on with this write-up, I really think this website needs rather more consideration. I’ll most likely be once more to learn way more, thanks for that info.
It is a very clear and pretty informative post!!
Really useful. Thanks for your efforts. Appriciated.
Hi there
This is really impressive! Thank you for this great example of things that are possible without scripts. Is there a possibility to still show the content of tab 2 even when it does not have the focus anymore and no other tab has been clicked?
That would be a great extension.
Regards,
cee
I must say that overall I am really impressed with this article.It is easy to see that you are passionate about your writing. If only I had your writing . Just added your site to my list I look forward to more updates and will be returning daily.
Both simple and impressive, thanks fot sharing:)
Indeed impressive, thanks for sharing this info on CSS3.
Thanks for posting this. Also for being so clearly explaining solutions to create things on your website!
Please keep thorinwg these posts up they help tons.
Great tutorial, very much needed it
Can I just say what a aid to seek out somebody who really knows what theyre speaking about on the internet. You definitely know the best way to deliver a problem to mild and make it important. More people need to read this and understand this aspect of the story. I cant consider youre not more in style since you undoubtedly have the gift.
Thanks your beneficial deal merely with regard to many!
This is really fascinating, You are an overly professional blogger. I’ve joined your feed and stay up for looking for more of your excellent post. Also, I have shared your web site in my social networks
Thanks for sharing this tricks. Keep up the share.
Thanks for sharing this tricks.
Hi,
could u help me?
I want build a menu tab with your script, but I do not understand how use it. The problem is that: when I click on a tab, i want that it stays on this tab and not returns to the first. How ? with z-index ?!?
@valerio do you have a sample where you’re using this that I could have a quick look at?
Thx!
I’ll try it.
Spot on with this write-up, I actually suppose this web site needs way more consideration. I’ll in all probability be again to learn much more, thanks for that info.
Hi when i add one more tabb, it goes behind them all, what shall i do?
@Mahdi, you need to create the new tab and give it a new id and then position that id where you need. You’ll need to adjust some dimensions of the tabs area as well.
Nice post. Thanks for the CSS3 transition tip!
Thanx for this post. I was looking for a good hover on the tabs without too much scripting going on. This is quick en easy.
Anyone has nice tabs with image ? This tab is easy but good for me