大まかに分けると【釣り】と【ブログ】について書いている当サイト。
トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、ざっくりとカテゴリを分けるためにタブ切り替えにしたいなぁと思っていて。
今回、思い切って導入いたしました!

タブ切り替えのイメージ
ボタン1のコンテンツを表示します
ボタン2のコンテンツを表示します
ボタン3のコンテンツを表示します

こんな感じでクリックしたコンテンツが下部に表示されます!
参考にさせていただいたサイト
オシャレなサイトでとても分かりやすい『ものぐさWEBノート』さんから知恵をお借りしました!!ヾ(*・∀・)
HTML
<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label>
<div class="tab-content">
コンテンツ 1
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label>
<div class="tab-content">
コンテンツ 2
</div>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン 3</label>
<div class="tab-content">
コンテンツ 3
</div>
</div>
CSS
タブのデザインはこのサイトに合わせたピンク系吹き出しにするためにコードを変更しました。
/**************************
タブ切り替え
***************************/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:5px 0;
}
.tab-label {
color: White;
background:lightgray;
text-align: center;
padding: .5em 1em;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
border-radius: 2px;
position: relative;
}
.tab-label:not(:last-of-type) {
margin-right: 5px;
}
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
background:#ff9999;
}
.tab-switch:checked+.tab-label:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top:10px solid #ff9999;
width: 0;
height: 0;
}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px 0 0 0;
opacity: 1;
transition: .5s opacity;
}
/* ラジオボタン非表示 */
.tab-switch {
display: none;
}
タブを入れ子にして複数設置しました!
タブを複数設置できるとのことで、
- 新着記事
- 人気記事
この2つをカテゴリごとにタブ切り替えできるようにしました。
↓ここに新着記事を表示↓
↓ここに人気記事を表示↓
自分で作るには難しいと思っていたタブ切り替えを、情報を公開しているサイト様々のおかげで実装することができて満足しています♪(*・ω・人)
コメント