スクロールドロップメニュー

スクロール（スライド）するドロップ（階層）メニューです。
ドロップメニューは色々ありますが、スクロールするのが欲しくて作成しました。
このページはスクロールドロップメニューで作成してあります。

特徴

ドロップメニュー

このメニューは全てCSSで書いてあり、JavaScriptを使用していない為、非常に軽いです。またJavaScriptをOFFにしていても動作します。
3段階の階層メニューなので分かりやすい設計になっています。

スクロール

ブラウザをスクロールするとアコーディオンメニューが移動する為、何時でもメニューにアクセスする事が出来て、アクセシビリティに優れています。またメニューが動くので、視覚効果に優れています。

あなたの活かしたデザインでスクロールドロップメニューをカスタマイズしてください。

サンプル＆ダウンロード

サンプルはこちら。
ダウンロード (scrooll_drop_menu.zip)

設置方法

ダウンロードしてご覧下さい。

HTMLヘッダに以下を記述します。

スタイルシート(IE6.0以下用含む)の記述、
wrapscroll.jsファイルのロード、wrapscrollオブジェクトの作成
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
<script type="text/javascript" src="wrapscroll.js"></script>
<script type="text/javascript"><!--
//wrapScroll
var mov = new wrapScroll('drop_menu','container','header');
//ドロップメニューの上からのマージンを指定(px)
mov.marginTop = 15;
//--></script>

ドロップメニュー階層のHTMLを記述します。

階層メニューを記述してください。（IE6.0以下用の記述も書いてください。）
<div id="drop_menu">
<ul>
<li><a href="http://sawa-s.com/" class="hide"><strong>HOME</strong></a></li>
<!--[if lte IE 6]>
<a href="http://sawa-s.com/"><strong>HOME</strong></a>
<![endif]-->

<li><a href="javascript:void(0);" class="hide">MENU 1</a>
<!--[if lte IE 6]>
<a href="javascript:void(0);">MENU 1
<table><tr><td>
<![endif]-->
  <ul>
  <li><a href="javascript:void(0);">MENU 1-1</a></li>
  <li><a href="javascript:void(0);" class="hide">MENU 1-2 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 1-2 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 1-2-1</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-2</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-3</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-4</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-5</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-6</a></li>
    <li><a href="javascript:void(0);">MENU 1-2-7</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>

  <li><a href="javascript:void(0);" class="hide">MENU 1-3 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 1-3 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 1-3-1</a></li>
    <li><a href="javascript:void(0);">MENU 1-3-2</a></li>
    <li><a href="javascript:void(0);">MENU 1-3-3</a></li>
    <li><a href="javascript:void(0);">MENU 1-3-4</a></li>
    <li><a href="javascript:void(0);">MENU 1-3-5</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>
  <li><a href="javascript:void(0);">MENU 1-4</a></li>
  <li><a href="javascript:void(0);">MENU 1-5</a></li>
  <li><a href="javascript:void(0);">MENU 1-6</a></li>
  </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

<li><a href="javascript:void(0);" class="hide">MENU 2</a>
<!--[if lte IE 6]>
<a href="javascript:void(0);">MENU 2
<table><tr><td>
<![endif]-->
  <ul>
  <li><a href="javascript:void(0);" class="hide">MENU 2-1 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 2-1 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 2-1-1</a></li>
    <li><a href="javascript:void(0);">MENU 2-1-2</a></li>
    <li><a href="javascript:void(0);">MENU 2-1-3</a></li>
    <li><a href="javascript:void(0);">MENU 2-1-4</a></li>
    <li><a href="javascript:void(0);">MENU 2-1-5</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>

  <li><a href="javascript:void(0);" class="hide">MENU 2-2 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 2-2 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 2-2-1</a></li>
    <li><a href="javascript:void(0);">MENU 2-2-2</a></li>
    <li><a href="javascript:void(0);">MENU 2-2-3</a></li>
    <li><a href="javascript:void(0);">MENU 2-2-4</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>
  <li><a href="javascript:void(0);">MENU 2-3</a></li>
  <li><a href="javascript:void(0);">MENU 2-4</a></li>
  <li><a href="javascript:void(0);">MENU 2-5</a></li>
  <li><a href="javascript:void(0);">MENU 2-6</a></li>
  <li><a href="javascript:void(0);" class="hide">MENU 2-7 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 2-7 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 2-7-1</a></li>
    <li><a href="javascript:void(0);">MENU 2-7-2</a></li>
    <li><a href="javascript:void(0);">MENU 2-7-3</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>

  </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

<li><a href="javascript:void(0);" class="hide">MENU 3</a>
<!--[if lte IE 6]>
<a href="javascript:void(0);">MENU 3
<table><tr><td>
<![endif]-->
  <ul>
  <li><a href="javascript:void(0);">MENU 3-1</a></li>
  <li><a href="javascript:void(0);">MENU 3-2</a></li>
  <li><a href="javascript:void(0);">MENU 3-3</a></li>
  <li><a href="javascript:void(0);">MENU 3-4</a></li>
  <li><a href="javascript:void(0);">MENU 3-5</a></li>
  <li><a href="javascript:void(0);">MENU 3-6</a></li>
  <li><a href="javascript:void(0);">MENU 3-7</a></li>
  </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

<li><a href="javascript:void(0);" class="hide">MENU 4</a>
<!--[if lte IE 6]>
<a href="javascript:void(0);">MENU 4
<table><tr><td>
<![endif]-->
  <ul>
  <li><a href="javascript:void(0);">MENU 4-1</a></li>
  <li><a href="javascript:void(0);" class="hide">MENU 4-2 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 4-2 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 4-2-1</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-2</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-3</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-4</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-5</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-6</a></li>
    <li><a href="javascript:void(0);">MENU 4-2-7</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>

  <li><a href="javascript:void(0);" class="hide">MENU 4-3 &gt;</a>
<!--[if lte IE 6]>
  <a class="sub" href="javascript:void(0);">MENU 4-3 &gt;
  <table><tr><td>
<![endif]-->
    <ul>
    <li><a href="javascript:void(0);">MENU 4-3-1</a></li>
    <li><a href="javascript:void(0);">MENU 4-3-2</a></li>
    <li><a href="javascript:void(0);">MENU 4-3-3</a></li>
    <li><a href="javascript:void(0);">MENU 4-3-4</a></li>
    <li><a href="javascript:void(0);">MENU 4-3-5</a></li>
    </ul>
<!--[if lte IE 6]>
  </td></tr></table>
  </a>
<![endif]-->
  </li>
  <li><a href="javascript:void(0);">MENU 4-4</a></li>
  <li><a href="javascript:void(0);">MENU 4-5</a></li>
  <li><a href="javascript:void(0);">MENU 4-6</a></li>
  </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

<li><a href="javascript:void(0);" class="hide">MENU 5</a>
<!--[if lte IE 6]>
<a href="javascript:void(0);">MENU 5
<table><tr><td>
<![endif]-->
  <ul>
  <li><a href="javascript:void(0);">MENU 5-1</a></li>
  <li><a href="javascript:void(0);">MENU 5-2</a></li>
  <li><a href="javascript:void(0);">MENU 5-3</a></li>
  <li><a href="javascript:void(0);">MENU 5-4</a></li>
  <li><a href="javascript:void(0);">MENU 5-5</a></li>
  <li><a href="javascript:void(0);">MENU 5-6</a></li>
  <li><a href="javascript:void(0);">MENU 5-7</a></li>
  <li><a href="javascript:void(0);">MENU 5-8</a></li>
  <li><a href="javascript:void(0);">MENU 5-9</a></li>
  <li><a href="javascript:void(0);">MENU 5-10</a></li>
  </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- / #drop_menu --></div>

メニューの階層、タイトル、リンクなどは、CSSでドロップメニュー - Movable Type 備忘録を参考にご自身で書き直してください。

背景画像・メニュー幅・2カラムレイアウトを変更する際は、スタイルシートも変更してください。

StyleSheetです。

IE7.0 Firefox2.0 など
/*▼ wrapScroll ナビゲーションメニュー用▼ */
#drop_menu {
  width: 180px;                /*メニュー階層１幅①  */
  height: 160px;                /*メニュー項目数ｘ32（メニュー1項目の高さ）  */
  margin-left:10px;
  margin-top:5px;
  position: relative;
  font-size: 12px;
}
/*▼  メニューブロック  ▼*/
/*    ▼  メニュー階層１  ▼*/
div#drop_menu ul li a, div#drop_menu ul li a:visited {
  width: 180px;                /* メニュー階層１幅①  */
  height: 32px;                /* メニュー階層１高さ①  */
  display: block;
  text-decoration: none;
  line-height: 30px;              /*メニュー階層１高さ  */
  font-size: 15px;
  font-weight:bold;
  text-indent: 1em;              /*メニューのインデント*/
  color: #000;                /*メニュー階層１前景色  */
  background: #eee;              /*メニュー階層１背景色  */
  letter-spacing:1px;
  background-image: url(image/bg_menu.jpg);  /*メニュー階層１背景画像  */
}
div#drop_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
div#drop_menu ul li {
  margin-right: 1px;
  float: left;
  position: relative;
}
div#drop_menu ul li ul {
  display: none;
}
div#drop_menu ul li:hover a {
  color: #FFF;                /*ホバー時の前景色  */
  background: #4c597f;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
  background-position: 0 -32px;        /*ホバー時の背景画像位置指定  */
}
/*    ▲メニュー階層１▲*/
/*    ▼メニュー階層２▼*/
div#drop_menu ul li:hover ul {
  position: absolute;
  top: 0;
  width: 180px;                /*メニュー階層２幅  */
  left: 180px;                /*メニュー階層１幅  */
  display: block;
}
div#drop_menu ul li:hover ul li a.hide {
  color: #000;                /*入れ子メニュー前景色  */
  background: #4c597f;            /*入れ子メニュー背景色  */
  background-image: url(image/bg_menu.jpg);  /*入れ子メニュー背景画像  */
}
div#drop_menu ul li:hover ul li:hover a.hide {
  width: 180px;                /*メニュー階層２幅と同じ  */
}
div#drop_menu ul li:hover ul li ul {
  display: none;
}
div#drop_menu ul li:hover ul li a {
  width: 180px;                /*メニュー階層２幅と同じ  */
  display: block;
  color: #000;                /*メニュー階層２前景色  */
  background: #eee;              /*メニュー階層２背景色  */
  background-image: url(image/bg_menu.jpg);  /*メニュー階層２背景画像  */
}
div#drop_menu ul li:hover ul li a:hover {
  color: #fff;                /*ホバー時の前景色  */
  background: #a22041;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
}
div#drop_menu ul li:hover ul li:hover a.hide {
  color: #FFF;                /*ホバー時の前景色 親のみ  */
  background: #4c597f;            /*ホバー時の背景色 親のみ  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像 親のみ  */
  background-position: 0 -32px;        /*ホバー時の背景画像位置指定 親のみ  */
}
/*    ▲メニュー階層２▲*/
/*    ▼メニュー階層３▼*/
div#drop_menu ul li:hover ul li:hover ul {
  position: absolute;
  left: 180px;                /*メニュー階層２幅  */
  top: 0;
  display: block;
  color: #000;
}
div#drop_menu ul li:hover ul li:hover ul li a {
  width: 180px;                /*メニュー階層３幅  */
  display: block;
  color: #000;                /*メニュー階層３前景色  */
  background: #eee;              /*メニュー階層３背景色  */
  background-image: url(image/bg_menu.jpg);  /*メニュー階層３背景画像  */
}
div#drop_menu ul li:hover ul li:hover ul li a:hover {
  color: #fff;                /*ホバー時の前景色  */
  background: #769164;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
}
/*    ▲メニュー階層３▲*/
/*▲ ナビゲーションメニュー 終了▲ */
IE6.0以下用
div#drop_menu table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 0;
  z-index:100;
}
div#drop_menu ul li a.hide, div#drop_menu ul li a:visited.hide {
  display: none;
}
div#drop_menu ul li a:hover ul li a.hide {
  display: none;
}
div#drop_menu ul li a:hover {
  color: #FFF;                /*ホバー時の前景色  */
  background: #4c597f;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
  background-position: 0 -32px;        /*ホバー時の背景画像位置指定  */
}
div#drop_menu ul li a:hover ul {
  position: absolute;
  top: 0;
  display: block;
  width: 180px;                /*メニュー階層２幅 */
  left: 180px;                /*メニュー階層１幅  */
}
div#drop_menu ul li a:hover ul li a.sub {
  color: #000;                /*入れ子メニュー前景色  */
  background: #4c597f;            /*入れ子メニュー背景色  */
  background-image: url(image/bg_menu.jpg);  /*入れ子メニュー背景画像  */
}
div#drop_menu ul li a:hover ul li a {
  width: 180px;                /*メニュー階層２幅と同じ  */
  display: block;
  color: #000;                /*メニュー階層２前景色  */
  background: #eee;              /*メニュー階層２背景色  */
  background-image: url(image/bg_menu.jpg);  /*メニュー階層２背景画像  */
}
div#drop_menu ul li a:hover ul li a ul {
  visibility: hidden;
}
div#drop_menu ul li a:hover ul li a:hover {
  color: #fff;                /*ホバー時の前景色  */
  background: #a22041;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
}
div#drop_menu ul li a:hover ul li a.sub:hover {
  color: #FFF;                /*ホバー時の前景色 親のみ  */
  background: #4c597f;            /*ホバー時の背景色 親のみ  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像 親のみ  */
  background-position: 0 -32px;        /*ホバー時の背景画像位置指定 親のみ  */
}
div#drop_menu ul li a:hover ul li a:hover ul {
  visibility: visible;
  position: absolute;
  left: 180px;                /*メニュー階層２幅 + 1px  */
  top: 0;
  color: #000;
}
div#drop_menu ul li a:hover ul li a:hover ul li a {
  width: 180px;                /*メニュー階層３幅  */
  display: block;
  color: #000;                /*メニュー階層３前景色  */
  background: #eee;              /*メニュー階層３背景色  */
  background-image: url(image/bg_menu.jpg);  /*メニュー階層３背景画像  */
}
div#drop_menu ul li a:hover ul li a:hover ul li a:hover {
  color: #fff;                /*ホバー時の前景色  */
  background: #769164;            /*ホバー時の背景色  */
  background-image: url(image/bg_menu.jpg);  /*ホバー時の背景画像  */
}

参考サイト

CSSでドロップメニュー - Movable Type 備忘録
wrapScroll JavaScript Library - youmos

背景画像は海外サイトから頂いたのですが、何処だか忘れちゃいました。画像は少し加工しました。

動作確認

Win/IE 6.0, 7.0 Firefox 2.0 で動作確認しています。

ライセンス

wrapScroll：個人利用（非営利）の場合無償でご利用いただけます。
その他の場合はwrapScroll JavaScript Library - youmosのライセンスをご覧下さい。

CSSのドロップメニュー：フリーです。

このスクロールドロップメニューを利用した方は、使用報告掲示板に利用報告をお願いいたします。またSawa's Factoryへのリンクを張って頂けると嬉しいです。

カスタマイズ

有償（安価）にてメニュー階層のカスタマイズを致します。
カラムレイアウトの変更・メニュー幅の変更・背景画像の変更も承ります。
ご自分で設定できない、うまく動かないなど、お問い合わせからご相談ください。
こんなのが欲しいとリクエストがあれば掲示板またはお問い合わせに投稿お願いします。

更新履歴

2008年2月20日 公開
2008年 3月 2日 サンプル・ダウンロードをXHTMLに変更。