■用意するもの
「Simple jQuery Dropdowns」でダウンロードしたもののうち、「style.css」のみを使用する。
■以下の簡単なコードを記述して動きを確かめる
※大枠の「id="mainMenu"」、ドロップダウンを示す「class="dropdown"」、サブメニューを示す「class="sub_menu"」で操作してるので名前を変えてはダメ。
------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- #mainMenuここから -->
<ul id="mainMenu" class="dropdown">
<li>
<a href="#" class="noEvent">ファイル</a>
<!-- 「ファイル」の.sub_menuここから -->
<ul class="sub_menu">
<li><a href="#" id="newDocument">新規作成...</a></li>
<li><a href="#" id="saveDocument">レイヤー3をPNG形式で保存</a></li>
</ul>
<!-- 「ファイル」の.sub_menuここまで -->
</li>
</ul>
</body>
</html>
------------
■動作がokならcssで配色などを行う
■配色が終わったらメニューの種類を増やす
んで今回は、チープで不快感を与える配色を目指してみることにしたら
ピストルズのアルバムみたいになった。
目がちかちかするけど一応メニューが完成 ⇒ こちら
![]() | パーフェクトJavaScript (PERFECT SERIES 4) 新品価格 |
![]() | 例題50+演習問題50でしっかり学ぶ HTML5+CSS標準テキスト 新品価格 |


