いつも助けていただきありがとうございます。
あまりに抽象的過ぎるのですが、こんな感じのメニューを作りたいのですが、どのような記述になるのでしょうか??
(1)まず、横5行、縦5列の表があるとします。
横をA~E、縦を1~5として、最初にA1の部分に「START」のような文字があり、マウスが乗っかっていないときには透明度20%ぐらいで存在します。
(2)ここにマウスを乗せると(on mouse)透明度が0%になり、1列目にB~Eまでメニューが現れます。
(3)この現れたメニューは透明度50%ぐらいで、マウスを乗せると(たとえばB1のメニューに乗せると)これも透明度が0%になり、B2~B5までコンテンツメニューが開き、これらも透明化されています。
(4)この透明化されたものにマウスを乗せると、それぞれマウスを乗せたものが乗せたときに透明度0%に戻り、クリックをすることでそれぞれのリンク先に飛ぶことができます。
ただの縦方向への展開・階層化されたメニューの作り方はなんとなくわかるのですが(某HPで使ってる方がいたのでサンプルを頂きました)、今回のように、一度横に展開し、それぞれがまた縦方向に展開、リンクが出現するというメニューの作り方がまったくわかりませんでした。
ちなみに、参考にしたサイトはこちらです。
http://www.calm-web.com/lecture/script/h_script/ …
ここでは、いわゆるツリー型っていうものだと思うのですが、私の望む形にするにはどのようにすればよいでしょうか??
どうぞ、ご教授のほどよろしくお願いします。
No.1ベストアンサー
- 回答日時:
ああ、このサイトのは、、、よく出来てるな~って関心した覚えがあります。
で、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';
}
}
この2つの関数で、横軸のコントロールをしてます。
つまり、横軸にあたるもののdisplayスタイルをイヂってるだけです。これと同様な関数を縦軸についても考えていけば怪しげな動きですが、どうにかなります。
私は10分そこらで疑惑の動きだと思いつつ、書き上げましたから、、、、
他の部分を載せないと何が何だかさっぱり分からないかな?
まぁ、簡単なことからやって、頑張って上達してください。
最後に、、、私はIE専用のスタイルシートであるfilterはキライです。そりゃ、インターフェイスがよくなるかも知れませんが、、、こんなJavaScriptの書き方聞くような人なんだから、ホムペの1つでも持っていると思います。一般論ですが、全ての環境で同じ表示がされるようなページになるよう努力してくださいね♪
Linuxとかからだと、目茶目茶激しいページがありますから、、、
答えに全然なってなくてスミマセンね~
回答ありがとうございます~
欲が深い・・・確かにそうかもしれません。
どうせ作りこむなら「やったぞ~」という内容までがんばってみたいと思ったことからはじめたものだったのですが、
「こんな感じになる」みたいな設計図的な絵を描いて、それをいざスクリプト記述していこうとしたとたん、自分の技術力のなさに挫折寸前となってました・・・
それなりの知識はついているはずですので、応用として回答いただけたことにとても感謝しております。
これからも知識つけていって、人に教えてあげられる・人にできないようなものを考えていけるようになれればと思います。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- その他(料理・グルメ) わらび餅 透明にしておく方法 形よくする方法を教えてください。 4 2023/05/19 10:13
- DIY・エクステリア この大きなカードケースを壁に引っかけたい。 7 2022/11/30 13:09
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- 電子レンジ・オーブン・トースター 電子レンジの非科学的(カルト的)動作の原因について考えられる理由を知りたい 8 2022/11/29 14:47
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- 車検・修理・メンテナンス 1、ヘッドライトの黄ばみを無くし透明にする 2、夜間ヘッドライトを付けるとがライトが真っ黄色なため今 5 2023/04/26 16:45
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- DIY・エクステリア アクリル板に枠を付けたい 5 2023/02/09 22:25
- その他(悩み相談・人生相談) こんにちは。 就職活動中のピアスについて質問です。 開けない、付けないことが1番だと分かってはいます 3 2022/04/11 11:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページビルダーを使って...
-
「光の三原色」みたいな「三つ...
-
【JavaScrip】メニューボタンに...
-
画像のポップアップ
-
階層化されたメニューの作り方
-
JSPの処理の途中で、JavaScript...
-
Vba SelStart、SelLen教えてく...
-
ASP(VBS) ←→ JavaScript の変数...
-
VB.NET2003 テキストボックスに...
-
javascriptで「オブジェクトを...
-
「終了していない文字列型の定...
-
VBScript から JavaScript を呼...
-
setTimeoutあるいはsetInterval...
-
クリックすると下に説明文が出...
-
VBAによる第3、4水準文字の判定...
-
confirm()をはい/いいえ に切...
-
HTML上(javascript)からCGIを...
-
タブブラウザで focus() を実...
-
PHP処理実行後のページの遷移に...
-
resizeToメソッドが動作しません
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Windows Form のMSChartで、グ...
-
amazonの商品画像拡大のようなj...
-
リンク先をマウスが移動すると...
-
「光の三原色」みたいな「三つ...
-
画像の上にマウスをもってくる...
-
JavaScriptでwebAPIを呼び出す方法
-
ポップアップヘルプをフレーム...
-
画像のポップアップ
-
ページ全体の拡大/縮小が行え...
-
d3.jsを使っての折れ線グラフと...
-
静止写真を『じわっと』でる感じに
-
if(1){...}とはどういうことで...
-
JavaScriptで ブラウザの閉じる...
-
Vba SelStart、SelLen教えてく...
-
ブラウザ自体の事じゃなくてJav...
-
VB.NET2003 テキストボックスに...
-
JSPの処理の途中で、JavaScript...
-
gas 全角数字を半角数字に変換
-
デザイン時のVisible=Falseは実...
-
「終了していない文字列型の定...
おすすめ情報