« ポップアップ表示するツールチップ | トップページ | クリックでスライド表示するコンテンツ »

2007.12.02

JavaScriptで階層型プルダウンメニュー

Ajaxで作る階層型メニューバー|SpryMenuBar.js

以前、「JavaScriptでプルダウンメニュー(DropDownMenu.js)」という記事をこのブログで紹介しました。するとこの前、階層を増やしたサンプルはできませんか?という問い合わせがあり、試しに作ってみたしだいです。

以前プルダウンメニューを作る際、実は右の本に出ていたSpryMenuBar.jsを使って作ろうと思っていました。ただ、CSSの設定が結構複雑でちょっと触るとレイアウトが崩れてしまうし、ウチの環境では、IE6で2階層目のメニューがズレて表示されてしまうので、別の方法で作りました。それが前回のDropDownMenu.jsを使った方法です。
しかし、DropDownMenu.jsで3階層目を作ろうとした所、結構大変だという事が分かり、もう一度、SpryMenuBar.jsに挑戦せざるを得なくなりました。
SpryMenuBar.jsは、Adobeが提供しているフレームワーク(Ajaxライブラリ)、Spryを利用します。今回はサイトから一式ダウンロードしなおして使ってますが、ダウンロードするには、AdobeのIDとパスワードが必要です。
また、Dreamweaver CS3には、標準で組み込まれているようなので、もっと簡単に設置できるのではないでしょう?(…いいなぁ)

サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

実際、CSSの知識のない方は結構手強いと思います。お金に余裕があれば、Dreamweaver CS3を手に入れた方が手軽かも? まあ、CSSにコメントを細かく打ってますので、試行錯誤してみてください。

|

« ポップアップ表示するツールチップ | トップページ | クリックでスライド表示するコンテンツ »

コメント

おひさしぶりです。

とてもひさしぶりになってしまったのですが、

こちらの記事を拝見して、とても嬉しくなりました。

ありがとうございます!

こちらに参りますと、とってもやる気が出て、

励まされます…

投稿: 薬袋杏梨 | 2008.03.06 10:28

薬袋さん、コメントありがとうございます!
時間のある時にちょっと作ってみました。もう少し前に作っておけば良かったんですけど…。
作られたサイトの評判はどうですか?
Webはこまめに更新しないといけないので、なかなか大変だと思いますが、頑張って下さい!

投稿: exyz | 2008.03.06 16:30

exyzさま

はじめまして aerialと申します。
プルダウンメニューを探しておりましたところ
こちらのブログにたどり着きました。

当方、jsは、書籍やWEBで公開されているサンプルをカスタマイズするのがやっとな人間ですので、
こちらのサンプル公開は、本当にありがたい+勉強になりましたm(_ _)m

恥ずかしながら、Spryという単語自体も初耳でした。
今は、いろんなサイトを見てまわり、
なんとなくの輪郭は見えたように思います。

そこで…突然の書き込みで不躾だとは思うのですが
よろしければ、下記の疑問にコメントいただけたらと存じます

jsは、(特に)IEでセキュリティの制限がかかるものだとは思うのですが、このサンプルではどんな感じなのでしょうか。

具体的に申しますと、
私個人のPC(Firefox、IE7)ではスムーズに表示されたのですが、
別のPC(IE6)で展開する機会があり、そちらでは、実行前の警告が出ました。
単に、インターネットオプションでの設定によるものならそう問題はないと思うのですが、
Spryを調べていく中で、IEでの不具合を指摘するテキストも目にしていましたので、
製作者さまにお伺いさせていただいた次第です。

長々と書きましたが、行き着くところは「動作環境」ということになるのでしょうか??
知識があれば、ソースを見ればすぐ分かることなのかもしれないのですが…
どうかよろしくお願いいたします…(汗)

投稿: aerial | 2008.08.04 20:20

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

プログラマーではないので、JavaScriptの専門的な部分は分からないのですが、少なくともウチのIE6環境では不具合は出ません。

ダウンロードしたファイルをIE6で見ても警告が出るでしょうか?
ブログを表示した時に「Press OK to continu loading the content of this page」という警告が出るのであれば、Flash等のアクティブコンテンツに対して出ています。

もしかしたら、IE7を標準で使い、IE6は確認用にスタンドアローン版などを使っていませんか?
警告が出る原因はおそらくソレだと思われます。
いかがでしょうか?

違う警告が出ているのでしたら、申し訳ありません。その警告自体を教えていただかないコトには分かりかねます…。

投稿: exyz | 2008.08.04 21:20

exyzさま

迅速なコメントをありがとうございました
そして説明不足で申し訳ありませんでした。

警告…というかこれは確認にあたるでしょうか。
「ActiveXコントロールやプラグインなどのソフトウェアを実行できるようにしますか?」
というよく聞くものです。もちろんここで[OK]をクリックすると
ページは展開されます。

これ自体は、そのマシンの環境設定のせいであり、
インターネットオプションで解決はできますが
閲覧側の環境によらず、
なんとか制作サイドで(jsやhtmlに何らかの命令文を記述することで)この状態を回避できないか…と思い、
一先ず、動作環境などをお伺いした次第です。

これを書きながら思ったのですが、
すでにexyzさん個人への質問の枠を超えていますね;
失礼いたしました。

>少なくともウチのIE6環境では不具合は出ません。

ということですので、上記の問題はなんとか自分でがんばってみます。
ありがとうございました!

投稿: aerial | 2008.08.04 22:23

exyzさま、初めましてgoldといいます。プリダウンメニューの3階層を作成しようと探していましたら。こちらのページにたどり着きました。以前探した時、こちらで画像(メニュー表示)を利用した2階層のプルダウンメニューを見たのですが、3階層でのプルダウンメニューを作りたいと思っています。宜しければ3階層で画像(メニュー表示)を利用したプルダウンメニューの作り方を教えて頂けないでしょうか。宜しくお願いいたします。(2階層でのプルダウンメニューはテストして動作も良好で、使うのにとても良かったです)。

投稿: gold | 2010.02.06 16:47

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

時間がなく試してはいませんが、このサンプルのテキストの部分を画像に変更してCSSを調整すれば、可能だと思います。

投稿: exyz | 2010.02.07 15:14

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: JavaScriptで階層型プルダウンメニュー:

» JavaScriptでプルダウンメニュー [Good Sleep]
ドロップダウンメニュー|DropDownMenu.js プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript Ajax 実践サンプル集さんのドロッ [続きを読む]

受信: 2007.12.02 17:52

» プルダウンメニューに動きを与えるJavaScript [Good Sleep]
Flashのような滑らかなアニメーション|MenuMatic このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design St [続きを読む]

受信: 2008.12.11 22:04

« ポップアップ表示するツールチップ | トップページ | クリックでスライド表示するコンテンツ »