MB-Support

パソコン初心者のサポートページ

全てのページに設置しているメニューバーを変更しました


日記ページの根本的な改良を予定していますが、このサイトの上部に設置されたドロップダウン形式のメニューバーも変更する予定でした。 2004年10月から Tigra Menu Online Builder を使用させて頂ましたが、何とか自力で作りたいと前々から考えていました。

テストを繰り返していましたが、文字にカーソルが合った時に表示させるには JavaScript の onMouseOver を使用します。 これはすぐに解決できたのですが、問題は表示させたメニューからカーソルが離れた時にメニューを消す方法です。 JavaScript の onMouseOut を利用するのですが、これを何処に設置するべきか分かりませんでした。

管理人が作りたかったメニューの構造はいたって簡単で、上部に設置された文字(メニュー)にカーソルが合うと、下にメニューが表示されるものです。 文字をクリックするとメニューに関連したページへ移動できます(target="_blank" も使用可能)。 下に表示されるメニューを最初から読み込ますのでは無く、文字にカーソルが乗った時点で初めてメニューを読み込む仕組みです。読み込ますメニューはXMLで、これによりPHPを利用して動的にメニューを変更できます。

XML を HTML に変換するには JavaScriptを利用して、<div> で囲まれた BOX を表示させています。 本当は文字にスタイルシートでボックスメニューを表現するのが一般的なのですが、簡単な方を選択しました。 この DIV に onMouseOut を埋め込めば、表示されたメニューからカーソルを話すとメニューは消えます(正確には空のXMLを読み込ませて消している)。 ところが DIV で囲まれた空白部分はこれが動作するのですが、文字にカーソルが合うと、なぜかメニューが消えてしまいます。 これではメニューを表示させても意味がありません(クリックする前に onMouseOut が作動してしまう)。



何ヵ月か悩んでいたのですが、他のこともやりたいので設置してしまいました。 文字の上にカーソルが合うと従来通りメニューが表示されます。 しかし、自動でメニューが消えないため、表示されたメニューの下部に「Close」ボタンを表示する仕様に変更しました。 これをクリックすればメニューが消えます。

表示するデータの本体は XML なのですが、JavaScirpt により DIV で囲んで背景色を黒に設定しています。 表示させる位置はスタイルシートで TOP と LEFT を指定しているので、ソースが何処に吐き出されても指定した位置に表示されます。 このため、ソースではホームページの最下部に出力しています。 出力させる場所は onMouseOver で渡すデータに組み込まれています(出力する DIV の幅も同じです)。



可能になった事は XML を動的に生成してメニューを構成する事と、メニュー内にさらにサブメニューを埋め込む事です。 右のスクリーンショットはメニューの「パーツ」にカーソルを移動して表示されたドロップダウンメニューです。

[サイト内][楽天][フェイス]と表示されている部分がサブメニューで、ここに触れると下のメニューも変化します。 リンクは実際に存在するものの、これはテストで設置してみました。 DIVで囲まれた部分は、メニューの役割を超え、その中に複数のホームページを作成できる感じです。



単純に HTML ソースを onMouseOver をトリガーにして表示するだけなので、画像も埋め込めます(右のスクリーンショットはメニューの「サイトマップ」にカーソルを乗せた状態です)。 従来のメニューとの違いは表示させるメニューをいくら増やしても、ホームページにアクセスした時に読み込まれるファイル容量は一緒です。



つまり最初のアクセス時点では、メニューの表示命令だけは読み込まれますが、メニュー自体は読み込まれません。 メニューにカーソルを移動した時に、初めてその項目に対応したメニューデータを読み込みます。 この様子は、ファイヤーウォールソフトを導入している場合や接続状態をタスクバーに表示させている場合、メニューの文字を移動させる度に通信している状況が分かります。

従来のメニューではホームページにアクセスした時点で表示する全てのデータを読み込まして、さらに初期状態では読み込ませたデータを隠して必要に応じて表示していました。 これだとメニューを使わない閲覧者様には、無駄なデータをダウンロードさせている事になります。 さらにダウンロードさせたなら隠すのも何ですね。 ページスペースを有効に利用するために、クライアントにダウンロードさせるファイルが大きくなっていました。

今回変更したドロップダウン形式のメニュー。 この方法が最適か否かは管理人にも分かりません。もし、メニューに表示させる内容がサイトにとって重要であるならば、この方法は良いとは思えません。 管理人的には JavaScript を使った時点で全てのクライアントが表示できる物では無いので、補足的に利用しているに過ぎません。

そのためサイトにとって大切なリンクは、左メニューに埋め込んであります。 ただし、JavaScript が有効なクライアントはもっと便利にサイトを利用できるだけです。 従来は左メニューにだら〜んと表示させていたショップへのリンクのほとんどを、ドロップダウンリンクに移動しました(パソコンメーカーダイレクトや書籍、ソフトウェアの販売ショップなど)。 これにより左メニューは管理人がおすすめな商品リンクを厳選して表示するスペースを確保できました。 おそらく「パーツ/周辺機器」「ショッピングモール」のリンクも、今後は移動されると思われます。



全てのページが PHP などによる動的ページだった場合、今回の変更は非常に楽でした。 しかし静的ページの多い MB-Support のページでは、器を変更する必要があったので意外と時間がかかってしまいました。 静的ページでも、FrontPage2003 のコンポーネントを利用して、共通する部分をパーツとして扱っています。 これのメリットは 1 つのパーツを変更すれば、そのパーツに関するタグが挿入されているページは自動で更新してくれます。

ただ、フレームで埋め込んでいるのでは無いので、変更したパーツ情報を全ての静的ページで変更する作業に時間がかかります。 さらに、フレームならば元の変更したデータをサーバーに移動すれば終了ですが、ソースを書き換えているため、変更したページを全てサーバーに転送する必要があります。 現在は器の変更が終了したので、表示させるメニューは一箇所で制御しています。 後は変更するのが簡単なので、これからアイデアが浮かんだ時点で、メニュー、もしくは、サブメニューの内容を書き換えていきたいと思います。





Copyright © 2019 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人のご挨拶プライバシーポリシー著作権/免責事項