Weblog版　四方山話

Spryテスト　Appleサイトのようなメニュー動作

Appleサイトのサイドメニュー部にマウスを重ねると、メニュー内訳が自動表示（縦に拡がる）されます。
この動きはDreamweaverCS3に備わっている「Spry（スプライ）」を使って簡単に設定することができます（Spryテストページにて動作確認ができます）。

初期設定では（アコーディオンパネルという）クリックすることによって内部表示されるようになっているのですが、jsファイルを一箇所修正するだけで動作を変更することができるのです。
どこを修正するのかと言いますと、、、

まず、Spryを実装しますと「SpryAssets」フォルダが生成されます。そのフォルダ内の「SpryAccordion.js」ファイルをエディタで開きます。

#280行目　　if (tab)
#281行目　　{
#282行目　　var self = this;
#283行目
Spry.Widget.Accordion.addEventListener
(tab, "click", function(e) { return self.on
PanelClick(panel); }, false);

283行目にある　"click"　を　"mouseover" に変え上書き保存します。
これだけで！マウスに反応するアコーディオンパネルになります。なんて簡単でしょう。

DreamweaverCS3をお持ちの方はどうぞお試しくださいませ。

　

投稿者 click : 2007年12月02日 01:21