うぇぶごと

ぽんこつwebデザイナーのスキルのメモ

JSを使ったタブメニューと、cssのみで実装したタブメニューの実装方法をまとめてみた

f:id:s2lybb:20170416133653j:plain

今回はタブメニューについてまとめました。

タブメニューはページを変えることなく、別画面に移動できるため、ユーザーにとっても使いやすく、そして、見やすい画面構成となります。
ただ、タブの数が多くなってしまうと、押しにくく、見辛い画面となってしまうため、注意が必要です。少なくとも、タブ数は最低3つくらいが良いでしょう。

 

タブメニューを作る方法は2通りあります。

【1:cssのみでの実装】

【2:jsも使用した実装】

 

まずはコードを比べてみましょう。

See the Pen jQueryを使ったタブ切り替え by Kaorin (@PANbooooo) on CodePen.

 

See the Pen cssのみのタブ切り替え by Kaorin (@PANbooooo) on CodePen.

 

上がJSを利用したもので、下がcssを利用したものです。

 

 

まずは各々の機能を知る為に、装飾をしているcssを消してみたいと思います。

See the Pen jQueryを使ったタブ切り替え(装飾なし) by Kaorin (@PANbooooo) on CodePen.

See the Pen cssのみのタブ切り替え (装飾なし) by Kaorin (@PANbooooo) on CodePen.

前回と同様、cssがグッと減り、見やすくなりました。

 

 

次にhtmlの構造を見てみましょう。

まずはJSを使用したタブメニューのhtmlです。

<ul class="tabMenu">
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="textArea">
<li>1</li>
<li class="text">2<br />2</li>
<li class="text">3<br />3<br />3</li>
<li class="text">4<br />4<br />4<br />4</li>
<li class="text">5<br />5<br />5<br />5<br />5</li>
</ul>

 

次にcssのみを使用したタブメニューのhtmlです。

<div class="tabMenu">
<div id="tab">
<a href="#menu1">1</a>
<a href="#menu2">2</a>
<a href="#menu3">3</a>
<a href="#menu4">4</a>
<a href="#menu5">5</a>
</div>
<div id="textArea">
<ul>
<li id="menu1">1</li>
<li id="menu2">2<br>2</li>
<li id="menu3">3<br>3<br>3</li>
<li id="menu4">4<br>4<br>4<br>4</li>
<li id="menu5">5<br>5<br>5<br>5<br>5</li>
</ul>
</div>
</div>

 

JSを利用した場合のHTMLと、cssのみの場合のHTMLを見比べてみましょう。

 

まずはJSのHTMLについてみてみます。

全体をulタグで囲んでおり、その中にタブの外側を入れてます。liタグでボタンを形成し、class名を入れて、選択している箇所との違いを出しています。

<div id="tab">
<a href="#menu1">1</a>
<a href="#menu2">2</a>
<a href="#menu3">3</a>
<a href="#menu4">4</a>
<a href="#menu5">5</a>
</div>

こちらこのようにdivタグaタグで囲むことも可能です。

 

次にタブの中身のhtmlです。

<ul id="textArea">
<li id="menu1">1</li>
<li id="menu2">2<br>2</li>
<li id="menu3">3<br>3<br>3</li>
<li id="menu4">4<br>4<br>4<br>4</li>
<li id="menu5">5<br>5<br>5<br>5<br>5</li>
</ul>

こちらはulタグliタグで構成されています。

 

次にcssのみ使用のボタンのHTML構造はこんな感じです。

<div class="tabMenu">
</div>

全体をdivタグで囲んでいます。

 

次にタブのボタンのhtmlを見てみましょう。

<div id="tab">
<a href="#menu1">1</a>
<a href="#menu2">2</a>
<a href="#menu3">3</a>
<a href="#menu4">4</a>
<a href="#menu5">5</a>
</div>

全体をdivタグで囲んでいて、1つ1つをaタグで囲んでいます。

ここはulタグで囲み、1つ1つをliタグで囲むことも可能です。

 <ul id="tab">
<li><a href="#menu1">1</a></li>
<li><a href="#menu2">2</a></li>
<li><a href="#menu3">3</a></li>
<li><a href="#menu4">4</a></li>
<li><a href="#menu5">5</a></li>
</ul>

 

次にタブの中身のhtmlです。

ここはulタグで囲み、1つ1つをliタグで囲むことも可能です。

<div id="textArea">
<ul>
<li id="menu1">1</li>
<li id="menu2">2<br>2</li>
<li id="menu3">3<br>3<br>3</li>
<li id="menu4">4<br>4<br>4<br>4</li>
<li id="menu5">5<br>5<br>5<br>5<br>5</li>
</ul>
</div>

ここはdivタグulタグliタグ各々の要素が必要になります。

 

 

次にcssの構造を見てみましょう。

 

まずはJSを使用したタブメニューのcssです。

.tabMenu{
overflow:hidden;
}
.tabMenu li{
float:left;
}

1行目のcssにあるoverflow:hidden;により、はみ出た部分を隠しています。

次に2行目のcssにあるfloat:left;により、ボタンを横並びにしています。

 

次にCSSのみで実装したタブメニューのCSSについてです。

.tabMenu #tab a{
float: left;
}
#textArea{
width:500px;
overflow:hidden;
clear:both;
}
#textArea ul{
width:2500px;
}
#textArea ul li{
float: left;
width:460px;
list-style-type:none;
}

.tabMenu #tab aにfloat: left;をかけることで、横並びにしています。

#textAreaに幅指定することで、表示する範囲を狭くします。この部分を消してしまうと、#textAreaの全ての数字が表示されてしまいます。

また、overflow:hidden;をかけることで、対象以外のテキストを表示しないようにしています。

#textAreaのulに幅を広くとることで、表示されるテキストを横並びにしています。

#textAreaのulのliにfloat:left;をすることで、横並びにし、幅並びにすることでテキスト1つ1つの幅を広げます。

list-style-type:none;で、liにつく点を非表示にしています。

 

 

次はJSの仕組みについてです。

$(function() {
$('.tabMenu li').click(function() {
var index = $('.tabMenu li').index(this);
$('.textArea li').css('display','none');
$('.textArea li').eq(index).css('display','block');
$('.tabMenu li').removeClass('now'); $(this).addClass('now')
});
});

こちらは少し複雑なので、ひとつひとつ整理していきましょう。

 

$(function() {
}

この記述により、処理を実行します。

$('.tabMenu li').click(function()

.tabMenuの中のliをクリックすると動作が起こります。

var index = $('.tabMenu li').index(this);

何番目の要素をクリックしたのかを取得します。

$('.textArea li').css('display','none');

これにより要素を非表示することができます。

この部分は下記の通りに書き換えることもできます。

$('.textArea li').hide();
$('.textArea li').eq(index)
.css('display','block');
$('要素').eq(変数)

この表記によって、複数の要素のn番目を取得することができます。'.tabMenu li'のボタンをどれか一つ押すと、同じ番号の.textArea li'を表示・非表示してくれます。

$('.tabMenu li').removeClass('now');	$(this).addClass('now')

この表記によって、classのnowを取ったり、加えたりできます。

 

 

今回はタブメニューについて説明しましたが、前回のアコーディオンメニューと比べると、cssのみの場合のcss、JSを使用した場合のJSが少し複雑であると思いました。

ただ、今後も使用頻度が増すであろうタブメニュー、使い慣れたいものですね。