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
Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on.
Pure CSS Tab Navigation
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
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.
4. Animated HTML & CSS Tabs
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.
19. User Menu CSS Tabs
In the above code we have attached the :checked selector to all radio buttons.
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.