掲示板/総合質問板/過去ログ/一覧/ プルダウンメニューの表示

0 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: http://www.stylish-style.com/csstec/ultimate/css-roll-4.html
上記のサイトのサンプルを参考にプルダウンメニューを作成しているのですが、複数ページに
同じメニューを複数ページに表示しようとして、フレームを使ったところ、
フレームを超えてプルダウンメニューの表示が出来ないようです。
完全に外部CSSか外部JSにして表示させる方法も考えましたが、1つのメニューの特定の部分をクリックするとサブメニューが出てくるタイプのサンプルが見つかりませんでした。
（プルダウンメニューで完全に外部CSSと外部JSで制御する方法があるらしい。)

各ページにHTMLを書きローカルで一斉書き換えをするソフトを使うことも考えましたが、一斉書き換えに失敗する場合もあって、結局確認が必要そうです。

CGIやPHPを使う方法はよく分からず、しかもCGIは使えない、PHPは使えるが、サーバー側で制限されている要素が多いためあまり使いたくありません。

フレームを超えてプルダウンを表示させる方法または、完全に外部CSSか外部JSのサンプルを希望します。

1 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: 追加事項
現在使っているプルダウンメニューは以下のもので
http://www.asahihouse.jp/menew3.js
これをカスタマイズして、サブメニューも表示できるようになれば、GOODなので、
こちらの変更でもOKです。
ちなみに、サンプル配布元のサイトからカスタマイズ許可とサンプルの商用サイトでの利用許可はもらっています。

2 名前：匿名： 2007/05/31（木） 21:41 ID:dxLtSgnT sub-Ds: サンプル配布元のサイトを教えてください。
直接見たほうが早い気がします。

もうすこし質問の仕方を工夫してもらえますか？他者が見て問題が再現できることが最低条件です。それで、ソースなどが必要になります。テキストエディタなら問題ありませんが、補助ソフトなど他に使っているソフトなどもあれば、それと、………（略）

質問の仕方がわからないなら、質問テンプレを使ってください。勝手にはしょったりしないで全部埋めてください。質問の仕方がわからない人の為に作られたものです。「はじめにお読みください」も読まれてますよね？とても大切なことが書いてあります。

3 名前：はな： 2007/05/31（木） 21:41 ID:.D./pv0x sub-bK: 現在使っているサンプルのURL
http://external-file.com/ja/sample/after_external_file.html

したいこと
プルダウン部分のある項目にマウスを置くと新たに横にメニューがでるようにしたい。
エディターは、ドリームウェーバーをHTMLエディター代わりに使っています。

複数ページでの表示を希望するため外部ファイルのほうが便利がよさそうなのでなるべく外部ファイルでお願いします。

使っているサーバーはヤフーウェーブホスティングライトコースです。

あとで、個人のHP(ジオシティーズ)で使いまわしたいので、対応した方法でおねがいします。

といってもこの２つのサーバ使えるファイルの種類とか似てるから普通にJSかCSSと言うことになるのかな？

方法は、複数ページで使いやすければ、CSSでもJSでもかまわないです。

4 名前：匿名： 2007/05/31（木） 21:41 ID:mXWCw.HA sub-Cz: 結局、フレームを使うの？使わないの？

フレームを使うのであれば、フレーム内ドキュメントは、それぞれ全く別の独立したドキュメント。全く別のドキュメントを、あたかも 1 つのように見せるるわけだから、

(1). 非表示→表示にしたノードを node とする。
(2). node の横幅（node.offsetWidth）を取得。
(3). node の左位置を取得。offsetParent が null になるまで offsetLeft を加算すれば良い。
(4). ドキュメントの横幅（window.innerWidth その他）を取得。
(5). (2) + (3) < (4) ならば何もしないで終了。
(6). (2) + (3) > (4) ならば、(4) - (3) を計算する。
(7). node の縦位置を取得。offsetParent が null になるまで offsetTop を加算すれば良い。
(8). node を別フレーム内で document.importNode したものを node2 とする。
(9). node2 を body 要素ノード直下に置き、node2.style.position = 'absolute' にする。
(10). node2.style.top を (7) + px にする。
(11). node2.style.left を -(6)px にする。

フレームサイズが変更された場合は (on)resize イベントで再計算する。node を非表示にした場合は、別フレーム内から node2 を除去すれば良い。

フレームを使わない場合、普通に外部ファイルにすれば良いだけなので、「今、何が問題になっているのか」がよく分からない。まずは、自分でやってみたこと、自分で書いた叩き台のコードを見せてもらえると話が早い。これを必要としているのはこちらではなく、貴方なのだから。

5 名前：匿名： 2007/05/31（木） 21:41 ID:NURmOWKj sub-Ds: はじめにお読みくださいです。
http://www.tagindex.com/bbs/note.html#h202
私は、１番目と２番目に違反していると考えています。１つでも当てはまれば、答えてもらう資格は無いと考えています。
１番目は怪しいだけですが、
http://www.gac.jp/article/index.php?stats=question&id=20532&command=msg
２番目は、そのスレはどうみてもソース作成の依頼です。

で、その工務店のサイトだけど、htmlがわかっていない人が作っているので、参考にしないようにオススメします。はなさんのページなら、まず、初歩以前の考え方から学ぶことをオススメします。お客減りますよ。客はコードやソースなんてどうでもよくて、見た目だけで判断するのですが……

そのうえで、オススメのページを捜してみました。
http://www.google.com/search?hl=ja&lr=&ie=UTF-8&oe=UTF-8&q=%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90+%E5%BD%93%E7%A4%BE

6 名前： Z ◆XTzyosZXcL ： 2007/05/31（木） 21:41 ID:KXOMMoT8 sub-Cl: 　とりあえず、下記スレッドかこちらかどちらかを先に解決してからにしませんか？

http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1166

以下引用：
”結局のところ「どうすれば赤の他人に負担を掛けずに手伝ってもらえるか」ということ。このことは、こちらの要望ではない。貴方が適切な回答を得るために必要なことだ。”

関連しそうな掲示板Q&A：
http://www.tagindex.com/bbs/qa05.html#a02

7 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: まったく別人の質問です。
たまたまＨＮが同じで似たような質問をしただけだと思われます。
ソースは再度作ったものをＵＰしてみます。

8 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: 外部ファイルを使う方向で考えていたのですが、使いたいサンプルが見つからず、
フレームで対応することにしました。
作成途中のファイルです。
http://www.asahihouse.jp/index2.htm
フレームを使う場合の、>>4の方のnodeの意味が分かりません。
もっと分かりやすくお願いします。
現在>>0のサンプルを元にしています。

ちなみに上記のサイトですが、私がHP作成サイトぐらいしか使ったことがない状態で、
前管理人から引き受けたものなので、ソースが汚い部分もあるかも知れません。

もしテーブルの件であれば、歴代の管理人がテーブルメインで使っていて、
自分も初めテーブルでのデザインを勉強したためCSSに直すのが大変かもしれません。

9 名前： SSI ： 2007/05/31（木） 21:41 ID:kh5c0IiG sub-Cl: SSIやフレームならTagIndex内に説明があるので、それを利用すればいいのではないですか。
JavascriptやSSIやフレームを利用することも可能でしょうが、全てのページの一部分に　同じ項目を表示したいのであれば　単にコードをコピーして貼り付けとけばいいかと、思いますよ。
まあ、いろいろな技術の応用という勉強には、ならないでしょうが(よけいなことでしたネ)。

10 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: この頁のように
http://www.tagindex.com/javascript/link/sample_select2.html
プルダウンメニューをフレームを越えて表示させたいんです。
どうすれば、いいのでしょうか？

SSIは何のことかよくわかりませんが、少なくともヤフーのサーバーを使ってる間は、勉強しても
無駄なようです。

11 名前：匿名： 2007/05/31（木） 21:41 ID:h6vJg2MN sub-Ds: この頁のように
http://www.tagindex.com/javascript/link/sample_select2.html
プルダウンメニューをフレームを越えて表示させたいんです。
どうすれば、いいのでしょうか？

そのページをみて、気に入れば、ソースを覗いて参考にしましょう。
「ソースの表示」というメニューがブラウザにはついています。環境が変われば、そのまま持っていっても使えませんが、それを調整できるくらいには、わからない意味を調べたりしているうちに基本が入っていれば、出来るようになります。

内部ではできるが外部ではできないｃｓｓなら、htmlの方がおかしいか、文字コードが違うなどケアレスミスがほとんどです。というか、何か勘違いしているとしか思えない質問なのですが。

12 名前： さくら ： 2007/05/31（木） 21:41 ID:mP6Wsu7G sub-99: 今回のご相談は、
少なくとも「文字に色を付けたいんです」→「じゃあCSSでcolorを」みたいな
すぐに上手く行くような返答ができるような内容ではありません。
依頼を見ると「とにかくちゃんと動くソースを下さい」と言っているようにも見えますが、
今回の場合は完全なソースが上がってくる事は一切期待ならさないでくださいね。
皆さんのアドバイスをもとにしてチャレンジして、
「やってみたら、これは上手くいったけど、これが出来なかった」
「こんなエラーメッセージが出た」
と随時報告しながら、上手くいく方法を見つけないと終わらないと思います。
（出来れば上手く行っていない状態のページを皆さんに見てもらえるようにした方が好ましいです）

そして、ちょっと混乱してきたので整理させてください。
はなさんがやりたい事というのは

●メンテナンスが大変なので、メニューは全ページに埋め込むのではなく、
　別ファイル１枚で済ませたい。
　それが可能になるならフレームを使おうが、
　外部ファイル（これの意味が判らないですが、とりあえずSSI的なものと受け取っておきます）だろうが、
　手段は特に指定しない。
●メニューは単純にボタンリンクだけでなく、マウスオンでサブメニューが出る必要がある
●会社のサイトと個人のサイトで使いたいので、サーバーはヤフーとジオシティーズ

という事でいいのでしょうか？

13 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: さくらさん言ってる事であっています。
フレームをまたいで表示させる方法を考えていましたが、なかなかその方法が見つからないため、HTMLファイル(JS、CSSを含む)を一括で外部JS(D-HTML）にしてみました。
そうするとエラーで表示できませんでした。

そのJSファイルはこちらです。
http://www.asahihouse.jppull-down.js

14 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: 上記のJSの65行目
'<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">',
の部分でエラーが発生しているようです。

15 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: たびたびすみません。
URLをコピーするときに間違っていました。
http://www.asahihouse.jp/pull-down.js

16 名前： NullPo ： 2007/05/31（木） 21:41 ID:Z0FHbpib sub-ii: >>14
ヒント：エスケープシーケンス

17 名前：はな： 2007/05/31（木） 21:41 ID:g3LJtksY sub-bK: http://www.tagindex.com/html_tag/basic/character.html#t01
のことですね。
エラーは脱出したものの
http://www.asahihouse.jp/sanple.htm
メニューの一部分から新たなメニューが出るはずの、
DHTMLのはずが、横枝がが出てきません。

>>15と同じURLに最新のものをUPしてみたのでよろしくお願いします。

18 名前： さくら ： 2007/05/31（木） 21:41 ID:mP6Wsu7G sub-99: ヒントは、元々のサンプル（pull-down.html）の24行目に書かれている
「ページは標準準拠モードで書いてくださいね。」
という注意書きです。

更にヒントを加えるなら、
http://www.tagindex.com/html_tag/basic/doctype.html#t02
http://www.tagindex.com/html_tag/basic/doctype.html#t04
かな。

更に更に大ヒントを加えると、
jsファイルとcssファイルには手を加えなくて大丈夫です。

ちゃんと動作するまでもう一息ですよ、頑張って下さいね。

19 名前：はな： 2007/05/31（木） 21:41 ID:.D./pv0x sub-bK: さくらさんありがとうございます。
標準モードで表示できました。

SSIの件ですが、Y!ジオやY!ホスなどヤフー系のサーバーでは制限されているプログラムの1つなので、
使えば楽そうですが、今のところ勉強するのは保留と言うことにしておきます。
(お手ごろ価格で、しかも初心者には使いやすい。ところが他に少ないので・・・。）

皆様のおかげで、なんとか使いこなせそうです。