Pure CSS Bulma Tabs
source link: http://siongui.github.io/2018/01/30/css-only-bulma-tab-panel/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Pure CSS Bulma Tabs
January 30, 2018
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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK