アコーディオンみたいなデザインにしてみた

アコーディオンみたいなデザインにしてみた

moo.fxっていうjavascriptsライブラリを使って、フッター(サイト最下の黒い部分)をアコーディオンみたいに伸縮するようなデザインにしてみました。

えー、僕のようにオブジェクト志向やらDOMやらprototypeやらを全く理解していなくても簡単に導入出来るように、テンプレートを配布しているサイトがあったので、そこを参考にしました。moo.fxのチュートリアルや他にタブやカラム風のデザインもあります。
NYOKIGLITTER - Horizontal Accordion

上記のサイトからzipファイルをダウンロードすると、htmlとscriptsと画像が入っています。moo.fx.js、moo.fx.pack.js、prototype.jsと三つのスクリプトを使っています。cssで装飾出来るので結構簡単にイメージ通りになりました。アコーディオン効果を出せるライブラリに Ricoってのもあるみたいですが、こっちはどうもcssが使えないっぽい。

ダウンロードしたhtmlはjavascriptsの部分をいじらなければ、class=“display”がtoggleボタンになっていて、class=“stretcher”が展開される内容です。そのままでは、toggleボタンの画像が一種類しか使用できないので、こんな感じで空divを使ってcssで画像を指定してみました。

  あわわあわわ