Pure CSS Bulma Tabs
CSS only Bulma tab panel implementation. The tabs here is similar to Bootstrap tab, but no JavaScript required. Click the following tabs to see the demo.
The basic technique is the same as pure CSS toggle HTML element [3]. We need:
1 - Visible HTML label elements, which is the navigation tabs.
2 - Invisible HTML input radio elements, referenced by the label elements. The value of name attribute of these elements must be the same.
3 - Tab contents, invisible in the beginning.
When users click on the visible label elements, the corresponding input radio element is checked. We use CSS3 :checked selector to select corresponding tab content, and make the selected tab content visible.
The complete source code is as follows:
HTML:
<!-- Nav tabs -->
<input type="radio" id="pic" name="nav-tab">
<input type="radio" id="music" name="nav-tab">
<input type="radio" id="video" name="nav-tab">
<input type="radio" id="doc" name="nav-tab">
<div class="tabs">
<ul>
<li><label for="pic"><a>Pictures</a></label></li>
<li><label for="music"><a>Music</a></label></li>
<li><label for="video"><a>Videos</a></label></li>
<li><label for="doc"><a>Documents</a></label></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane content-pic">My Pictures</div>
<div class="tab-pane content-music">My Music</div>
<div class="tab-pane content-video">My Videos</div>
<div class="tab-pane content-doc">My Documents</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
CSS:
input[type="radio"], .tab-pane { display: none; }
/* the magic */
#pic:checked ~ .tab-content > .content-pic,
#music:checked ~ .tab-content > .content-music,
#video:checked ~ .tab-content > .content-video,
#doc:checked ~ .tab-content > .content-doc {
display: block;
}
- The first rule hides the tab content and input radio box.
- The magic is in second rule. We use :checked and general sibling selector (~) to make the user-selected tab content visible.
Tested on:
- Chromium 63.0.3239.132 on Ubuntu 17.10 (64-bit)
- Bulma 0.6.2
References:
| [1] | Pure CSS Tab Panel |
| [2] | [Vue.js] Bulma Tabs |
| [3] | Pure CSS Toggle (Show/Hide) HTML Element |