jQuery dropdown
jQueryは、JavaScriptのライブラリで、とても便利なものである。本体は公式サイトから入手し、headr部分に「<script type="text/javascript" src="jquery-min.js"></script>」な感じで記述する。他には、Google Libraries APIを利用してリンクを張るって方法もある。
で、jQuery dropdown。jQueryを使って簡単に見た目もいいドロップダウンメニューを組み込む。Create a multilevel Dropdown menu with CSS and improve it via jQueryはこちらからDownload(←すぐにダウンロードが始まります)入手。ダウンロードしたdropdown.zipを解凍して、中にある「menu.js」と「style.css」を使う。
記述方法
jQuery dropdown
「menu.js」は、jquery本体と同じようにhead部分に記述する。
HTMLサンプル
<ul id="nav"> <li><a href="#">1 HTML</a></li> <li><a href="#">2 CSS</a></li> <li><a href="#">3 Javascript </a> <ul> <li><a href="#">3.1 jQuery</a> <ul> <li><a href="#">3.1.1 Download</a></li> <li><a href="#">3.1.2 Tutorial</a></li> </ul> </li> <li><a href="#">3.2 Mootools</a></li> <li><a href="#">3.3 Prototype</a></li> </ul> </li> </ul>
CSSサンプル、自身のサイトに合うように変更する。
body{ font-size:0.85em; font-family:Verdana, Arial, Helvetica, sans-serif; } #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } #nav a{ display:block; padding:0px 5px; border:1px solid #333; color:#fff; text-decoration:none; background-color:#333; } #nav a:hover{ background-color:#fff; color:#333; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; display:none; width:12em; top:1.5em; } #nav li ul a{ width:12em; height:auto; float:left; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }