Css Only Tabs

Posted on  by admin

Pure CSS Tabs With A Hint Of JS

DigitalOcean joining forces with CSS-Tricks!

Special welcome offer: get $100 of free credit. MORE CURRENT ARTICLE:Functional CSS Tabs Revisited.

CSS Tabs Menu

When you think of “tabs”, your mind might go right to JavaScript.

Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on.

Pure CSS Tab Navigation

All major JavaScript libraries tackle tabs in some way.

But there is a way to accomplish this same idea with “pure CSS”. Just as we did with the CSS Image Switcher, let’s tackle this traditionally JavaScript project with only CSS.

18. CSS Tab Portfolio Example

The major empowering concept here is the CSS pseudo selector :target.

:target is used in conjunction with ID selectors. The selector will match when the current URL contains a hash-tag of that exact ID.

So if the current URL is:. And there was an element with that ID on the page:. Then this selector will match:. How does one get to a URL with such a hash tag?

3. Closable CSS Tabs

You have links that activate them:. Normally I might end a tutorial like this with a little section on browser support. But it’s rather important in this case so let’s get it out of the way now. :target is considered CSS3. It has wide support across all the major current browsers. Of course I’m all abut dropping support for IE 6, so who cares if it doesn’t work in that (it doesn’t), but :target is also not supported in IE 7 or 8.

These browsers are still very much on the radar, which puts this whole tutorial in a fun/educational category rather than a use-this-in-live-production category.

CSS Tab Selection

Of course, if you wanted to use it in production, one option would be to use conditional comments to add JavaScript to make them to work. We won’t specifically cover that here.

Let’s start this out right with some nice and clean HTML markup for our soon-to-be tabbed area:.

No need for the IE 6 and 7 hacks here, since neither of those support this technique anyway. Now let’s set up the very basic styling for the panels. There is a wrapping div for all the panels. The purpose of that is to set a relative positioning context so we can absolutely position panels inside of it. All the panels will be of equal height and width and positioned exactly on top of each other.

CSS Only Awesome Tabs Example Live Preview

Both panels and tabs share the same 1px border. Now the magical part that makes it work is as simple as adjusting the z-index of the panels when they are “targeted”.

What we have so far is a totally functional tabbed area. You click the tab, the corresponding content in that tab loads.

12. Minimal CSS Tab Design

Functional, but not the most helpful UI. There is no feedback at all which tab is the currently showing tab, either when the page loads or even when you click to view a different tab.

That would be a cool way to select only that particular link when that panel is active, but as of now, we can’t do that because that link isn’t a descendant of the panel. The only way I’ve been able to solve this is to actually just make the navigation descendants of the panels. This is a bummer, because that means that each panel needs to repeat the tabs….

11. Simple Flat Tabs (CSS)

Very much not ideal, I know. But now that the lists are inside the panels, we can just use a “current” class on the list item that is the correct corresponding link and style that. And we’ll make sure the current panels tab navigation is positioned above the panels and is “on top” when it’s panel is.

That all goes back to :target and how it’s related to the hash in the URL. There is really no way around this without bringing in JavaScript, so if that’s not gonna work for you, you should probably just go JavaScript from the get-go. Also, hash tag links “jump down the page” when clicked, so also note that that when you click a tab your browser window will pop down to have that tab be the top-most element (if there is enough room to scroll down on the page). Again, no fighting that without JavaScript to my knowledge. Stay on Target – Awesome article from Think Vitamin, unfortunately missing it’s demos.

4. Animated HTML & CSS Tabs

In this post we will look at two different ways of creating tabbed area using HTML and CSS only. One of the method will require little bit of Javascript for better user experience but will work fine without Javascript.

6. Card Tabs (CSS)

The two ways of creating tabbed area is:. Using Radio Buttons: Only one radio button can be selected from a same group of radio buttons.

Using :target Selector: This is the most preferred way of creating tabbed area. To learn more about :target selector Click Here. In this method we have to make use of Javascript for better user experience.

19. User Menu CSS Tabs

In the above code we have attached the :checked selector to all radio buttons.

The only thing that lacks is highlighting of the first tab when the page is opened. This can be achieved using Javascript. There is proper way to get this functionality using CSS only. Conclusion Frameworks like bootstrap use the second method for tabbed area so you need to use Javascript to control and highlight the active tab in bootstrap.

CSS Tab by Chen Hui Jing

Both methods are popular and is used widely. The first method might look ugly but there is nothing bad in code style or trick.

If you like it please “Like and Share”. A tabbed interface or simply a tab is a graphical control element one can use to contain multiple panels or documents onto a single window for users to access.