階層化されたメニューの作り方

いつも助けていただきありがとうございます。

あまりに抽象的過ぎるのですが、こんな感じのメニューを作りたいのですが、どのような記述になるのでしょうか？？


(1)まず、横５行、縦５列の表があるとします。
横をA～E、縦を１～５として、最初にA1の部分に「START」のような文字があり、マウスが乗っかっていないときには透明度２０％ぐらいで存在します。

(2)ここにマウスを乗せると（on mouse）透明度が０％になり、１列目にB～Eまでメニューが現れます。

(3)この現れたメニューは透明度５０％ぐらいで、マウスを乗せると（たとえばB1のメニューに乗せると）これも透明度が０％になり、B2～B5までコンテンツメニューが開き、これらも透明化されています。

(4)この透明化されたものにマウスを乗せると、それぞれマウスを乗せたものが乗せたときに透明度０％に戻り、クリックをすることでそれぞれのリンク先に飛ぶことができます。


ただの縦方向への展開・階層化されたメニューの作り方はなんとなくわかるのですが（某HPで使ってる方がいたのでサンプルを頂きました）、今回のように、一度横に展開し、それぞれがまた縦方向に展開、リンクが出現するというメニューの作り方がまったくわかりませんでした。

ちなみに、参考にしたサイトはこちらです。
http://www.calm-web.com/lecture/script/h_script/ …

ここでは、いわゆるツリー型っていうものだと思うのですが、私の望む形にするにはどのようにすればよいでしょうか？？
どうぞ、ご教授のほどよろしくお願いします。

No.1 ベストアンサー 回答者： crosis 回答日時： 2005/05/04 02:47

ああ、このサイトのは、、、よく出来てるな～って関心した覚えがあります。

で、sorachさんのやりたいことですが、、、面倒です。やる気萎えます。

特に、このサイトのを見てるとなると、細かいとこは自分で考えて書いていくより他ないと思います。

とくにあのサンプルは時間差のほか、レイヤを使ってますからね、、、挙げく、この質問者さんは欲が深い。

JavaScriptの書き方分かりますか？縦への展開が出来るなら、横も原理は同じですが、、、

ここでドカドカと今書いたソースを載せてもいいんですが、、、ソース載せられて、勝手にコピペしていくのは構わないんですよ。ただ、あとあとソレの改良法が分からなくて、またもバカな質問する人がいるんで、、、根本を分かってない人に教えるのはどうかといつも思うんです。

方法論だけ述べると、一番面倒なのが、リンク先とかテキストを設定したオブジェクトを配列にして創り上げて、その配列を読み取って、動的にレイヤを設定していけば、後々の管理は楽なんですが、スクリプト書くのがやおら面倒です。
後のことなんかどうでもいいなら、レイヤなりstyle="absolute"に設定したdivとかspanを作っておいて、並べてやればいいと思いますよ。今書いたソースも後者を使ってやってます。

やっぱ、一気に色んなことをやらないで、まずはメニューの出し入れ（？）、展開ですね。ソレを自分で自由に操れるようになってから、alpha値の設定とかをやるようにしていった方がいいのでは？

他人のソースを移植するだけなら簡単で便利ですが、一生、自分ではソースなんか書けませんよ。

・・・あまりに酷い回答だと自分も自覚してはいるんですが、、、なんせココの分類は、
教えて！goo > コンピューター [技術者向け] > プログラミング > JavaScript
ですからねぇ、、、プログラミングなんて自分でやらなきゃしょうがないんですよ。
そのためのサンプルは簡単なものから見ていって、少しずつ理解していけばいいんですし。。。

で、仕方がないのでその簡単なサンプルだけでも、、、

//StartObjは、一番最初のSTARTって文字の部分
//window.Startobj = new Object(getElementById('C1'));
//てな感じに他で代入
//横のA～EのidをC1～C5

//横の最上位に載ったとき
function m_overCol(Sender){
StartObj.style.filter = '';

var obj = new Object();
for (var i = 2; i <= 5; i++){
obj = document.getElementById('C' + String(i));
obj.style.display = 'inline';
obj.style.filter = 'Alpha(opacity=50 ,finishopacity=50,style=0)';
}
}

//横軸最上位から外れたとき
function m_outCol(Sender){
StartObj.style.filter = 'Alpha(opacity=80 ,finishopacity=80,style=0)';

for (var i = 2; i <= 5; i++){
document.getElementById('C' + String(i)).style.display = 'none';
}
}

この２つの関数で、横軸のコントロールをしてます。
つまり、横軸にあたるもののdisplayスタイルをイヂってるだけです。これと同様な関数を縦軸についても考えていけば怪しげな動きですが、どうにかなります。
私は10分そこらで疑惑の動きだと思いつつ、書き上げましたから、、、、
他の部分を載せないと何が何だかさっぱり分からないかな？
まぁ、簡単なことからやって、頑張って上達してください。

最後に、、、私はIE専用のスタイルシートであるfilterはキライです。そりゃ、インターフェイスがよくなるかも知れませんが、、、こんなJavaScriptの書き方聞くような人なんだから、ホムペの１つでも持っていると思います。一般論ですが、全ての環境で同じ表示がされるようなページになるよう努力してくださいね♪
Linuxとかからだと、目茶目茶激しいページがありますから、、、

答えに全然なってなくてスミマセンね～

この回答へのお礼

回答ありがとうございます～
欲が深い・・・確かにそうかもしれません。
どうせ作りこむなら「やったぞ～」という内容までがんばってみたいと思ったことからはじめたものだったのですが、
「こんな感じになる」みたいな設計図的な絵を描いて、それをいざスクリプト記述していこうとしたとたん、自分の技術力のなさに挫折寸前となってました・・・

それなりの知識はついているはずですので、応用として回答いただけたことにとても感謝しております。

これからも知識つけていって、人に教えてあげられる・人にできないようなものを考えていけるようになれればと思います。

ありがとうございます。

お礼日時：2005/05/04 10:29