■ 以下のファイルを見て直すべきところを指摘していただきたい.
Gara Forumでご指摘ください.
興味があって設定方法など知りたい方も上記でお知らせください.
下記、■ DOCTYPE宣言の所でNetscape4は切り捨てようかと書いたら無性にNetscape4に対応しないものを作りたくなり新たに作成したのがPopUpMenu.jsです.これで作ったページはこちらなどです.Netscape4のシェアはまだ3〜4%もあるので全部こちらに乗り換えたいのは山々ですがまだ実験的に提示というつもりです.
DOCTYPE宣言との関係でPullDownObjective.js→PullDownObjectiveN.jsと云う発展的別ファイルを作りました.
詳しくは下の■ DOCTYPE宣言
尚、中心となる、PullDownObjective.jsは数ヶ月振りのバージョンアップです.Windows Exploror風のケースが開閉します.(head-image.html
最新版version2.00バージョンは冒頭に書いてあります.
また、設定ファイルでmenuBar0 = new MenuBar(true);
の様にtrueを代入すると知らせてくれます.
一応此でやりたいことは全部実現しました.後はバグの発見ともっとスマートに行数を減らすなどしたいところです.勿論下に掲げた問題の対処も残っています.

HTML 共通のJS, cssファイル* イメージのロールオーバー
ブラウザの大きさによる位置の変更
各初期値設定ファイル
pulldownmenuFix-2.html PullDownObjective.js
dynlayer.js
beau.cssまたはbeau2.css
または
PullDownObjectiveN.js
dynlayerN.js

PullDownObjective-Sub-init.js
PullDownObjective.html images.js
position.js
PullDownObjective-init.js
PullDownObjective2.html images.js
position.js
PullDownObjective2-init.js
PullDownObjective3.html images.js
position.js
PullDownObjective3-init.js
menu-bar.html
PullDownObjective-Bar-init.js
menu-bar2.html PullDownObjective-Bar2-init.js
menu-bar3.html PullDownObjective-Bar3-init.js
menu-bar4.html PullDownObjective-Bar4-init.js
new
menu-bar5.html
PullDownObjective-Bar5-init.js
pulldownmenuFix.html PullDownObjective-Fix-init.js
pulldownmenuFix2.html PullDownObjective-Fix2-init.js
pulldownmenuFix3.html position.js
または
positionN.js
PullDownObjective-Fix3-init.js
pulldownmenuFix4.html PullDownObjective-Fix4-init.js
new
pulldownmenuFix5.html
PullDownObjective-Fix5-init.js
new
head-image.html
PullDownObjective-headImage-init.js
pulldown-frame.html
PullDownObjective-Frame-init.js
pulldown-Hframe.html PullDownObjective-HFrame-init.js
*cssはどうでもよく必要なのはPullDownObjective.jsdynlayer.js

■ 各メニューの特徴

HTML 特徴
pulldownmenuFix-2.html ずらずらと右にメニューが出てきます.これらメニュー作成で最初に目指していたものです.DHTMLなど知らなかったときこういうのを見てあっと驚いたのです.
PullDownObjective.html 各アイテム毎に横線入り.少し改めグラデーション.
ブラウザの大きさを変えても中央位置を保つ.
PullDownObjective2.html 任意に横線入り.
ブラウザの大きさを変えても中央位置を保つ.
PullDownObjective3.html 画像風に.
ブラウザの大きさを変えても中央位置を保つ.
menu-bar.html 横のバーもPullDownObjective.jsで生成.
menu-bar2.html 横のバーが浮き上がるようにした.PullDownObjective.jsで生成.
menu-bar3.html 横のバーの各アイテムが画像風.PullDownObjective.jsで生成.
menu-bar4.html 横のバーが本当の画像.画像を横バーのアイテムとして組み込みPullDownObjective.jsで生成.
上の最初の3つは組み込みではなくHTMLに最初から書いてある点が相違.
new
menu-bar5.html
横のバーの各アイテムではなくバー全体が画像風.ネットスケープ4で無ければ透明に見える.PullDownObjective.jsで生成.
pulldownmenuFix.html 単に左に表示.常に表示.但し、nolinkの項をクリックすると...
pulldownmenuFix2.html 単に左に表示.常に表示.但し、nolinkの項をクリックすると...
onmouseで色の変更ではなく浮き上がる.
pulldownmenuFix3.html 左に常に表示メニュー.サブメニューも出てくる.サブメニューの表示位置がブラウザの立て幅で変更する.nolinkの項をクリックすると...
画像風のボタンです.しかし画像ではない.item3D = trueの設定だけで実現.
pulldownmenuFix4.html 常に表示のメニューの各アイテムが本物の画像です.
NS4のみサブメニューを知らせる「+」の画像が表示できた.おかしなことにIE6,NS6は其れが出来ない.重なった画像があるとロールオーバーできない.さんざん悪態ついたNS4が出来る.そんなの面白くないのでアイテム画像に「+」を書き込むことにしたのです.IE6もNS6もどうなっているのか.
new
pulldownmenuFix5.html
左に常に表示メニュー.サブメニューも出てくる.サブメニューの表示位置がブラウザの立て幅で変更する.nolinkの項をクリックすると...
他との相違はメニュー全体が画像風に3Dになっています.
new
head-image.html
左に常に表示メニューにWindows Explororの開くケースの画像を配置.マウス・オンでこの小さな箱が開く.サブメニューも出てくる.
pulldownmenuFix-2.html サブメニューが右にどんどん現れる.
pulldown-frame.html 左フレームのメニュー.page0からpage16は右フレームが変化.
移ったページによりアイテムの色が変わる.その為、右フレーム、左フレームにもJS有り.
pulldown-Hframe.html 上フレームのメニュー.page0からpage2は下フレームが変化.
移ったページによりアイテムの色が変わる.その為、上フレーム、下フレームにもJS有り.


■ DOCTYPE宣言new

DOCTYPE宣言で
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
の「公開識別子」の部分だけだと問題なかったのが
DTDの場所を示す"http://www.w3.org/TR/html4/loose.dtd"「システム識別子」を付け加えて
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
とするとMozilla1.2.1では此のプログラムがうまく作動しないことが解りました.
原因は、オブジェクトのx,y座標、オブジェクトの幅と高さが仕様でピクセル(px)の単位つきだと解りました.それに対処したものが

です.
これらは、HTML 4.01 Transitional + 「システム識別子」や HTML 4.01 Strict や XHTML で使用しています.使用しているのは
このページ(HTML 4.01 Transitional + 「システム識別子」)
pulldownmenuFix-2.html(HTML 4.01 Strict)
head-image.html(HTML 4.01 Strict)
menu0.html(HTML 4.01 Strict)
menu_xhtml.html(XHTML 1.0 Strict)
で、IE6SP1、Mozilla1.2.1、Netscape4.78、Netscape4.79 Windows で動作確認しています.
但し、IE6は訳の分からないバグがあるようです.また、Mozilla1.2.1でも下記のようなバグがあります.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTMLで
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
とすると機能的に問題有りませんが、隠れたメニューの存在を示す矢印の画像がうまく表示されません.問題の所在は今のところ解明中です.この例はこちら→
とは書いたものの解明出来ました.従って上記を見ても何の問題もなくなっています.原因はMozillaでStrictモード(HTMLもXHTMLも)のときのみ矢印画像がその画像を入れているコンテナーのボックスの半分より下に来てしまうと言うバグとしか思えない現象でした.したがってy座標は画像の高さの半分下に来て、画像の上半分しか表示されないということになります.
PullDownObjectiveN.jsではその点を塩梅するようにしました.Mozillaは細かいバージョンで仕様が異なるのでバージョンによってはこのバグ体策が徒になるかも知れません.
Mozillaはこれで何とか出来るとして(いや本当はまだその他読込直後の動作がおかしいとか問題がないわけではありません)新たに困った問題が生じてしまいます.IEは「システム識別子」がついているとウィンドウの幅、高さ、スクロール幅などが取得出来なくなってしまいます.
正確には
"http://www.w3.org/TR/html4/loose.dtd"の時ウィンドウ縦幅は常に2桁の決まった値しか返してきません.ところが、
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"だと正確な値を返してくれます.(いや、ローカルとWEB上で違ったり気まぐれです)
また、「システム識別子」がつくとスクロール幅(x,y)は常に(0,0)になってしまい、このページのようにメニューがスクロールに連れて動くようなことが出来なくなってしまいます.何とも様々悩み大きな事とです.
DOCTYPE宣言とブラウザの組み合わせがやたらにあってそれら全てに対応させるのは困難です.
使用者の殆どいないMozillaが一番厳密な解釈をするようですが、使用者の圧倒的に多いIEでwinIE4, winIE5, winIE5.5, winIE6, mac5で Strict Transitionalの モードと対象によって振る舞いが違い、更にバグが紛れ込んでいるのではお話になりません.
Netscape4.xは論外としてMozilla,IEがまともになって欲しいものです.このサイトもそろそろNetscape4.xは追放してしまおうと思っています.

■ Netscape4.xの文字色

Netscape4.xでは文字色が変わりません.変わることも出来ますが、返るためにはアイテムの内容をそっくり書き換えなくてはならず、サブメニューの出てくるものなどでは時間がかかるし、Styleのpaddingの設定がうまくいかないのでやめにしました.Netscape4.xでも文字色が変えられるのはhttp://www1.ttcn.ne.jp/~beaubeau/xpos/changestate.htmlで実証しています.

■ Netscape4.xの透明色

Netscape4.xでは透明色、'transparent'をサポートしていずエラーになります.
menu-bar3.htmlは横バーのアイテム部分が画像風で浮き上がり、バックは下地の壁紙が透けて見えていますが、出来損ないのNetscape4.xは出来ないのです.
兎に角Netscape4.xの様に使用者がいなくなることをひたすら願うしかない馬鹿なブラウザは例えばHTMLの読み込みから4Kb近辺で改行コードが入ってしまうとか訳の分からないバグだらけの代物であります.
IEの独占は好ましくないけれど反対陣営は揚げ足取りでなく本気で良いものを作ってもらいたいものです.Mozillaはまだまだバグはあるもののその意味ですばらしいものです.

散々悪態をついたが、'transparent'ではなくnullなら透明になることが分かりました.Netscape4.xに対する悪意と偏見のなせる技でした.

とはいえくnullnullで色として認識されません.ある色を透明色に変換しようとしてもくnullだと色は変わりません.'transparent'がサポートされていれば透明色に変わります.

■ Opera

Operaはこれらのプログラム一応大丈夫でした.しかし、めちゃめちゃですね.まだまだ使い物になりません.何がどうして出来たり出来なかったり調べる気も起こりません.

■ 困った問題(解決か?)

OSやブラウザによってフォントの大きさが違う.pixelで指定しても、pointで指定してもうまくいかない.pixelは相対的単位で画像やHTMLの要素はpixel指定でその通りになるはずがならない.つまり100pxの画像と100pxの文字が同じにならない.pointのような絶対単位というのもどうなっているか分からない.こんな馬鹿なものしか作れない奴らとは一体何なのだ.出来損ないを出して置いて後でバグを直すと言う姿勢が当たり前だと思っている奴らとは.

new
今度の改訂でOSやブラウザのフォントの大きさの相違に対処出来るようになりました.但し、Netscxape6やMozillaで文字サイズを変える(TextZoom)機能にはすぐ反応できません.再読み込みが必要です.TextZoomを行うきっかけが掴めると出来るのですが未だ修行不足で実現していません.
此まで作ったメニューでフォントの大きさの相違に反応するページはこのページと後幾つかで、全てには対処していません.各アイテムの高さを指定すればその値が反映され、ということはフォントの大きさには反応しない、また、アイテムの高さをnullに設定すればフォントの大きさに反応するという仕様です.
全て反応するようにしなかったのはそのままの高さを拾ってくるとフォントの高さぎりぎりの窮屈な四角に収まり見栄えがよくないので1〜2倍程度大きくし無くてはならずその倍率と、またそれと指定のフォントの大きさと(font-size)とラインの高さ(line-height)の関係とブラウザの種類になどがからまって設定が面倒だったからです.どのブラウザでも見栄えがよくなる分岐の値を見つければどうということありませんが、単にその努力が面倒なだけです.
どのページが反応するかはNetscxape6やMozillaでTextZoomで文字の大きさを変えてページを再読込すれば分かります.

■ 他のサイトの同様な試み

次の事項のhttp://www.dansteinman.com/のチュートリアル18.Menulistが出発点でした.最初はそのまま使っていたのが、色々不都合があって自作を試みたのでした.

その他最近見つけた、Pop-Upは優れものです.特にどうしているか分からないのはNetscxape6やMozillaはHTML内の文字の大きさを変えられますが、それに対応して文字が大きくなると各アイテム枠の縦幅が広くなり文字が見えなくなると言うことが有りません.多分縦幅を決めずに自由にしていると思うのですが、そうするとこちらのでは不都合が起きやりたくないところです.Netscxape6やMozillaで文字サイズを変える命令が分かると対処できるのですが、公開されているMozillaのソースを読む能力がないので、お分かりの方は知らせてください

その後このNetscxape6やMozillaの文字サイズの変更や環境による文字サイズの違いに対処すべく縦幅をフリーにして文字が入った形でload時にたて幅の取得と言うことを実験的にやってみました.また、Netscxape6やMozillaに対してはsetIntervalで監視すれば出来るはずで実験をしてみましたが、なんと肝心のNetscxape6やMozillaは読みとった値通りに表示をしない(此はバグだろう)と言うことが分かりうまくいきません.IE, ネットスケープ4はきれいに出来るのに全く残念なことです.此が出来れば前項の「困った問題」も解消するのですが...

尚このサイトPop-Upでは有料で販売しています.

ソースはごっそりと取ってきて内容を読んだのですが、IE用、Netscxape6とMozilla用、Netscape4用、Opera用にjsファイルを分けて軽量化を図っています.弱点はソースを編集して設定するのがかなり面倒な点です.但し、無料配布のexeをダウンロード出来ますが其れで簡単に編集できるのでしょうか.ダウンロードしてみましたが使い方が分かりません.

ところでこの種のメニューはPull Down Menuと呼んでいましたが、英語圏ではPop Up Menuと呼ぶのですね.

左の浮遊するメニューの「Thanks to」で挙げているDHTMLLib Floating Contentではこの浮遊のやり方を学んだのでした.
上記のPop-Upでスクロールに連れてメニューが移動するのですがこちらでも是非其れを実現しようと試みたのですがNetscapeとMozillaでスクロールが0になったときだけうまくいかない(結局バグのようですが).IEでは(IEだけで使えるonscrollイベントで)出来るけれど移動ががたがた揺れながらで格好が悪い.スライドの関数を使ったらスムースには行くがタイミングがずれてしまう.
結局、此処の驚くほど簡単であるが到底思いつかない不思議で巧妙な方法で実現できたのです.
このスクロールに応じて移動する試みはそれだけ特化したものがこちらに有ります.


日本のサイトはこの種のプログラムをしているサイトはおうおうに画面が汚いか、子供じみているか(漫画好き)、画面デザインなんか思いもよらないっと言った風情で見る気が起こらず探してもいません.

■ ライセンス

dynlayer.jsimages.jsはオリジナルではなくNetscape6に対応するべく或いは他の理由で私の書き加えがありますが、GNUのライセンスの元にあります.
ライセンスの内容は英文、和文それぞれ
license.txt  gpl.txt
制作元は
http://www.dansteinman.com/
JavaScriptにオブジェクト指向を駆使した体系的なDHTML Tutorial があって素晴らしいサイトです.此処のDynAPI Project も未だ開発途上のようですが感心します.日本にはこんなサイト見かけません.

尚、本プログラム(PullDownObjective.js及び設定xxinit.jsその他ここで上げたhtmlに使用したjs、css、画像)の使用は原則的に自由です.但し、一報下さい.