« auサイトのようなアコーディオンメニュー | トップページ | ロールオーバーでフォーカスする表現 »

2007.12.29

JavaScriptでアコーディオンメニュー

画像を利用したスライドメニュー|imageMenu.js

またまた1月号のWeb creatorsからの使えそうなテクニックを…。
前回はFlashでauのオフィシャルサイトのようなアコーディオンメニューを作ってみましたが、今回はJavaScriptを使って同じようなモノを作ってみます。
サンプルはPhatfusionというサイトで確認するコトができます。肝心のJavaScript、imageMenu.jsのダウンロードページはないので、ブラウザにソースを表示してコピー&ペーストして下さい。
また、mootools.jsも必要なのでサイトからダウンロードします。その時、Core、Class、Class.Extras、Array、String、Function、Number、Element、Element.Event、Element.Filters、Element.Slectors、Fx.Base、Fx.Css、Fx.Elements、Fx.transitions<をチェックして下さい。

サンプルはこんな感じです。

↑このFlashデータはこちらからダウンロードできます。

ソースを見てもらえば分かると思いますが、下記のscriptを記述します。
<script type="text/javascript">
var myMenu = new ImageMenu($$('#imgMenu li'),{openWidth:240});
</script>
(※openWidth:240の数値は実際の画像に合わせて下さい)

また、CSSも調整が必要ですので、よく分からない方は本を購入した方がよろしいかと思います。

|

« auサイトのようなアコーディオンメニュー | トップページ | ロールオーバーでフォーカスする表現 »

コメント

初めまして。
画像を利用したスライドメニューを自社サイトで実現したく、いろいろ探し回っているうちにここにたどり着きました。

サンプルとしてDLさせて頂いたファイルは非常にわかりやすく、何とか上手く設置する事が出来ました。本当にありがとうございます。

一つだけお伺いしたい事があるのですが、サンプルのファイルでは、最初の状態は画像が均一の大きさで開かれており、クリックすると画像が固定されるようになっていますが、これを最初から任意の画像を固定して置く事は出来るのでしょうか?もし可能でしたらご教授頂けないでしょうか?よろしくお願いします。

投稿: so | 2008.04.23 17:25

soさん、コメントありがとうございます。

お尋ねの件ですが、サンプルhtmlの28行目付近に

{openWidth:240}

という記述があると思いますが、下記のように追加することでスタート時に開いている画像を指定できます。

{openWidth:240,start:0}

※画像の番号は0から数えるので、
1枚目を開いておきたいのであれば、start:0
2枚目を開いておきたいのであれば、start:1
…といった具合です。

お試し下さい。


投稿: exyz | 2008.04.23 23:41

ご返答頂きありがとうございます!
おかげさまでイメージ通りのアクションを作る事が出来ました。本当に助かります、ありがとうございました。

投稿: so | 2008.04.24 11:35

soさん、コメントありがとうございます。

お役に立てたようで良かったです!
またいろいろと使えそうなモノを紹介していきますので、よろしくお願いします。

投稿: exyz | 2008.04.24 11:57

いつもお世話になります。
<JavaScriptでアコーディオンメニュー>を利用する予定です。自社のサイトのメニューの数が7個であり、メニュー(写真)を増やして利用したいですが、うまく出来ません。どうすれば、メニューの数を増やせますか?アドバイスお願い致します。

投稿: round | 2008.07.30 22:56

roundさん、コメントありがとうございます。

htmlをソースコードで編集できますか?
できないのであれば、少々難しいです。

ソースコードの21行目からの
リスト要素を参考にして増やしていけばできるハズです。
やってみて下さい。

投稿: exyz | 2008.07.30 23:29

横向きになっていますがこれを縦向きにして縦にスライドさせる事って可能でしょうか?

投稿: あゆっち | 2008.11.27 04:22

あゆっちさん、コメントありがとうございます。

このサンプルで使っているJavascriptでは、できないと思いますが、縦型のアコーディオンはいろいろとあります。

例えば)
http://jquery.bassistance.de/accordion/demo/
…他にもいろいろとあります。
「javascript アコーディオン」のキーワードで検索するといろいろと出てくると思います。

このブログでも下記のサンプルを紹介していますので、参考にしてみてください。
http://exyz.cocolog-nifty.com/good_sleep/2007/05/post_bb23.html

投稿: exyz | 2008.11.27 10:24

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17513062

この記事へのトラックバック一覧です: JavaScriptでアコーディオンメニュー:

« auサイトのようなアコーディオンメニュー | トップページ | ロールオーバーでフォーカスする表現 »