基本編
* 以下のサンプルを拡張していく。
サンプル
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample</title> <style type="text/css"> <!-- /* * 表示位置 * 参考資料：http://allabout.co.jp/gm/gc/23809/2/ */ #mainDropDownList { position: absolute; top: 50px; left: 10px; } /* * リストの「・」を非表示にする */ #dropDownList li { list-style: none; } /* * サブリストを非表示にする */ .submenu { visibility: hidden; } /* * サブリストを折り返す */ .submenu a { display: block; } --> </style> <script type="text/javascript"> <!-- /* * 表示切替 * 参考資料：http://allabout.co.jp/gm/gc/23808/ */ function OpenMenu(id){ document.getElementById(id).style.visibility = 'visible'; } function CloseMenu(id){ document.getElementById(id).style.visibility = 'hidden'; } // --> </script> </head> <body> <div id="mainDropDownList"> <ul id="dropDownList"> <li> <a href="#" id="menu1" onmouseover="OpenMenu('subMenu1');" onmouseout="CloseMenu('subMenu1');">Home</a> <div class="submenu" id="subMenu1" onmouseover="OpenMenu(this.id);" onmouseout="CloseMenu(this.id);"> <a href="#">SubMenu1</a> <a href="#">SubMenu2</a> </div> </li> </ul> </div> </body> </html>
画像ボタンによるドロップダウンメニュー
* 以下で作った感じをjqueryを使わずに行うhttp://blogs.yahoo.co.jp/dk521123/28082797.html
サンプル
* 上記の基本編のコードのヘッダー部のCSSに以下を追加するa#menu1 {
display: block;
width: 112px; /* 画像1枚分の横幅 */
height: 40px; /* 画像1枚分の高さ */
text-indent: -1000px; /* 文字を見えなくする */
background-image: url("rollover/01_thumb_off.jpg"); /* マウスを外した時用の画像ファイル名 */
background-repeat: no-repeat;
}
/*
* hoverで画像を切り替える
* 参考資料：http://www.nishishi.com/css/link-image-hoverchange.html
*/
a#menu1:hover {
display: block;
width: 112px; /* 画像1枚分の横幅 */
height: 40px; /* 画像1枚分の高さ */
text-indent: -1000px; /* 文字を見えなくする */
background-image: url("rollover/01_thumb_on.jpg"); /* マウスを当てた時用の画像ファイル名 */
background-repeat: no-repeat;
}
参考資料
* 主に以下の2つのサイトを参考にしたhttp://allabout.co.jp/gm/gc/23911/
http://jsajax.com/Articles/dropdownmenu/286
