スクリプトで表示・非表示を切り替えるソース
最後に全部をまとめて、1つのHTMLとして成り立つソースを掲載しておきます。 全体を通して見たい場合や、コピー＆ペーストして使ってみる際などにご活用下さい。
<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function show(eid) {
document.getElementById(eid).style.visibility = 'visible';
}
function hide(eid) {
document.getElementById(eid).style.visibility = 'hidden';
}
</script>
</head>
<body>
<div><a href="～" onmouseover="show('menu1');" onmouseout="hide('menu1');">プロフィール</a><span id="menu1" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu2');" onmouseout="hide('menu2');">イラスト</a><span id="menu2" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu3');" onmouseout="hide('menu3');">日記</a><span id="menu3" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu4');" onmouseout="hide('menu4');">リンク</a><span id="menu4" style="visibility: hidden;">へGO！</span></div>
</body>
</html>
おわりに
さて、ドロップダウンメニューを作るシリーズ第1回として、今回は、表示・非表示をスクリプトで切り替える方法をご紹介致しました。 ドロップダウンメニューを完成させるには、もう少しステップが必要です。
次回は、自由に指定した場所（座標）に表示させる方法について、ご紹介したいと思います。
【次回記事】
