【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【jQuery】切替可能なレスポンシブ対応のタブメニューを作ってみる

【jQuery】切替可能なレスポンシブ対応のタブメニューを作ってみる

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

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

今回は、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>

ステップ2: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;
}

ステップ3: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>

最後に

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

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

本田

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+