- ベストアンサー
onclickを利用した伸縮メニューの作成方法
- onclickを利用した伸縮メニューの作成方法を教えてください。
- 要約文1：伸縮メニューの作成方法を詳しく教えてください。
- 要約文2：画像imgをクリックするとサブメニューが表示されるが、他のメニューをクリックしてもサブメニューが閉じないようにしたい。
- jeday8118
- お礼率74% (56/75)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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について初心者で理解していないのでせっかく見ていただいたのに・・・ 今後更に勉強ます。
関連するQ&A
- もう一度onclickを利用した伸縮メニューの作成方法を教えてください
もう一度onclickを利用した伸縮メニューの作成方法を教えてください。 以前"onclickを利用した伸縮メニューの作成方法を教えてください。"と質問に教えていただき思ったように動きとても感謝しているですが、自分の作成しているHPにソースを書き込んでみたら伸縮メニューが開いたまま閉じませんでした。たぶん自分のページに、教えていただいたソース以外に他のサンプルから引用したスクリプトがあるので上手く行かないのではないかと思ったので再度質問させてください。 作成したページのソースが長くなるので全部書き込めないのですが、おおまかには、メインメニューが５つありロールオーバー効果を持たせています。その各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。 作成しているソフトはホームページビルバーV14です。 別なサンプルから引用したスクリプトは、 <SCRIPT language="JavaScript"> <!-- var tid,pm_no=""; function pm_op(sel){ if(pm_no!=""&&pm_no!=document.getElementById(sel)){pm_no.style.overflow='hidden';} pm_no=document.getElementById(sel); clearTimeout(tid); pm_no.style.overflow='visible'; } function pm_cl(sel){ pm_no=document.getElementById(sel); clearTimeout(tid); tid=setTimeout("pm_no.style.overflow='hidden';",500); } //--> </SCRIPT> ソースは、 <DIV id="cont" align="center"> <TABLE width="870" border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD align="center"> <CENTER> <DIV style="width : 850px;position : relative;top : 0px;left : 0px;"> <DIV class="menu" style="left:0;" id="f1" onmouseover="pm_op(this.id);" onmouseout="pm_cl(this.id);"> <CENTER> <DIV style="text-align : center;border-style : none;width : 170px;height : 32px;bottom : auto;"><A href="#" id="HPB_ROLLOVER4" name="HPB_ROLLOVER4" onmouseout="HpbImgSwap('HPB_ROLLOVER4', 'image/n_image1.gif');" onmouseover="HpbImgSwap('HPB_ROLLOVER4', 'image/m_image1.gif');"><IMG src="image/n_image1.gif" width="170" height="32" border="0" name="HPB_ROLLOVER4"></A></DIV> <TABLE style="font-size:12px;"> <TR> . . . </TBODY> </TABLE> でid="f1"から"f5"で5つのメニューが動くようにしています。 先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた"onclick"は開いたままで、動作的には"onclick"のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。 CSSがまだまだ未熟でわかり難いところも多々ありますが、わかればで結構です。 どなたか教えてください。
- ベストアンサー
- JavaScript
- 横に展開する(伸縮ベルト)メニューの作成について。
横に展開する(伸縮ベルト)メニューの作成について。 http://www.geocities.jp/miyake_kobo/dl/temp/jquery_base.html こちらのテンプレートを利用させてもらったんですが、カスタマイズがしにくいのと、著作権表示でデザインがくずれてしまうため、同じようなデザインで、カスタマイズがしやすく、著作権表示がないものを探しています。 検索してあちこち探したのですが、見付けられなくて困り果てた末、質問させていただきました。 ご存知の方いらっしゃいましたら、どうかご協力お願いいたします。 できればサンプル・デモページがあるとありがたいです。 よろしくお願いします
- 締切済み
- JavaScript
- onClickについて教えてください
どなたかお教え願えますでしょうか。 現在ホームページを作成していて ナビゲーションにプルダウン（表現が間違っていたらごめんなさい）で サブメニューを表示させようとしています。 下記ソースで「新しい作品紹介」という文字をロールオーバーすると サブメニューが出るように設定し、「新しい作品紹介A」や「新しい作品紹介B」や「新しい作品紹介C」や「新しい作品紹介D」や「新しい作品紹介E」といったサブメニューは表示するようになりそれぞれのページへのリンク設定ができたのですが、 「新しい作品紹介」という文字をクリックすると「新しい作品紹介」というページに飛べるようにもしたいのです。 <a href="javascript:;" onMouseOver="left_Menu_Pulldown(1)" class="left_menu" id="port_01_a">新しい作品紹介</a> 現在onMouseOverの記述をしていますが、onClickなどを記述することによってリンク設定はできるのでしょうか？ その記述方法や、別の手があるのであればどなたかお力をお貸しいただけますでしょうか。。 説明が下手な上、表現方法が素人なものでご迷惑をおかけしますが よろしくお願いします
- ベストアンサー
- JavaScript
- メニュー作成方法を教えて下さい。
JavaScriptとHTMLを使ってＨＰを作成しています。onmouseoverとonmouseoutを利用して（トップメニューにマウスを置くとサブメニューが出るという）メニューを作りたいんですが、上手くいきません。 トップメニューにマウスを置くとサブメニューーは出ますが、トップメニューにマウスを置いてもいない時に、サブメニューの画像が×となって出ています。この×が表示されないようにするにはどうすればいいのかわかりません。 どうすればいいのでしょうか。 教えて下さいm(__)m function showMenu(selfObj){ document.menu1.src="bana/albumb.jpg"; document.menu2.src="bana/mib.jpg"; document.menu3.src="bana/picb.jpg"; if(selfObj==0){ document.menu0.src="bana/prr.jpg"; } if(selfObj==1){ document.menu1.src="bana/albumr.jpg"; } if(selfObj==2){ document.menu2.src="bana/mir.jpg"; } if(selfObj==3){ document.menu3.src="bana/picr.jpg"; } } function hideMenu(){ document.menu0.src="bana/prb.jpg"; document.menu1.src=""; document.menu2.src=""; document.menu3.src=""; } <a href="4.html" onMouseout="hideMenu();" onMouseover="showMenu(0);" class="navi0"> <img src="bana/prb.jpg" alt="自己紹介" name="menu0" id="menu0" border color=""> </a><br /> <a href="5.html" onMouseout="hideMenu();" onMouseover="showMenu(1);" class="navi1"> <img src="" alt="アルバム" name="menu1" id="menu1" border color=""></a><br /> <a href="6.html" onMouseout="hideMenu();" onmouseover="showMenu(2);" class="navi2"> <img src="" alt="ミッキー" name="menu2" id="menu2" border color=""> </a><br /> <a href="7.html" onmouseout="hideMenu();" onmouseover="showMenu(3);" class="navi3"> <img src="" alt="写真" name="menu3" id="menu3" border color=""> </a>
- ベストアンサー
- HTML
- Firefox 右クリックメニューが・・・・
Firefox 1.07を使っています。 いろいろカスタマイズしていたら、右クリックメニューがとんでもないことになってしまいました。 どこで右クリックしても、すべての右クリックメニューの項目が表示されてしまいます。 たとえば、画像の上で右クリックすると、今まではAdblockや、・・・の画像を表示しない、画像を名前を付けて保存などが出ていましたが、今は関係ない（というかすべての）項目が表示されています。 どうしたらこれを直せるでしょうか。
- 締切済み
- ブラウザ
- このようなメニューはどのようにして作成するのでしょうか・・・
メニューをクリックするとページは飛ばずにメニューの下にサブメニューみたいなものを表示させるにはどうすればよいのでしょうか？ 例：http://www.pc-koubou.jp/ ここの左下にあるラインナップのメニュー 初心者的な質問をお許しください
- ベストアンサー
- CSS
- ホームページビルダーでプルダウンメニュー作成
質問させていただきます。HP作成中です。素材サイトにあるようなプルダウンメニューを作成したいのですがどのような方法で作成するのでしょうか？こちらのサイトです。http://www.s-chimp.com/mc/ メニューをクリックするとサブメニューが表示されます。理想としては違うメニューをクリックしたときに他のサブメニューが表示されたままではなく閉じると嬉しいです。初心者なので難しいことは出来ないと思うのですがどなたかお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- Flashによる「メニュー」作成
ホームページ上での「メニュー」作成で困っています。 現在作成中のメニューの構成は、例えば、 ●メインメニューが、「A・B・C・D」の４段階 ●サブメニューが夫々に、「A-1・A-2・A-3」の３段階 設定されているとします。 (1)⇒「ABCD」「BCD」「CD」を夫々MCにてシンボル化して「BCD」を「ABCD」の「B」に「入れ子」状態にして、 (2)⇒「A」をクリックした場合 「BCD」 が下に下がり「A-1・A-2・A-3」「BCD」の状態で表示されるように設定いたしました。 (3)⇒「A・B・C・D」の動作は各々上記操作の通りで機能致しております。 (4)⇒(2)の状態で、「B」をクリックした時には、「A-1・A-2・A-3」が「A」内に戻り、新たに「B-1・B-2・B-3」が表示されるようにしたいのですが、「A-1」グループが表示されたままで「B-1」グループが表示されるため、全サブメニューを表示させた場合には、メニュー全体が長くなりページから「はみ出て」しまいます。 ●質問は、「A」とサブメニュー（「A-1」グループ）が表示されている場合に、「B」を表示させたら、「A」のサブメニューが閉じて、「B」のサブメニュー（「B-1」グループ）を開くための手段（スクリプト？）です。 できましたら、至急ご回答いただけましたら幸いです。
- ベストアンサー
- Flash
- ブラウザのサイズによって伸縮させる方法
下記のサイトのようにウィンドウの大きさに合わせて伸縮するサイトが作りたいのですが、コードの記述が分かりません。 http://www.cocoro-gift.com/ ブラウザのサイズによって背景画像が伸縮するやり方は載っていたのですが、今回作りたいのは右側にもムービークリップがあり、ウィンドウの大きさを変えてもステージの右端にくっついていくような作りです。 上記サイトのsakeのメニューを開いていくと、左下にボタン、右にお酒の画像が出てくるのですが、ウィンドウの大きさを変えてもそれぞれの位置は固定されたまま、ステージだけが伸縮する形です。 そのようなflashをつくるには、どんなコードにすればいいのでしょう？ 分かる方どうかよろしくお願いいたします。
- 締切済み
- その他([技術者向] コンピューター)
- windows2000のメニューについて
Win2000のスタートメニューをクリックして、プログラムにマウスポインタを合わせると全てのサブメニューが出てきませんよね?サブメニューの一番下の矢印みたいなものをクリックすると隠れているメニューが出てきます。これを最初から全て出るようにできるでしょうか？お分かりの方、よろしくお願い致します。
- ベストアンサー
- Windows NT・2000
お礼
わかりました!!!!! 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; }