ドロップダウン・メニューの設置顛末

メニューバー・アラカルト

　最初にトップページを設計する際、リンク先をナビゲートするメニューのデザインを検討しました。ユーザ側ではシンプルで使い勝手がよく、作成側では維持管理しやすい柔軟性のあるものが望ましく、右画像のように動作することを念頭にしました。そのコンセプトは、

・表示はプレート盤もない文字だけとする

・メニュー表示は階層化したドロップダウン方式とする

・カーソルを置けば自動でドロップダウン表示できる

・メニューの追加・修正はテキストベースで切替できる
　このコンセプトに見合うものをインターネット検索して、以下のサイトの中にあったものを頂戴して右画像のように自分なりにカスタマイズしました。

サイト紹介

　メニューバーの紹介サイトをネットサーフィンし、右画像のサイトを見つけました。各種ドロップダウンのメニューをデモすることができ、かつCSSのプログラムをフリーでダウンロードできる優れサイトです。私は右上のflickrサイトでhorizontal タイプを選んでダウンロードし、自分のレンタルサーバー（無料）に持ち込んでホームページのメニューバーを作りました。このようにメニューひとつ作るのもこの有様で、私の技量不足もバレバレですね、ハイ。

ところが一騒動

　このドロップダウンメニューがうまくいったはずが、ユーザ側のブラウザの相違で誤動作することが発覚。従来から私の環境であるMac系Safariでは問題なかったのに、Windows系のIEのVer.7（それ以上のバージョンでは確認していません）ではドロップダウンしないことが分かりました。原因はページ様式の全てをコントロールするcss で、ブロックダウンの制御コードとページ本文の様式（色付きで、Windows系以外ではコーナーRのあるカッコいいテンプレート）を定めたコードとの間で干渉があり、IE系ブラウザではドロップダウンがバグることが判明しました。そこで緊急避難的に対処するため、トップページはメニュー下にある本文はhtml制御の通常コンテンツではなく、その制御で出来上がった成果をイメージにした巨大画像に切替ました。右の画像のように１枚の絵にしたのです。よく見ると、フォントはWindows系のものではなく、テンプレートの一番下の両端がきれいにR状になっていることがお分かりになると思います。実はMac系Safariでは、全てのページがこのテンプレート仕上げになっているのです。ともあれ、メニュー下を画像化することによって干渉を避けて、Windows系ブラウザでも右画像のようにブロックダウンメニューがコントロールできるようになりました。でも、緊急避難であるのはトップページ以外のページではメニュー下を画像にすることは現実的ではなく、Windows系ではトップページ以外はドロップダウンが効かないことを意味します。この対策は別のシートで述べることにします。

そして最後となりますが、現在のドロップダウン・メニューの出典について触れます。当初目論んだドロップダウン・メニューは一番上の右添付図で示すように文字ベースのみであったのに対し、現在はグレイの背景付（一番下の図）になっています。今回の一騒動で、各種メニューの公開版を再度テストした中から一番安定して動作し、見栄えのあるものをチョイスしました。このメニューの詳細は提供サイトのリンク先をご覧ください。尚、実際のメニュー動作は見直して、About や Gallery コーナーなどはドロップダウンさせずに専用の索引ページを作って、そちらにリンクさせるようにしました。