横付けメニューのテストサンプル

このテンストサンプルは単なる動作テスト用です。実際に利用するには、たくさん課題が残っていますので、参考ということでソースをご覧ください。

JavaScriptの動き

  1. bodyのonLoadでmenuinit()を呼び出し、サブメニューを隠します。
  2. 東京・米国のonMouseOverでそれぞれのサブメニューを表示します。
  3. 東京・米国のonMouseOutでサブメニューを消します。

1でサブメニューを隠しているのは、JavaScriptオフでもメニューが表示されるように。

残されっぱなしの課題

利用するにあたって

ブラウザの設定で大きく挙動が変わりますので、下手をするとメニューが使えない場合があるかもしれません。そうならないように、各ブラウザでテストが必要です。特にメニューは使えないと非常に困りますので、そういう意味では大事をとって普通のテキストリンクやフォームのプルダウン利用を考えたほうがいい場合もあります。

とはいえ、そこに山があるから登るのだ。そうだ僕らはチャレンジャーだ。前のめりな人は、JavaScript や DOM 、DHTML、クロスブラザ などで検索しつつ勉強していきましょう。

このスクリプトの何を修正すればよいだろう？

第一に古いブラウザで表示できるように修正しないといけないハズ。

次に内部処理。メニュー項目が増えるたびにid="pop1"だとかIDを割り振らないといけないので、このあたりをスマートに自動で取得できるようにすると幸せになれそう。