How to create a pure css tabbed menu widget using radio input?
This is a tutorial on how to create a simple tabbed menu using radio input. This type of widget is widely used on website to economize space. Very useful on news websites.
Install & Usage
Clone this reposetory or download the zip. Extract the zip in your folder.
Embed the code in yours
The Structure of the code is as following:
- Repeat as many
tabas the number of tabs you want for your menu
- Each radio input should have a different
- Mark the default active tab as
- In the
tab-contentyou are free to put any HTML code
<div class="tab-wrapper"> <div class="tab"> <input type="radio" name="tab" id="tab1" checked> <label for="tab1">Tab One</label> <div class="tab-content"> Tab content here </div> </div> <!-- ....... --> </div>
The most important thing to keep in mind is the use of css
Hide all input radio buttons
The use of the css sibling selector
~to target elements associated to a label
You will need to test it on most common browsers. Mostly their compatibility with
:checked pseudo-class and
The responsiveness can be easily handled by css
media queries. I did an example with small devices. In that case I converted the tabs into accordion navigation.
Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.