The current article

ブラウザ幅(ブレイクポイント)でタブメニューからアコーディオンメニューに切り替えるjQuery

スマートフォン等で閲覧した時、タブメニューからアコーディオンメニューへ、レスポンシブに変わってくれると使いやすくなりますよね。
シンプルなコードで動作しますので、備忘録を兼ねてご紹介します。

capture

参照サイト:Easy Responsive Tabs to Accordion
ダウンロード:Download

デモページ DEMO

ダウンロード

上記ダウンロードから「Easy Responsive Tabs to Accordion」フォルダをダウンロードします。
(GitHubに登録されていない方は、右下の「Download ZIP」からどうぞ)
解凍すると色々入っていますが、
・JSフォルダ内 easyResponsiveTabs.js
・CSSフォルダ内 easy-responsive-tabs.css
の2つで動くと思います。

設置

head内に、CSSとjQuery本体を読み込ませ、スクリプトを記述します。

<link rel="stylesheet" type="text/css" href="style/easy-responsive-tabs.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
    });
</script>

簡単な説明ですが、
1行目、スタイルシートを読み込み、
2行目、jQuery本体を読み込み、
3行目、スクリプト本体を読み込み
となります。

4行目以下で、セレクタ名の指定と、オプションを指定します。
6行目で、梱包するセレクタを指定(今回は「#horizontalTab」)
7行目、「default」は横並びのタブ、「vertical」は縦並びのタブ、「accordion」は常にアコーディオン、
8行目、横幅を指定、px幅に変更も可、
9行目、親要素に合わせるかどうか、
10行目、アコーディオン表示時、閉まった状態
となります。

HTML

HTML内に以下を記述します。

<div id="horizontalTab">
  <ul class="resp-tabs-list">
    <li>情報その1</li>
    <li>情報その2</li>
    <li>情報その3</li>
    <li>情報その4</li>
  </ul>
  <div class="resp-tabs-container">
    <div>
      <p>情報その1の内容</p>
    </div>
    <div>
      <p>情報その2の内容</p>
    </div>
    <div>
      <p>情報その3の内容</p>
    </div>
    <div>
      <p>情報その4の内容</p>
    </div>
  </div>
</div>

1行目のセレクタ名をスクリプトと合わせてください。

後はリストに、タブ用のタイトルを入れて、「div」毎に内容を記述してください。

CSS

ちなみにDEMOページは、別シートでスタイルをあてていますが、以下の様な感じです。参考まで。

/* tab to accordion
===========================================================*/
h3 { color:#F15A24;}
.demo { width: 980px; margin: 0px auto 30px;}
.demo ul { margin-bottom:16px;}
.demo li { list-style:square inside;}
.note { position:relative; color:#333; overflow:hidden;}
.note:after {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    border-width:30px 30px 0 0 ; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#39b5a4 #F5F5F5 #F5F5F5 #39b5a4; /* A bit more verbose to work with .rounded too */
    background:#39b5a4; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

@media only screen and (max-width: 768px) {
.demo { margin: 5%; width: 90%;}
.note { background: #39b5a4;padding-bottom:30px;}
}

ブレイクポイントは768pxとなっています。
変更したい場合は、「easy-responsive-tabs.css」内の、167行目付近にある「@media only screen and (max-width: 768px)」を適宜変更してみてください。
(DEMOページの場合は、上記24行目も変更が必要です!)

以上、「ブラウザ幅(ブレイクポイント)でタブメニューからアコーディオンメニューに切り替えるjQuery」のご紹介でした。

Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。