読者です 読者をやめる 読者になる 読者になる

KaoLog

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

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

 

 

f:id:s2lybb:20170129185508p:plain

 

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

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

【1:cssのみでの実装】

    

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

  

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

  

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

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

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

 

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

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

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

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

 

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

 

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

 

f:id:s2lybb:20170205214711p:plain

 

画像左側がタブのボタンのHTML構造、画像右側がタブの中身のHTML構造となっています。

 

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

 

f:id:s2lybb:20170205214758p:plain

画像左側がタブのボタンのHTML構造、画像右側がタブの中身のHTML構造となっています。

 

JSを利用した場合のHTMLと、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タグで囲んでおり、その中にタブの外側を入れてます。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です。

 

f:id:s2lybb:20170219140034p:plain

画像左側がボタンのcss構造、画像右側がボタンを押した時に出てくる中側のcss構造となっています。

 

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

まずはJSを使用したタブメニューのcssについてです。1行目のcssにあるoverflow:hidden;により、はみ出た部分を隠しています。

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

 

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

 

f:id:s2lybb:20170219145424p:plain

画像左側がボタンのcss構造、画像右側がボタンを押した時に出てくる中側のcss構造となっています。

 

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

$(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が少し複雑であると思いました。

 

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