- ベストアンサー
onclickを利用した伸縮メニューの作成方法
- onclickを利用した伸縮メニューの作成方法を教えてください。
- 要約文1：伸縮メニューの作成方法を詳しく教えてください。
- 要約文2：画像imgをクリックするとサブメニューが表示されるが、他のメニューをクリックしてもサブメニューが閉じないようにしたい。
- jeday8118
- お礼率74% (56/75)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>sample</title> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css"> <!-- #accordion{ width:400px; font-size : 15px; border:5px solid #eee; padding:5px; width:400px; } .Tab{ text-align:left; width:390px; border:1px solid gray; margin-bottom : 5px; cursor:pointer; background:#00b51e; } .Tab_child{ color : black; /*display:none;*/ overflow:hidden; line-height :1.2; text-align:left; width:380px; margin-bottom : 2px; padding-left : 10px; background-color : #f6f6f6; font-weight : normal; cursor : default; } .titlemoji{ color:#FFFFFF; font-weight:bold; height : 18px; text-indent : 10px; } --> </style> <script type="text/javascript"> <!-- var i = 1; var v, TabH; var toggle = { Tab01: "opn", Tab02: "opn", Tab03: "opn" }; function Myshow(TabID, Hi) { TabH = Hi; if (toggle[TabID] == "cls") { sameTab(TabID); toggle[TabID] = "opn"; } else if (toggle[TabID] == "opn") { var elemt = document.getElementById(TabID); var par = elemt.parentNode; par.style.backgroundColor = '#00CCFF'; opnTab(TabID); toggle[TabID] = "cls"; } } function sameTab(TabID) { var elemt = document.getElementById(TabID); var par = elemt.parentNode; par.style.backgroundColor = '#00b51e'; clsTab(TabID) } function clsTab(TabID) { i = Math.ceil(i * 1.2); v = TabH - i; if (v > 0) { document.getElementById(TabID).style.height = v + "px"; } else { document.getElementById(TabID).style.height = 0; i = 1; return; } setTimeout("clsTab('" + TabID + "')", 1); } function opnTab(TabID) { if (i < TabH) { i = Math.ceil(i * 1.2); document.getElementById(TabID).style.height = i + "px"; } else { document.getElementById(TabID).style.height = TabH + "px"; i = 1; return; } setTimeout("opnTab('" + TabID + "')", 1); } document.write( '<style type="text/css">' //+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除 + '.Tab_child { height: 0; }' + '<\/style>' ); // --> </script> </head> <body> <div id = "accordion"> <div class="Tab" onclick ="Myshow('Tab01','100')"><span class="titlemoji">画像 img</span> <div class="Tab_child" id="Tab01"> ドラッグして移動<br> フェードイン<br> ズームアップ<br> 補足説明文<br> ロールオーバー<br> </div></div> <div class="Tab" onclick ="Myshow('Tab02','145')"><span class="titlemoji">ブログ カスタマイズ</span> <div class="Tab_child" id="Tab02"> ファビコンの設置<br> ブラウザのアドレスバー、ブックマーク(お気に入り)リストやタブブラウザのタブに表示される小さなアイコンです。<br> 背景画像の固定<br> background-attachment :fixed;を使ってこのブログの背景を固定してみました。 </div></div> <div class="Tab" onclick ="Myshow('Tab03','200')"><span class="titlemoji">スタイルシート</span> <div class="Tab_child" id="Tab03"> スタイルシートだけでポップアップメニューを表示<br> 画像や文字列にマウスを載せると補足説明文を表示します<br> 疑似クラス a:hover <br> アンカーテキストにマウスが来たときにアンカーのスタイルを変更するという動作を、JavaScriptを利用しなくてもスタイルシートだけで実行します。<br> display プロパティ<br> display プロパティは表示の仕方を指定するプロパティです。このサンプルでも使っています。 </div></div> </div> </body> </html> こんな感じでしょうか。 「改良すべきソース箇所」とありますが、そのあたりは元と比較していただくとして。 もっと美しく書くことができると思いますから、あとは自身で工夫して下さい。
その他の回答 (2)
- my--
- ベストアンサー率89% (91/102)
>質問者 document.write( '<style type="text/css">' //+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除 + '.Tab_child { height: 0; }' + '<\/style>' ); ------------------------------ No.1ではスクリプト（writeメソッド）でCSS「height: 0」を設定しています。 displayプロパティ（block|none）の操作はしていません。 .Tab_child{ /*display:none;*/ ------------------------------ 「display: none」は書かないように。 >要件(2) //+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除 ------------------------------ ここに書いてある通りなんですが 「//」はそれ以降の行をコメントとして扱います。 先頭の「//」を削除しHTMLの「onclick ="Myshow('Tab01','100')" 」 onclick属性を削除してみて下さい。
お礼
すいませんした。 用件（2）の意味が今わかりました。 頂いた意見を基に自分なりにアレンジしてみます。 未熟な私にご指導いただき感謝いたします。 ありがとうございました。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
スタイルシートがゴチャゴチャしすぎてチェックする気がおこらない… border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-top-color : #cccccc;border-right-color : #cccccc;border-bottom-color : #cccccc;border-left-color : #cccccc;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px; 上のような書き方では訳がわかりません。なぜバラバラに同じ設定を？ まとめられるものはまとめてしまいましょう。 border : solid #ccc 1px; また、position 属性を使用していないのに right 属性や bottom 属性を指定するなど、意味不明な箇所も見受けられます。 もう一度最初から CSS を書き直してみる事をオススメします。
お礼
すいませんでした。 まだまだCSSについて初心者で理解していないのでせっかく見ていただいたのに・・・ 今後更に勉強ます。
お礼
わかりました!!!!! my--さん本当にありがとうございました。 私がCSSをわかっていないのが大きな原因でした。 教えていただいたソースをいろしろ分解してみたら、質問した(1)は思ったように動きそうです。 厚かましいお願いなのですが、1番目のメニューは伸縮メニューを開いたまま2番目と3番目のメニューだけを伸縮させることは難しいのでしょうか？頂いたソースをいろいろかまってみるのですが上手くいきません。ぜひご伝授ください。 お手数ですがよろしくお願いします
補足
myさんありがとうございました。ソースをコピーしてHPを作成たら思ったように動きました。思ったようなな動きをして感動しました。本当に・本当にありがとうございました。 教えて頂いたのに申し訳ないのですが、自分が作成したCSSに変更したら伸縮メニューが動きませんでした。どこが悪いのか全然わかりません。また質問(2)の1番目のメニューは伸縮メニューを開いたまま2番目と3番目のメニューだけを伸縮させることはできないでしょうか？ お手数ですがよろしくお願いします。 自分で変更したCSSです。サンプルのCSSを下記のCSSに変更するとメニューは伸縮しませんでした。どこが悪いのか全然わかりません。 #accordion{ width : 226px; padding : 2px; background-color : #eeeeee; } .Tab{ text-align:left; width : 225px; border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-top-color : #cccccc;border-right-color : #cccccc;border-bottom-color : #cccccc;border-left-color : #cccccc;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px; margin-bottom : 5px; cursor:pointer; background : #ffffff; padding-top : 5px; padding-bottom : 5px; bottom : auto; right : auto; } .Tab_child{ color : black; display:none; overflow:hidden; line-height :1.2; text-align:left; margin-bottom : 2px; padding-left : 10px; background-color : #f6f6f6; font-weight : normal; cursor : default; padding-right : 5px; font-size : 0.8em; letter-spacing : 3px; padding-top : 10px; } .titlemoji{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Verdana, Arial, sans-serif, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color : #0080c0; font-weight:bold; padding-left : 10px; font-size : 0.9em; letter-spacing : 3px; text-align : left; padding-top : 7px; padding-bottom : 7px; }