<div class="suckerdiv"> <ul id="suckertree1"> <li><a href="#">脊椎動物</a> <ul> <li><a href="" >マグロ</a></li> <li><a href="" >アフリカツメガエル</a></li> <li><a href="" >イグアナ</a></li> <li><a href="" >ニホンザル</a></li> </ul> </li> <li><a href="#">脊索動物</a> <ul> <li><a href="" >ナメクジウオ</a></li> <li><a href="" >マボヤ</a></li> <li><a href="" >ユウレイボヤ</a></li> </ul> </li> <li><a href="#">節足動物</a> <ul> <li><a href="#">昆虫類</a> <ul> <li><a href="" >ギンヤンマ</a></li> <li><a href="" >アブラゼミ</a></li> <li><a href="" >ナガレトビケラ</a></li> <li><a href="" >クロゴキブリ</a></li> <li><a href="" >ハンミョウ</a></li> <li><a href="" >オトシブミ</a></li> <li><a href="" >オオスズメバチ</a></li> <li><a href="" >キアゲハ</a></li> <li><a href="" >ショウジョウバエ</a></li> </ul> </li> <li><a href="#">クモ類</a> <ul> <li><a href="" >ジョログモ</a></li> <li><a href="" >オニグモ</a></li> <li><a href="" >ハエトリグモ</a></li> <li><a href="" >タランチュラ</a></li> </ul> </li> <li><a href="#">甲殻類</a> <ul> <li><a href="" >アマエビ</a></li> <li><a href="" >タラバガニ</a></li> <li><a href="" >シャコ</a></li> <li><a href="" >ケンミジンコ</a></li> <li><a href="" >ヤドカリ</a></li> </ul> </li> <li><a href="#">多足類</a> <ul> <li><a href="" >ムカデ</a></li> <li><a href="" >ヤスデ</a></li> <li><a href="" >ゲジ</a></li> <li><a href="" >ワラジムシ</a></li> <li><a href="" >ダンゴムシ</a></li> </ul> </li> </ul> </li> <li><a href="#">扁形動物</a> <ul> <li><a href="" >ナミウズムシ</a></li> <li><a href="" >日本海裂頭条虫</a></li> <li><a href="" >コウライビル</a></li> </ul> </li> </ul> </div>
下のリンクより入ります。左側のメニューからVertical CSS Menusをクリックすると、垂直メニューのいろいろなものが出てきます。このうち使ったのはSuckerTree vertical Menuというやつです。他のメニューも面白そうなものがあったら試してみて下さい。ちなみに、全部のページにあるタブメニューはここから獲得してきたものです。このメニューについては、Horizontal CSS Menuの中にある(Overlapping horizontal tabs 3.4)というものです。これはJavaScriptを使用せず、CSSだけで行っているものです。
JavaScriptが有効ならば別ウインドウ(タグ)で開きます。
www.dynamicdrive.com/style/すると、The CSSに、このメニューのためのCSSコードとJavaScriptのコードが書かれているので、コピーしてメニューを作りたいHTMLファイルの<head>〜</head>内に貼り付けます(または、外部CSSファイルや外部jsファイルを作ってもいい。私はそうしています)。このCSSコードの中には、後に出てくる画像(arrow-list.gif)のことが出てくる(back-ground url:画像ファイルのフォルダ/arrow-list.gif)ので、この画像を入れたフォルダになるように書き換えます。次に、The single imageというところにメニューに使うイメージがあるので画像を右クリックして「名前を付けて保存」します。次に、The HTMLに左のようなメニュー部分のコードが書かれているのでコピーしてHTMLファイルに貼り付けます。左のコードにあるように、<ul>〜</ul>で入れ子にしながらメニューを作っていきます。なお、例のメニュー部分は背景の色を変えています。これもCSS部分で変更できます。