Page 902 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ INDEX ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼サイドメニューの横にプルダウン?の仕方について CSS初心者 05/1/12(水) 14:52 ┗Re:サイドメニューの横にプルダウン?の仕方について you 05/1/12(水) 20:50 ┗やはりサイドメニューがずれてしまいます。。。 CSS初心者 05/1/12(水) 22:31 ┗Re:やはりサイドメニューがずれてしまいます。。。 you 05/1/13(木) 22:00 ┗Re:やはりサイドメニューがずれてしまいます。。。 CSS初心者 05/1/14(金) 11:15 ┗Re:やはりサイドメニューがずれてしまいます。。。 you 05/1/14(金) 22:43 ┗Re:やはりサイドメニューがずれてしまいます。。。 105 05/1/15(土) 9:57 ┗Re:やはりサイドメニューがずれてしまいます。。。 CSS初心者 05/1/16(日) 0:19 ─────────────────────────────────────── ■題名 : サイドメニューの横にプルダウン?の仕方について ■名前 : CSS初心者 ■日付 : 05/1/12(水) 14:52 -------------------------------------------------------------------------
お世話になっています。 ホームページ作成初心者なのですが、 プルダウンと言うかわからないのですが、 サイドメニュー(仮に「日本」)にマウスを持ってくると、隠れていたその下層ページ(仮に「東京都」や「大阪府」)が「日本」の真横にでるようにしたいのですが、 どうやったらよいでしょうか? サイドメニューとメインはテーブルで作っていてそのテーブルは中央にあります。 positionとjavascriptを使ってやる方法を本で見ているのですが、 私の希望する横にプルダウン?ではなく、 positionの知識もなく、 テーブルを使っているので、positionなどだと崩れそう(イメージです) という感じで応用もきかず行き詰まってしまいました。 テーブルを中央に使ったレイアウトで、横にプルダウン?し、画面くずれが少なそうな仕方がありましたら 教えて頂けたらと思います。 抽象的ですみません。 ソースが必要であれば教えてください。(テストページで試行錯誤中でしてネット上にはないので。。) すみませんがどうぞ宜しくお願いいたします。 |
おなじものかどうか、ちょっと判断しにくいのですが・・・。 以前私が質問したものがあります。 『プルダウンを作成したら、ネスケでレイアウト崩れました・・・』 http://www.shoshinsha.com/cgi-bin/bbs_new/data/situmon/data/tree_449.htm#1928 『ポップアップメニューについて』 http://www.shoshinsha.com/cgi-bin/bbs_new/data/situmon/data/tree_499.htm#2141 私がテストとして用意したものは既に削除してありますが、105さんの挙げてくれたテストはまだ生きていますので、参考になればと思います。 違うものでしたらごめんなさい。 |
youさんどうもありがとうございます。 そうです、105さんのようなこんな感じです。 ポップアップメニューと言うのですね。 見てみるとやり方がたくさんありそうなのですね。。 私はちょっと違うやり方みたいなのですが、 ご紹介頂いたソースを参考にやってみたのですが、 私の場合、テーブルが真ん中に来ているのでメインメニューとサブメニューが離れた所になってしまいます。。。 自分の画面でサブメニューの場所を固定しても見るプラウザによっては、ずれてしまうのではないかと思うのです。。 もしかしたら、やっぱり、positionとかの関係?で、<td align="center">というのは、固定できなくて、 ご紹介頂いたやりかたでも、私のやり方でも、うまくいかないのでしょうか。。。?? (ちなみに、テーブル幅は、左から155px、15px、555pxの155pxの所にポップアップメニューを並べようと思っています) すみません、もしかしたら全然見当ハズレかもしれないですが、 どうぞ宜しくお願いします。 |
> テーブルが真ん中に来ているのでメインメニューとサブメニューが離れた所になってしまいます。。。 これは多分、レイヤーで位置指定をしているからだと思います。 紹介したソースは、左端にぴたりとくっつけたメニューに対して「左30、上15」の位置に「幅150ピクセル」のレイヤー1を表示する、というやり方です。 なので、紹介したソースをそのまま使用すると、ズレます。 メインメニューの位置が決まっているのであれば、それに対応した位置を指定してあげると大丈夫かと思います。 んー・・・。 今実際作ったページ(見本)を公開できないのであれば、ソースをこちらに載せてみるのいうのはどうでしょうか?? もっと的確なアドバイスなんかがもらえるかもしれませんよ。 |
youさん重ね重ねどうもありがとうございます。 やはり自分には敷居が高すぎた事のようで、半ば諦めていますが、 ソースを一応載せさせて頂きます。 本を見ながらド素人がやっているので、ソースはとてもグチャグチャでお恥ずかしいのですが、 下記のソースです。(テスト画面として簡単に作りながらやっているのですが)マウスを「日本」などに持ってくると、横に「東京都」などが現れるはずなのですが、でてきません。。。(しかも(「日本」と「米国」の背景の色もなぜか違います。。。) 本当にメチャクチャですみませんが直しようがあればどなたか教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- .menu {margin-left:0; margin-right:0; margin-bottom:50px; margin-top:10px; height:2em; position:relative; top:0; left:0; background-color:pink;} .menu a {color:blue; backgroud-color:yellow; border:solid 1px green; text-decoration:none; display:block; width:155px; line-height:2em;} .menu a:hover {background-color:skyblue;} #menu1 {position:absolute; left:0; top:0;} #menu2 {position:absolute; left:0; top:2em;} .submenu { visibility:hidden; position:absolute; top:0; left:155px;} .submenu a {background-color:orange; border-top:solid 1px fuchsia; width:200px;} #submenu1 {position:absolute; left:155px; top:0;} #submenu2 {position:absolute; left:155px; top:2em;} --> </STYLE> <script type="text/javascript"> <!-- function MenuOn(x){ obj=document.getElementByld("submenu"+x) .style.visiblity="visible"; } function MenuOff(x){ obj=document.getElementByld("submenu"+x) .style.visibility="hidden"; //--> </script> </HEAD> <BODY> <DIV align="center"> <TABLE border="1"> <TBODY> <TR> <TD width="155px"> <DIV class="menu"> <div id="menu1" onMouseOver="MenuOn(1)" on MouseOut="MenuOff(1)"> <A href="省略" class="menuhead">日本</A> <DIV class="submenu" id="submenu1"> <A href="省略">東京都</A> <A href="省略">大阪府</A> </DIV> </div> <div id="menu2" onMouseOver="MenuOn(2)" on MouseOut="MenuOff(2)"> <A href="省略" class="menuhead">米国</A> <DIV class="submenu" id="submenu2"> <A href="省略">ニューヨーク</A> <A href="省略">カリフォルニア</A> </DIV> </div> </DIV> </TD> <TD width="15px"></TD> <TD width="565px">メイン (マウスを「日本」などに持ってくると、横に「東京都」などが現れるはずなのですが、でてきません。。。(しかも(「日本」と「米国」の背景の色もなぜか違います。。。) </TD> </TR> </TBODY> </TABLE> </div> </BODY> </HTML> |
まずは、あせらずにHTMLの部分から・・・ ・<div>タグの部分の整理をしてみてください。 ※<a>タグと<a>タグの間のスペースは、CSSの設定でpaddingやmarginなどを 利用するとわざわざスペースを入れなくても、間が空いた状態で表示され ます。 それで、問題は「サブメニュー」にあたる部分の表示・非表示をどう設定してあげるか、という事になるかと思いますが、それは、105さんのソースを参考にしていただければいいかと思います。 そして、それをJavaScriptで設定して、onMouseOverなどで表現してあげればいいかと。 ちなみに、あの参考のレイヤーはピクセルで表示位置を絶対指定していますので、そこをいじれば色んな場所に表示されるようになるかと思いますよ。 |
前にだしてたサンプルがあまりにもDreamWeaverなので(なんのこっちゃ)、1から作るならば的なテストサンプルを作りました。 http://www.shoshinsha.com/hp/test/navi2.htm 私自身はプログム方面はあまり得意ではありませんので、このあたりが限界であったりします。リンク先にも書いてありますが、このまま使うには難がありそうですので、あくまで勉強用ということで^^: |
youさん、105さん 本当にどうもありがとうございます。 現在拝見しました。お礼が遅くなってしまって申し訳ありません。 お二人のアドバイスを頂いて、かなり前進した気がします。でもまだ難しいのでさらに勉強したいと思いますが、糸口は掴めそうで、本当に感謝です。 細かいアドバイスどうもありがとうございました。 プラウザによって見え方が違うみたいなので、 課題がありそうですが、もう少し頑張ってやってみようと思います。 どうもありがとうございます。 (また分からなかった教えてくださいませ) |