タブメニューを改修しました

無料のワードプレステーマ GEMSTONE

最近主流になりつつある、ラベルタグとラジオボタンを使ったタブメニュー。
GEMSTONEバージョン1.0.8を公開と同時に、改修版を組み込んでいます。

タブコンテンツ サンプル

まずはサンプルをご覧ください。

ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。
ここにテキスト2が入ります。ここにテキスト2が入ります。
ここにテキスト3が入ります。

ぱっと見は前回のバージョンとほぼ同じ。
何が違うのかと言うと、今までは高さの指定が決まっていたので、文字の量に合わせて高さ(height)を設定しないと、場合によっては文字がはみ出てしまう場合がありました。そこを改修して、高さが変化しても文字がはみ出ないようになっています。
そしてもう一つ。横幅788px以下になると、現在表示されているパネルのみが表示されるようになり、クリックすると他のタブとクローズボタンが表示されるようになります。これで見た目がすっきりしました。

コードは以下のとおり。
やたらと長いので少々扱いが面倒ですが、JSも使わず、レスポンシブにも対応しているので、非常に便利です。
GEMSTONEのテーマを入れて使用する場合は

<!--handmade-->

と組み合わせて、固定ページに使うのが良いかと思います。
(上記のコメントアウトを使うと自動改行や自動挿入タグが入らなくなります)
これでコピペで簡単にタブメニューを導入することができます。

HTML

<p class="fs20 fb no-pb">タブコンテンツ サンプル</p>
<div class="tab-wrap">
<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl" class="panel-radios" type="checkbox" name="nav-checkbox">
<!-- TABS LIST -->
<div class="clearfix"></div>
<div class="nav-tab">
<ul>
<label id="open-nav-label" for="nav-ctrl"></label>
<li class="li-for-panel-1"><label class="panel-label" for="panel-1-ctrl">タブメニュー1</label></li><li class="li-for-panel-2"><label class="panel-label" for="panel-2-ctrl">タブメニュー2</label></li><li class="li-for-panel-3"><label class="panel-label" for="panel-3-ctrl">タブメニュー3</label></li>
<label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>
</div>
<article class="panels">
<div class="container">
<section id="panel-1">
<main>
ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。ここにテキスト1が入ります。
</main>
</section>
<section id="panel-2">
<main>
ここにテキスト2が入ります。ここにテキスト2が入ります。
</main>
</section>
<section id="panel-3">
<main>
ここにテキスト3が入ります。
</main>
</section>
</article>
</div>

CSS

 /*Tab menu panel*/
.tab-wrap {
 clear:both;
 display:inline;
}
.tab-wrap img {
 border:1px solid #fff;
 margin-bottom:20px;
}
.tab-wrap [type="checkbox"]:checked,
.tab-wrap [type="checkbox"]:not(:checked),
.tab-wrap [type="radio"]:checked,
.tab-wrap [type="radio"]:not(:checked){
 position:relative;
 left:0;
 right:0;
 display:none;
}
.nav-tab ul {
 list-style:none;
 text-align:center;
 margin:0;
 padding:0;
 float:left;
 width:100%;
}
label.panel-label {
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 display:block;
 width:100%;
 color:#199ece;
 cursor:pointer;
 background-color:#eef0f6;
 font-weight:bold;
 font-weight:700;
} 
.panels {background-color:#fff; display:inline-block;}
.panels .container {
 margin:0 auto;
 width:100%;
}
.panels section header label.panel-label {
 padding:12px 24px;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
.panels section main {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 max-height:0;
 opacity:0;
 overflow-y:hidden;
 background:#eef0f6;
} 
#panel-1-ctrl:checked ~ .panels #panel-1 main,
#panel-2-ctrl:checked ~ .panels #panel-2 main,
#panel-3-ctrl:checked ~ .panels #panel-3 main,
#panel-4-ctrl:checked ~ .panels #panel-4 main,
#panel-5-ctrl:checked ~ .panels #panel-5 main {
 max-height:initial;
 opacity:1;
 padding:10px;
}
@media all and (min-width: 768px) {
#panel-1-ctrl:checked ~ .nav-tab .li-for-panel-1,
#panel-2-ctrl:checked ~ .nav-tab .li-for-panel-2,
#panel-3-ctrl:checked ~ .nav-tab .li-for-panel-3,
#panel-4-ctrl:checked ~ .nav-tab .li-for-panel-4,
#panel-5-ctrl:checked ~ .nav-tab .li-for-panel-5 {
 pointer-events:none;
 cursor:default;
 -webkit-box-shadow:none;
 box-shadow:none;
 border-top:none;
 border-right:none;
 position:relative;
}
#panel-1-ctrl:checked ~ .nav-tab .li-for-panel-1:after,
#panel-2-ctrl:checked ~ .nav-tab .li-for-panel-2:after,
#panel-3-ctrl:checked ~ .nav-tab .li-for-panel-3:after,
#panel-4-ctrl:checked ~ .nav-tab .li-for-panel-4:after,
#panel-5-ctrl:checked ~ .nav-tab .li-for-panel-5:after{
 position:absolute;
 top:34px;
 left:0;
 right:0;
 display:block;
 content:"";
 width:10px;
 height:5px;
 margin:0 auto;
 border-style:solid;
 border-width:5px 5px 0 5px;
 border-color:#199ece transparent transparent transparent;
}
#panel-1-ctrl:checked ~ .nav-tab .li-for-panel-1 label.panel-label,
#panel-2-ctrl:checked ~ .nav-tab .li-for-panel-2 label.panel-label,
#panel-3-ctrl:checked ~ .nav-tab .li-for-panel-3 label.panel-label,
#panel-4-ctrl:checked ~ .nav-tab .li-for-panel-4 label.panel-label,
#panel-5-ctrl:checked ~ .nav-tab .li-for-panel-5 label.panel-label {
 background-color:#199ece;
 color:#fff;
}
.entry-content .nav-tab li:before {display:none;}
.nav-tab ul {text-align:left;}
.nav-tab li {
 display:inline-block;
 text-align:center;
 width:auto;
 margin-bottom:0;
 padding:0;
 -webkit-transition:opacity 600ms;
 transition:opacity 600ms;
}
.nav-tab li label.panel-label {
 padding:10px 30px;
 border:1px solid #fff;
 border-bottom:none;
 border-radius:5px 5px 0 0;
}
#open-nav-label,
#close-nav-label,
#nav-ctrl {display:none;}
}
.panel-radios {
 position:fixed;
 left:50%;
 top:10px;
 width:20px;
 opacity:0.5;
 z-index:99;
}
.panel-radios:nth-child(1) {
 -webkit-transform: translateX(-50px);
 -ms-transform: translateX(-50px);
 transform: translateX(-50px);
}
.panel-radios:nth-child(2) {
 -webkit-transform: translateX(-30px);
 -ms-transform: translateX(-30px);
 transform: translateX(-30px);
}
.panel-radios:nth-child(3) {
 -webkit-transform: translateX(-10px);
 -ms-transform: translateX(-10px);
 transform: translateX(-10px);
}
.panel-radios:nth-child(4) {
 -webkit-transform: translateX(10px);
 -ms-transform: translateX(10px);
 transform: translateX(10px);
}
.panel-radios:nth-child(5) {
 -webkit-transform: translateX(30px);
 -ms-transform: translateX(30px);
 transform: translateX(30px);
}
.panel-radios:nth-child(6) {
 top: 30px;
 -webkit-transform: translateX(-10px);
 -ms-transform: translateX(-10px);
 transform: translateX(-10px);
 display: block;
}
@media all and (max-width: 767px) {
.nav-tab li label.panel-label {font-size:16px;}
.entry-content .nav-tab li {margin-bottom:0;padding:0;}
.entry-content .nav-tab li:before {display:none;}
#nav-ctrl:checked ~ .nav-tab .li-for-panel-1,
#nav-ctrl:checked ~ .nav-tab .li-for-panel-2,
#nav-ctrl:checked ~ .nav-tab .li-for-panel-3,
#nav-ctrl:checked ~ .nav-tab .li-for-panel-4,
#nav-ctrl:checked ~ .nav-tab .li-for-panel-5 {
 max-height:46px;
 opacity:1;
 margin-bottom:1px;
}
#open-nav-label {
 display:block;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 cursor:pointer;
} 
#nav-ctrl:checked ~ .nav-tab #open-nav-label {display:none;}
#close-nav-label {
 display:block;
 max-height:0;
 overflow-y:hidden;
 background-color:#3e465a;
 color:#fff;
 padding:0;
 -webkit-transition:max-height 200ms;
 transition:max-height 200ms;
 cursor:pointer;
 letter-spacing:1px;
 font-weight:bold;
 font-weight:700;
}
#nav-ctrl:checked ~ .nav-tab #close-nav-label {
 max-height:46px;
 opacity:1;
 padding:12px 24px;
}
.nav-tab ul {position:relative;}
.nav-tab label.panel-label {padding:12px 0;}
.nav-tab .li-for-panel-1,
.nav-tab .li-for-panel-2,
.nav-tab .li-for-panel-3,
.nav-tab .li-for-panel-4,
.nav-tab .li-for-panel-5 {
 max-height:0;
 overflow-y:hidden;
 -webkit-transition:max-height 200ms;
 transition:max-height 200ms;
}
#panel-1-ctrl:checked ~ .nav-tab .li-for-panel-1,
#panel-2-ctrl:checked ~ .nav-tab .li-for-panel-2,
#panel-3-ctrl:checked ~ .nav-tab .li-for-panel-3,
#panel-4-ctrl:checked ~ .nav-tab .li-for-panel-4,
#panel-5-ctrl:checked ~ .nav-tab .li-for-panel-5 {
 max-height:46px;
 opacity:1;
}
#panel-1-ctrl:checked ~ .nav-tab .li-for-panel-1 label.panel-label,
#panel-2-ctrl:checked ~ .nav-tab .li-for-panel-2 label.panel-label,
#panel-3-ctrl:checked ~ .nav-tab .li-for-panel-3 label.panel-label,
#panel-4-ctrl:checked ~ .nav-tab .li-for-panel-4 label.panel-label,
#panel-5-ctrl:checked ~ .nav-tab .li-for-panel-5 label.panel-label {
 background-color:#199ece;
 color:#fff;
}
.panels .container {width:100%;background:#eef0f6;}
.panels section header {display:block;}
}

ぜひご利用ください!

この記事のタグ

デフォルト画像GEMSTONEバージョ... 前の記事

次の記事 GEMSTONEバージョ... デフォルト画像

コメントは停止中です。