関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
表示・非表示の切替 (HTML,CSS,JavaScript)
更新日:2006年12月20日
最低限の機能を備えた簡単な「ドロップダウンメニュー」を作成してみましょう。スタイルシートでメニューバーをデザインし、HTMLに短いJavaScriptを書くだけで実現できます。
10ページにわたって解説してきましたが、これで(最低限の機能を備えた)ドロップダウンメニューは完成です。
ソースを細切れに解説してきたので、全体像が把握しにくかったかもしれません。 具体的な全体のソースは、以下のサンプルページのソースを表示させてご参照下さい。
上記のサンプルページのソースをそのままコピーして(自由に修正してから)使えば、楽にドロップダウンメニューを試せるでしょう。 ご自由にご活用下さい。
問題点1.サブメニューが自動的には閉じない
今回(第3回)のサンプルでは、一度開いたメニューは、他のメニューを開くか「HOME」の上にマウスを乗せない限り閉じません。 これでは、コンテンツを読む際に、開いたサブメニューが邪魔になってしまう可能性があります。
マウスがメニューから離れた後、一定時間後に自動的に閉じるのが望ましいですね。 サブメニューを自動的に閉じるには、タイマーを活用する方法などが必要です。その方法はまたの機会にご紹介したいと思います。
問題点2.古いブラウザでは使えない
JavaScriptで表示・非表示を切り替える際には、「getElementById」というメソッドを使いました。 古いブラウザでは、このgetElementByIdが使えないものもあります。 その場合、今回のドロップダウンメニューは機能しません。
ソースを簡単にするために今回は省きましたが、それらのブラウザに対応できる記述方法があります。 それらの方法もまたの機会にご紹介したいと思います。
問題点3.メニューバーのHTMLが見にくい
今回のサンプルでは、メニューバーを構成するHTMLでは、タグとタグの間に空白や改行を含められません。(※タグの内側には空白があっても構いません。たとえば、タグ名と属性名の間など。) そのため、非常に長い1行でメニューバーを作らなければならず、ソースがとても読みにくくなっています。
これは、「(IEの)互換モードで表示されるHTML内でも使えるようにするため」と「(スタイルシートの解釈が)古いブラウザでも使えるようにするため」という理由があります。
それらのブラウザを除外して考えられるなら、もっとスマートにスタイルシートを使って解決する方法があります。 その方法なら、HTMLソースを読みやすい状態で記述しておけます。
この方法についても、またの機会にご紹介したいと思います。
1.複数階層のメニュー
今回のサンプルでは、サブメニューが1階層のみです。サブメニュー内の1項目からさらにサブメニューを表示させて、2階層以上のメニューを作りたい場合もあるでしょう。 基本的には、今回ご紹介した方法の応用で可能です。
2.枠内のどこでもクリック可能に
今回のサンプルのサブメニューでは、文字のある部分しかクリックできません。 一般的な(Windowsなどの)メニューのように、枠内のどこでもクリックできるようなデザインだと望ましいでしょう。 これは、スタイルシートを少し加えるだけで実現できます。 過去に記事「余白も含めて行全体をリンクに!」などで方法をご紹介していますので、試してみて下さい。
今回は、第1回~第2回の解説をふまえて、簡単なドロップダウンメニューを作る方法をご紹介致しました。
ずいぶんページ数が多くなってしまいましたが、分かってしまえばそれほど複雑な内容ではありません。 ぜひ試してみて下さい。難しく感じる場合は、サンプルソースをベースに書き換える方法から始めるのがお勧めです。
【関連記事】
関連キーワード[PR]
人気ホームページ作成ランキング
Powered by 価格.com
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
関連キーワード[PR]