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

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

 

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

JSを使ったアコーディオンメニューと、cssのみで実装したアコーディオンメニューの実装方法

コーディング

f:id:s2lybb:20170115113152p:plain

 

今回はアコーディオンメニューについてまとめます。   

スマホサイトが増えてからよく見られる様になりましたアコーディオンメニューですが、実装は主にの2通りあります。

【1:cssのみでの実装(※チェックボックスを利用してます)】

    

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

※cssのみで実装する場合は、チェックボックスを利用するもの以外にもラジオボタンを利用するものがありますが、まだ勉強中なので、今回はチェックボックスのみをまとめたいと思います。

  

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

  

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

  

See the Pen アコーディオンメニュー(JS使用) by Kaorin (@PANbooooo) on CodePen.

See the Pen AccordionMenu(CSSのみ) by Kaorin (@PANbooooo) on CodePen.

 
 

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

See the Pen アコーディオンメニュー(JS使用)(装飾なし) by Kaorin (@PANbooooo) on CodePen.

See the Pen AccordionMenu(CSSのみ)(装飾なし) by Kaorin (@PANbooooo) on CodePen.

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

 

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

 

まずはJSを使用したアコーディオンメニューのhtmlです。  

 

f:id:s2lybb:20170115113212p:plain

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

 

次にcssのみを使用したアコーディオンメニューのhtmlです。

 

f:id:s2lybb:20170115113227p:plain

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

 

両方のhtml構造も、ボタンの中身の方(画像右側)は全く同じです。

ちなみにこのボタンの中身の方(画像右側)は、下記の様に書き換えることができます。

<ul>
<li>リンク1</li>
<li>リンク2</li>
</ul>

そして、この中身を出す為に押さなくてはいけないボタンの方をじっくり見ていきたいと思います。

JS使用のボタンのHTML構造はこんな感じです。

<ul>
<li><a>タイトル1</a></li>
<li><a>タイトル2</a></li>
</ul>

大きなulタグliタグのみで構成されてます。中身のulタグと区別をつけるためにも、各々のulタグにクラス名、またはid名が必要ですね。htmlとcssのみで見れば、こちらのほうが作りやすく感じるかもしれません。

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

<label for="list1">ボタン1</label>
<input type="checkbox" id="list1" class="check" />

まずlabelタグですが、ここがミソです。

あまり見慣れないlabelタグだと思いますが、labelタグinputタグselectタグとセットで使われることが多いです。
使用方法はこんな感じです。

See the Pen labelタグを用いたinput by Kaorin (@PANbooooo) on CodePen.

labelタグを使用することで、labelタグ内にあるテキストをクリックすると、ラジオボタンやテキストボックス、チェックボックスが反応します。スマホサイトで入力欄を作る際には、おすすめのタグです。ただ、注意事項としましては、labelタグ内のfor名と、inputタグ内のid名は統一しなくてはならないということです。

 

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

 

まずはJSを使用したアコーディオンメニューのcssです。

 

f:id:s2lybb:20170115113245p:plain

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

 

.submenu{
display: none;
}

上記のcssの記入により、中身のulタグ内を通常時は非表示にしています。
JSのみのアコーディオンメニューのcssはこの一つで十分です。

 

次にcssのみを使用したアコーディオンメニューのcssです。

 

f:id:s2lybb:20170115113302p:plain

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

 

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

input[type="checkbox"].check{
display: none;
}

上記のcssにより、チェックボックスを非表示にしています。

input[type="checkbox"].check{
display: none;
}

上記のcssにより、アコーディオンメニューのulタグ内を非表示にしています。この部分が一番大切です。

input[type="checkbox"].check:checked + ul{height:40px;}

上記のcssにより、アコーディオンメニューのulタグ内の高さを設定しています。この高さを大きくすると、ボタンを押したときに出てくるアコーディングメニューの領域が大きくなります。

 

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

f:id:s2lybb:20170115113312p:plain

ここでは、JSを使ったチェックボックスのみの説明となります。

$(function(){ 
}

この記述で、処理を実行します。

$(document).ready(function(){});
jQuery(function(){}
jQuery(document).ready(function(){});

処理を実行する記述は、上記の3パターンに書き換えることができます。

$(this).toggleClass("active").next().slideToggle(300);

toggleClassによって、指定した箇所(今回は「this」が指定箇所に当たります。)activeというクラス名を、無ければ追加、あれば削除できます。

.slideToggleによって、指定した箇所(今回は「this」が指定箇所に当たります。)のスライドをアップしたり、ダウンすることができます。
続くカッコ内の数字は、スライドの速さを指定することができます。今回は「300」という指定のため、0.3秒かけてアニメーションが動くという実装になっています。ここは、リアルな数字を入れなくても、「fast」や「slow」等でも実装可能です。

$("li a").click(accordion);

指定した箇所(今回は「liの中のa」)をクリックすると、アコーディオンを実行できます。

今回はアコーディオンについて説明しました。装飾の部分をとってしまうと、とても簡単な実装であることが分かりました。
JSはOSやブラウザによってうまく反映されるものと反映されないものがあるため、アコーディオンメニューをサイト内で使いたい場合は、今回紹介した2つの方法をどちらも取り入れることをおすすめします。