国民宿舎はらぺこ 大浴場

ドロップダウンメニューを実現する HTML のサンプルを書いてみた。ソースはリンク先を参照。

おんなじようなことをやっているサイトってのは結構あるんだけど、マウスがサブメニューから離れてもサブメニューが閉じてくれなかったり、変なルールでサブメニューが閉じるようになっていたりと、いまいち操作感がしっくりこないサイトが多いように思う。

今回書いてみたサンプルのポイントは以下の通り。

• メニューはリストを記述するタグ <ul> と <li> を用いて記述している。メニューはメニューアイテムの階層的なリストだよ、という考え方だわね。
• メインメニューのアイテムにマウスカーソルが重なると、onMouseOver イベントハンドラが自前の openSubMenu 関数を呼んで、指定した ID の要素ブロックがサブメニューとして表示される。このとき表示されるブロックは、メインメニューのアイテムである <li> 要素の配下にある <ul> 要素であるため、このブロック上にマウスカーソルが重なっている間は、メインメニューアイテム (の配下の要素) 上にマウスカーソルが重なっているのと同じということになり、メインメニューアイテムの onMouseOut イベントは発生しない。マウスカーソルがメインメニューアイテムやサブメニューブロックのいずれからも離れると、メインメニューアイテムの onMouseOut イベントハンドラが呼ばれ、それが更に自前の closeSubMenu 関数を呼んで、指定した ID の要素ブロックであるサブメニューが非表示となる。
• メインメニューアイテム <li> 要素のスタイルに position: relative; を、サブメニューブロック <ul> 要素のスタイルに position: absolute; を指定することによって、サブメニューの表示位置を、メインメニューアイテムの表示位置からの相対位置として指定することができる。