Tweet

JavaScript mouseover（マウスオーバー）を使ったメニューを自作する

JavaScript の mouseover（マウスオーバー）を使ったメニューを自作する。

mouseover（マウスオーバー）メニュー

ウェブサイトでよく見かける文字や画像にマウスカーソルを合わせるとメニューが表示される機能は、JavaScriptでCSSのdisplay（表示、非表示）を切り替えて実現できる。
自作しなくても便利なスクリプトがいろいろあるが、あえて自分で書いてみる。
2007年、onMouseover、onMouseout を使ったサンプルを書いたが、記法を少し新しくして書き直した。
ただ、スマホでサイトを見る人が増えた昨今、マウスオーバーは適切ではないかもしれない。

以下HTML。

【上の文章】

<div id="ex_out" style="background:#ccf;width:200px;">
<a href="#test">マウスオーバーメニュー</a>

<div style="position:absolute;">

<ul id="ex_menu"
style="display:none;
position:relative;
top:0px;
left:0px;
background:#fff;
width:150px;
padding:3px;
margin:0;
border:2px solid #acc;
list-style-type:none;">
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!Japan</a></li>
</ul>

</div>

</div>

【下の文章】

以下JavaScript。

<script>
document.getElementById("ex_out").addEventListener("mouseover", function(){
	document.getElementById("ex_menu").style.display = 'block';
}, false);

document.getElementById("ex_out").addEventListener("mouseout", function(){
	document.getElementById("ex_menu").style.display = 'none';
}, false);
</script>

addEventListenerを使い、id="ex_out"のdiv要素にmouseoverとmouseoutの処理を行う。
それぞれ<ul id="ex_menu">の領域の表示、非表示を行っている。
初期状態では<ul id="ex_menu">は display:none; を指定して非表示にする。
メニューの領域が表示されても、一番外側のdivのheightや【下の文章】の表示位置は変わらないようになっている。
この辺りはpositionの指定で表示のされ方が変わってくる。
以下表示例。

【上の文章】 【下の文章】