JavaScript|moo.fx - タブメニューでアコーディオン表示の作り方チュートリアル

moofx_demo.jpg

今回は、moo.fx [JavaScript] を使って、タブメニューでアコーディオン表示を切り替えるサンプルを作ってみました。
チュートリアルの内容的には新しい物ではありませんが、主要ブラウザ(Safari3・Firefox2&3・IE6・IE7)にも対応していて、カスタマイズしやすく、軽い!
デザインのネタに是非どうぞ。

まずは、デモサイトを見てください。

 

【タブメニューアコーディオンの作り方(シンプル版)】

 

moofx_demo03.jpg

 

1.海外本家サイトからデータをダウンロード

NYOKIGLITTER - Tab Styled Accordion

サイトの文中、『download: tabAccordion.zip (includes images and scripts)』をクリック。
ダウンロードしたzipデータを解凍します。("tabAccordion"フォルダ)

 

2.JavaScriptの読み込み

ダウンロードしたフォルダの"scripts"フォルダから、設置したいサイトの直下に"js"フォルダ(名前は好きなもので)を作り、そこに

・moo.fx.js
・moo.fx.pack.js
・prototype.lite.js

をコピーします。

moofx_demo01.jpg

次に、JavaScriptを外部リンクとして読み込ませるため、設置したいhtmlファイルの<head>〜</head>の間に下の3つを書きます。

<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/moo.fx.pack.js"></script>

次に、アコーディオン表示の肝になる下記のJavaScriptをすぐに修正できるように、htmlファイルの<head>〜</head>の間(上のスクリプトの次で良いです)に下のソースを書きます。
(外部リンクでもOK)

<script type="text/javascript">
/*【名前の説明】
 * ClassName('box') : 文章内容部分のCSSを指定します
 * ClassName('tab') : タブメニューのCSSを指定します
 * duration : エフェクトの表示間隔を指定します
 * ul : タブメニューのhtmlタグを指定します (ダウンロード初期設定はh3)
 * stretchers[0] : 最初に表示するbox番号を指定します [0~n]
 */
function init(){
       var stretchers = document.getElementsByClassName('box');
       var toggles = document.getElementsByClassName('tab');
       var myAccordion = new fx.Accordion(
                toggles, stretchers, {opacity: false, height: true, duration: 600}
       );
      //hash functions
        var found = false;
        toggles.each(function(ul, i){
                  var div = Element.find(ul, 'nextSibling');
                          if (window.location.href.indexOf(ul.title) > 0) {
                              myAccordion.showThisHideOpen(div);
                              found = true;
                           }
                  });
                  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

3.CSS記述の追加

CSSを新規作成して、上のJavaScriptのClassNameに該当するCSSと、装飾用のCSSを書きます。
こちらに今回使ったCSSサンプルをがあります。(コピペして使って下さい)

 

4.htmlコーディング

<body>〜</body>の間に下のソースをコピーします。

<div id="wrapper">
 <!-- 横ナビここから -->
  <div id="hnav">
   <div class="tab"><ul class="tabtxt" title="タブボタン1"><a href="#">タブボタン1</a></ul></div>
   <div class="tab"><ul class="tabtxt" title="タブボタン2"><a href="#">タブボタン2</a></ul></div>
   <div class="tab"><ul class="tabtxt" title="タブボタン3"><a href="#">タブボタン3</a></ul></div>
   <div class="tab"><ul class="tabtxt" title="タブボタン4"><a href="#">タブボタン4</a></ul></div>
  <div class="clear"></div>
 </div>
<!-- 横ナビここまで -->
<!-- コンテンツ切替ここから -->
<div id="content">
 <div class="boxholder">
  <div class="box">
     <h3>見出し|タブボタン(1)</h3>
     <p>文章が入ります。</p>
  </div>
 <div class="box">
     <h3>見出し|タブボタン(2)</h3>
     <p>文章が入ります。</p>
 </div>
  <div class="box">
     <h3>見出し|タブボタン(3)</h3>
     <p>文章が入ります。</p>
  </div>
  <div class="box">
     <h3>見出し|タブボタン(4)</h3>
     <p>文章が入ります。</p>
  </div>
 <!-- コンテンツ切替ここまで -->
</div>

</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>

【ポイント】

(1)JavaScriptの色のついたidと、htmlのclassのidを必ず同じにすること。

(2)</body>のすぐ上に、

<script type="text/javascript">
  Element.cleanWhitespace('content');
  init();
</script>

を書き、青色の "content"(この場合は文章の内容部分)を同じにすること。
※これを忘れると全く動きません。

以上で、Javascript - タブメニューのアコーディオン表示(シンプル版)は完了です。
 

基本さえ押さえれば難しくないし、サイトを簡単にリッチコンテンツに変えてくれます。

是非お試しあれ。

関連記事はこちら

UP↑

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavaScript|moo.fx - タブメニューでアコーディオン表示の作り方チュートリアル

このブログ記事に対するトラックバックURL: http://weska.xsrv.jp/mtos/mt-tb.cgi/142

コメントする

アーカイブ

2011年10月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

プロフィール

ダイナマイト・ドラマー

名前:ダイナマイト・ドラマー
職業:Webデザイナー
好物:牛のたたきとビール