【ホームページ作成】第3回 簡単なドロップダウンメニューを作る

ドロップダウンメニュー完成

10ページにわたって解説してきましたが、これで（最低限の機能を備えた）ドロップダウンメニューは完成です。

ソースを細切れに解説してきたので、全体像が把握しにくかったかもしれません。 具体的な全体のソースは、以下のサンプルページのソースを表示させてご参照下さい。

ドロップダウンメニューのサンプルページ

上記のサンプルページのソースをそのままコピーして（自由に修正してから）使えば、楽にドロップダウンメニューを試せるでしょう。 ご自由にご活用下さい。

今回のサンプルにある問題点

問題点１．サブメニューが自動的には閉じない

今回（第3回）のサンプルでは、一度開いたメニューは、他のメニューを開くか「HOME」の上にマウスを乗せない限り閉じません。 これでは、コンテンツを読む際に、開いたサブメニューが邪魔になってしまう可能性があります。

マウスがメニューから離れた後、一定時間後に自動的に閉じるのが望ましいですね。 サブメニューを自動的に閉じるには、タイマーを活用する方法などが必要です。その方法はまたの機会にご紹介したいと思います。

問題点２．古いブラウザでは使えない

JavaScriptで表示・非表示を切り替える際には、「getElementById」というメソッドを使いました。 古いブラウザでは、このgetElementByIdが使えないものもあります。 その場合、今回のドロップダウンメニューは機能しません。

ソースを簡単にするために今回は省きましたが、それらのブラウザに対応できる記述方法があります。 それらの方法もまたの機会にご紹介したいと思います。

問題点３．メニューバーのHTMLが見にくい

今回のサンプルでは、メニューバーを構成するHTMLでは、タグとタグの間に空白や改行を含められません。（※タグの内側には空白があっても構いません。たとえば、タグ名と属性名の間など。） そのため、非常に長い1行でメニューバーを作らなければならず、ソースがとても読みにくくなっています。

これは、「（IEの）互換モードで表示されるHTML内でも使えるようにするため」と「（スタイルシートの解釈が）古いブラウザでも使えるようにするため」という理由があります。
それらのブラウザを除外して考えられるなら、もっとスマートにスタイルシートを使って解決する方法があります。 その方法なら、HTMLソースを読みやすい状態で記述しておけます。
この方法についても、またの機会にご紹介したいと思います。

その他の機能拡張

１．複数階層のメニュー

今回のサンプルでは、サブメニューが1階層のみです。サブメニュー内の1項目からさらにサブメニューを表示させて、2階層以上のメニューを作りたい場合もあるでしょう。 基本的には、今回ご紹介した方法の応用で可能です。

２．枠内のどこでもクリック可能に

今回のサンプルのサブメニューでは、文字のある部分しかクリックできません。 一般的な（Windowsなどの）メニューのように、枠内のどこでもクリックできるようなデザインだと望ましいでしょう。 これは、スタイルシートを少し加えるだけで実現できます。 過去に記事「余白も含めて行全体をリンクに！」などで方法をご紹介していますので、試してみて下さい。

おわりに

今回は、第1回～第2回の解説をふまえて、簡単なドロップダウンメニューを作る方法をご紹介致しました。

ずいぶんページ数が多くなってしまいましたが、分かってしまえばそれほど複雑な内容ではありません。 ぜひ試してみて下さい。難しく感じる場合は、サンプルソースをベースに書き換える方法から始めるのがお勧めです。

【関連記事】

• スタイルシートだけで段組を作る
• 親窓へリンクを渡す小窓を作る
• クリックできる面積を増やそう！
• 余白も含めて行全体をリンクに！