タブメニューを作ってみよう

みなさんこんにちは。開発部の本田です。

今回は、jQueryを使って簡単に切替できるレスポンシブ対応のタブメニューを実装していきたいと思います。
最近では様々な用途のサイトで導入されており、ECサイトで利用されることも多々あります。

オシャレで見やすいサイトを実現できるので是非試してみてください。

タブメニューとは、タブをクリックするとページスクロールすることなく、事前に設定したエリアに格納されたコンテンツが表示され、タブの切替によってコンテンツの中身も切り替わるメニューのことです。

「表示させたいコンテンツは多んだけど、ページをスクロールさせたくない」という時に有効なメニューだと思います。

実際にこちらのデモサイトを見てください！見たことあると思います。（もちろんレスポンシブなのでスマートフォンでも動きます）

ということで以下早速実装していきます。

ステップ1：HTMLの実装

まずはHTMLです。ECサイトの商品ページで使えそうな文言を入れています。

<ul>
    <li><a href="#tab1" class="current">color</a></li>
    <li><a href="#tab2" class="">size</a></li>
    <li><a href="#tab3" class="">Material</a></li>
    <li><a href="#tab4" class="">Country</a></li>
  </ul>
  <div id="contents">
    <div id="tab1">
      <p><strong>Blue/Red/White</strong></p>
      <p></p>
    </div>
    <div id="tab2">
      <p><strong>36・38・40</strong></p>
      <p></p>
    </div>
    <div id="tab3">
      <p><strong>cotton 100%</strong></p>
      <p></p>
    </div>
    <div id="tab4">
      <p><strong>Japan</strong></p>
      <p></p>
    </div>
  </div>

ステップ２：CSSの実装

次にCSSです。

body{
	font-family: Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	background:#E46E6E;
}
ul li {
    float: left;
    list-style-type: none;
    width: 25%;
}

ul li a {
    font-size: 1em;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 9%;
    text-align: center;
    width: 100%;
    background: #C15757;
    border: 1px solid #c15757;
    border-bottom: none;
}
ul li a:hover{
	background:#D26161;
	color:#FFF;
}

ul li a.current {
    background: white;
    color: #C15757;
}

#contents{
	clear:both;
}

#contents div {
    padding: 5%;
    background: white;
    text-align: center;
    border: 1px solid #c15757;
    border-top: none;
}

#contents p{
	margin-top:20px;
	line-height:2em;
	color:#C15757;
}

#contents strong {
    font-size: 2em;
    font-weight: bold;
    color: #c15757;
    text-decoration: underline;
}

ステップ３：jQueryの実装

最後にjQueryの実装です。コードは短いです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>
$(function(){
	$('#contents div[id != "tab1"]').hide();
	
	// タブをクリックすると
	$("a").click(function(){
		// 一度全てのコンテンツを非表示にする
		$("#contents div").hide();

		// 次に選択されたコンテンツを再表示する
		$($(this).attr("href")).show();
		
		// 現在のcurrentクラスを削除
		$(".current").removeClass("current");
		
		// 選択されたタブ（自分自身）にcurrentクラスを追加
		$(this).addClass("current");

		
		return false;
	});

});
</script>

最後に

コンテンツ量が多くなると、限られたエリアに全てのコンテンツを表示させることが難しくなりがちです。

そういったときに今回のタブメニューを使ってスクロールせずともコンテンツを伝えられるページを作ってみてください。せっかくの良いコンテンツも見られない、読まれないと意味がありませんので、ユーザの目に入るように工夫を重ねていきましょう。

本田