Google Play’s minimal tabs with CSS3 & jQuery

May 21, 2012 by Catalin Rosu - 56 comments

The tab navigation is an element you often meet in your daily browsing. There are so many ways, so many styles, but the idea is the same: you click a tab and see its content without a page refresh.

In this article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.

View demo

Before going further, you may want to check the other tabs tutorials I wrote:

CSS3 tabs with beveled corners

CSS3 & jQuery folder tabs

The HTML

Getting back to this tutorial, here’s the markup, simple as usual. You may notice the similarity between an anchor’s name attribute and related content’s id block. Further, this will be our hook.

<ul id="tabs">
    <li><a href="#" name="#tab1">One</a></li>
    <li><a href="#" name="#tab2">Two</a></li>
    <li><a href="#" name="#tab3">Three</a></li>
    <li><a href="#" name="#tab4">Four</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>

The CSS

The goal here, as always, is to do it without using any images and with as little CSS as possible.

That’s all, this is not just a CSS piece, it’s the whole CSS used to create these tabs. I think it’s pretty cool, not even pseudo-elements were used here, just CSS borders.

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 40px;
  height: 0; 
  line-height: 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777\9;
  opacity: .3;
  filter: alpha(opacity=30);	  
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #2ac7e1;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #3d3d3d;
  opacity: 1;
  filter: alpha(opacity=100);	  
}

Deconstructing it

Here’s where the magic happens:

#tabs a {
  height: 0; 
  line-height: 30px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;	  
}

Styles excerpt

CSS border tabs technique example

The jQuery

Comparing to my previous tabs article, this time I think I improved a bit the jQuery code. Also, this time you have the possibility to access the tabs directly by URL, e.g. mywebsite.com/tabs.html#tab2.

function resetTabs(){
    $("#content > div").hide(); //Hide all content
    $("#tabs a").attr("id",""); //Reset id's      
}

var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For mywebsite.com/tabs.html#tab2, myUrlTab = #tab2     
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

(function(){
    $("#content > div").hide(); // Initially hide all content
    $("#tabs li:first a").attr("id","current"); // Activate first tab
    $("#content > div:first").fadeIn(); // Show first tab content
    
    $("#tabs a").on("click",function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        resetTabs();
        $(this).attr("id","current"); // Activate this
        $($(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
          $(myUrlTab).fadeIn(); // Show url tab content        
      }
    }
})()

View demo

In the end...

This technique has a small drawback, the tabs do not behave as they should if you're using IE6. But, with your permission, I'd say we could skip IE6 this time. However, if you really want a graceful degradation for IE6, it can be done with some specific targeting. Maybe I'll do that in the future, or maybe not :)

I'm looking forward to read your comments, hope you enjoyed this. Thanks for reading it!

If you enjoyed this article, get updates via RSS or email (it's free).

56 thoughts on “Google Play’s minimal tabs with CSS3 & jQuery”

LordAeArc on May 21, 2012 at 11:10 said:

hi! another awesome article :D
btw, please make about lightbox tutorial :<
Reply ↓
- Catalin Rosu on May 22, 2012 at 16:27 said:
  
  In the future, I’ll think about creating a lightbox tutorial. Thanks for your thoughts!
  Reply ↓
cvp on May 21, 2012 at 13:09 said:

Inspiring as always, thanks! ;D
Skipping IE6 isn’t a big deal in my eyes, this browser is dead anyway.
Reply ↓
Justin on May 21, 2012 at 15:56 said:

Constructive criticism: You’re JavaScript could use a bit of refactoring for performance, scalability, and overall cleanliness.
Otherwise, nice tutorial :)
Reply ↓
- Catalin Rosu on May 22, 2012 at 16:29 said:
  
  Justin, I’m always open to suggestions.
  If you have an improved JavaScript snippet (related to above), please share it with us!
  Reply ↓
  - Justin on May 23, 2012 at 17:02 said:
    
    I modified the code and turned it into a plugin for ease of use.
    http://jsfiddle.net/uVNFp/2/
    Again, awesome tutorial. Thanks for taking the time to create it!
    Reply ↓
    - Catalin Rosu on May 24, 2012 at 23:28 said:
      
      Wow, that’s smooth.
      Thank you also for taking the time to create a jQuery plugin for this. I guess I’m not that good when it comes to JavaScript. :)
      Reply ↓
Kimmy | Html5xcss3.com on May 23, 2012 at 06:13 said:

Clean and light, thanks for sharing !
Reply ↓
cuginoAle on May 25, 2012 at 00:30 said:

Question: why do you use the “name” attribute to identify the anchor-ed element in place of the href attribute ?
I mean, why is it like this
One
and not like this
One
?
Couldn’t you assign “current” to the className rather than the id?
Edit:
sorry, html code stripped out by the text editor; hope my question still makes sense…
Reply ↓
- Catalin Rosu on May 25, 2012 at 14:21 said:
  
  Comparing to href, using name attribute helps preventing “back navigation” issue for the tabs.
  Also, the current id was my choice, you can always use a class instead.
  Reply ↓
Bee on May 26, 2012 at 21:14 said:

Quick tutorial! Thanks for sharing :)
Reply ↓
Danialde4 on May 28, 2012 at 04:28 said:

Very good tutorial, if I convert to blogger maybe it will be more popular.
Thanks for share your knowledge.
Reply ↓
Cathy Dutton on June 7, 2012 at 13:40 said:

Hi Catalin
As you mention in your article tabs are becoming more and more widely used to layout large amounts of content. As a result there are numerous blog posts and tutorials on the subject. I like the methods used in your tutorial and the emphasis on css as a posed to images. I will defiantly be using this technique in the near future.
Reply ↓
GrzesiekB on June 26, 2012 at 13:39 said:

Hello! There is a problem when you have DIV inside tab content element. This DIV is hidden all the time – I suggest to change “content div” to “content > div” in JQ scprit – now you can use DIV element inside tabs content. It’s tested on FF 13 and works fine.
Great job Catalin Rosu!
Thanks!
Reply ↓
- Catalin Rosu on June 26, 2012 at 22:28 said:
  
  Updated, thanks for the heads up! ;)
  Reply ↓
Sunhump on June 27, 2012 at 13:36 said:

Pretty awesome actually. Im fairly new to jQuery, how can i apply a “slide left” effect on the content instead of fadeIn?
Reply ↓
Usman on September 29, 2012 at 23:37 said:

These CSS 3 JQuery Tabs look very great. I love how these Tabs look in Google Play website and I am glad that I have learned how to create such elegantly designed Tabs.
Reply ↓
Med on October 10, 2012 at 05:53 said:

That’s awesome, thanks for the share, it will be perfect if you share the source code package next time :)
Thanks.
Reply ↓
dar on October 11, 2012 at 00:44 said:

Hope IE6-8 will leave us soon… Nice tabs!
Reply ↓
Erick B on October 16, 2012 at 01:10 said:

I noticed in Chrome when put these tabs in the middle of a page and you click on a tab… it takes you back to the top of the page – rather than switch tabs in the same scroll position. Anyone have this issue – anyone have the solution?
Reply ↓
David Hedley on November 8, 2012 at 14:52 said:

Hi, thanks for this tutorial. I notice the tabs jump when the page first loads up. i.e. all the content loads as one tab for a split second then forms into tabs. Do you know how I could stop the jumping?
Thanks
Reply ↓
- Catalin Rosu on November 11, 2012 at 22:00 said:
  
  That’s because the content is hidden with jQuery: $("#content > div").hide(); and this code is executed after the HTML loads.
  If you know which tab/content to show initially, maybe you could hide the other content using CSS instead. This way you will prevent the “jumping”.
  Good luck!
  Reply ↓
David on November 28, 2012 at 15:05 said:

Hi Cataline Rosu , Could you make tutorial how to design comment box like yours , Very Very Very Very Awesome
Reply ↓
Alen Subat on December 4, 2012 at 17:40 said:

Great post, great jsfiddle, great plugin.
We are using it in a repository, awesome.
Just to let you know, we had problems with on() jQuery event handler, so we managed it with click() directly (it should be used only on old jquery versions, prev to 1.8 I suppose, dunno remember right now):
$tabs.find(‘a’).click(‘.myTabs’, base.handleTabClick);
instead of
$tabs.find(‘a’).on(‘click.myTabs’, base.handleTabClick);
Reply ↓
Manikandan on December 28, 2012 at 20:41 said:

Sir,
I have more doubts,
1. why we use ‘resetTabs()’ fuction, coz in further coding we r doing the same job no?
2. Can we do this in JS? I want to try coz am new to jQuery it looks hard?
3. Can we Active/Deactive a class or id of a element at event function?
am a newbie to tis. thanx in adv…..
Reply ↓
Johny on January 7, 2013 at 22:02 said:

How can I place Disqus comments inside a tab? It doesn’t work. The code automatically hides Diqsus comments (inside , for example)
Help me, please))
Reply ↓
Jstylp on January 8, 2013 at 21:09 said:

Hey! Really good tutorials. I have a question though.
Is there a way to update the url ( in adress bar ) with an hash tag when you click on a tab. I would like to use this method for a nav. When you click on a button, it loads the content from a div and then modify the url
ie:
One
and would produce something like http://www.yourwebsite.com/#tab1
Reply ↓
Dragoslav Savkic on January 15, 2013 at 23:39 said:

Thanks! Veri, veri nice.
Reply ↓
Hans on January 19, 2013 at 23:19 said:

Nice script, thanks!
Does not seem to display properly in IE7 and IE 8 – do you have any tip/fix for this?
Reply ↓
- Raja on February 3, 2013 at 07:16 said:
  
  Looks like is missing in the top on 1st demo. Worked great in i.e. once added. Great work…!
  Reply ↓
Elli on February 6, 2013 at 14:39 said:

This is great! Its awesome! This what looking for..Job well done Sir!
Reply ↓
Actron on March 15, 2013 at 13:53 said:

What about having multiple tabbed areas on one page? Is there any easy way to achive that with your script?
Reply ↓
dim on March 19, 2013 at 17:44 said:

this does not work with ie<10, right?
Reply ↓
- Catalin Rosu on March 20, 2013 at 17:35 said:
  
  @dim, it does work. The support includes IE7, IE8 and IE9 as well.
  The thing is that when I made the last update on this article, I made a typo on the doctype and that’s why there was that temporary issue.
  Now, everything is back to normal. Thanks for the heads up! ;)
  Reply ↓
  - Ajusha on March 21, 2013 at 15:06 said:
    
    Really ? will it work in IE7 and 8 ?
    But it is not working for me !
    How to solve this issue?
    Reply ↓
    - Ajusha on March 21, 2013 at 15:09 said:
      
      what i meant is that rounded corners are not getting in IE <9.
      Tab is working perfect !
      Reply ↓
      - Catalin Rosu on March 21, 2013 at 15:15 said:
        
        There is no use of rounded corners in this demo…
      - Ajusha on March 21, 2013 at 15:23 said:
        
        http://www.red-team-design.com/css3-jquery-folder-tabs
        that slop for each tab is not working for me in IE 8
        do u have any fix for that..please help..
NovaSev on March 21, 2013 at 02:59 said:

I’m rather new to a lot of coding things – this is an area that I’m trying to learn, so forgive me if I’m being a noob.
I’ve gotten everything loaded in properly and it works. I do however use a few other JS scripts in my site as well as that specific page that I’m working on (image script and poshytip). When I get yours working right, these no longer work and vice versa. Any ideas?
Awesome work none the less – I’ve learned a lot just from this one tutorial and I thank you for it :)
Reply ↓
Joe Villa on March 26, 2013 at 10:27 said:

Is there a reason why i can’t click between tabs after changing the ul id to “tab” and replacing everything that is “tabs” rewritten to “tab”? Solutions are much appreciated :)
Reply ↓
- Catalin Rosu on March 26, 2013 at 11:09 said:
  
  Pasting that code here is not too helpful :)
  In the future, please try using something like jsfiddle.net to build a demo example.
  Reply ↓
  - Joe Villa on March 26, 2013 at 11:19 said:
    
    Will do. With that said, do you know what I may have done wrong? The only thing I did was to rename all the “tabs” in .css and .js to “tab” so that it will not affect other functions in my website. “#tab1″ is clickable and cursor is available on hover over but “#tab2″ is totally not working at all.
    Reply ↓
    - Catalin Rosu on March 26, 2013 at 11:39 said:
      
      Joe,
      I think it’s a copy/paste problem there. Maybe you should consider choosing a safer name like: “minimal-tabs” or something like that in order to avoid any interactions.
      Be careful with namings when making replacements because I don’t see any reason why it shouldn’t be fine.
      Good luck and feel free to send me jsFiddle link once you’ll do the updates.
      Reply ↓
Tiwaz.pl on April 4, 2013 at 21:59 said:

very good tutorial
Reply ↓
keybon on April 13, 2013 at 00:11 said:

Hi, I saw that you said that it is now possible to access the tabs by URL, but for me it doesn’t work… Did I do something wrong or it isn’t supposed to work ?
Reply ↓
- keybon on April 19, 2013 at 23:16 said:
  
  Hi it is a very big problem for me, could you give me some help please ?
  Reply ↓
- Catalin Rosu on April 20, 2013 at 18:36 said:
  
  Check the demo example, it works. Please note the #tab2 string from the url.
  Reply ↓
  - Marina on April 23, 2013 at 12:43 said:
    
    Catalin, si la mine nu merge! am incercat in FF si Opera. Demo cu #tab2 tot nu merge.
    Reply ↓
    - Catalin Rosu on April 23, 2013 at 13:58 said:
      
      1. Open new tab
      2. Paste this URL for example: http://www.red-team-design.com/wp-content/uploads/2012/05/google-play-minimal-tabs-with-css3-jquery-demo.html#tab3
      3. It works! ;)
      Good luck!
      Reply ↓
      - keybon on May 10, 2013 at 21:54 said:
        
        hi, sorry but it still doesn’t work for me. could you tell me what part of the code is triggering it ?
Dennis on April 19, 2013 at 14:18 said:

Nice tutorial but I have a problem that I need help with solving:
I did exacley as the tutorial said but my menu is small, and I want to increase it (make it bigger) its not like the one in the demo, its a smaller version of it.
Thanks for the tutorial though, really nice work! :)
Reply ↓
- Catalin Rosu on April 19, 2013 at 14:21 said:
  
  Dennis, just play with font-size, border-width, padding & line-height for #tabs a. It’s pretty straightforward.
  Good luck!
  Reply ↓
Dennis on April 25, 2013 at 15:26 said:

I get everything to work, but when I press Home for example, its not in a black color so I know which site Im in. If I press Home on ur demo it turns black so I know that im on that page but I cant get that to work on mine.. Could u help me out?
Reply ↓
Leo on May 20, 2013 at 17:34 said:

Hey, awesome tutorial here, this tutorial in combination with the JS in the comments was great. However, I am facing a problem now: I want to have two of these tab divs in the same document, how do I go about that. In the current state, only the second one is working, any idea why? Could it be because the site caches the variables, and the variable names are the same, meaning I have to change every single variable name as well?
Furthermore, I am at the moment using two different scripts, because the references go to different divs (classes don’t work since that would trigger both divs to change tab). However, I would love it if someone could answer me if it’s possible to make it all into one javascript in a neat and tidy way.
Reply ↓
- Catalin Rosu on May 22, 2013 at 15:06 said:
  
  Leo, please check the jQuery plugin made by Justin! That should do it!
  Reply ↓
Leo on May 23, 2013 at 00:17 said:

Never mind, that doesn’t work either; since the classes are the same, it will hide both all tabs except for the active one, meaning only one active tab/page and not one active tab/list as I’m wanting. Trying to use .parent and .closest now to find a nicer more universal solution for an infinite amount of tabbed lists!
Reply ↓