ホームページを作成に関する備忘録

サブメニューが開いていく垂直メニュー(SuckerTree Vertical Menu)

Xhtmlファイルについて

<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部分で変更できます。