スクロールアコーディオンメニュー

スクロール（スライド）するアコーディオンメニューです。
アコーディオンメニューは色々なライブラリが開発されてますが、今回はjQueryプラグインのAccordion Content/Menu Script(ddaccordion)を利用しアコーディオンメニューを作成しました。

特徴

アコーディオンメニュー

jQueryプラグインのAccordion Content/Menu Script（以下からddaccordionと呼ぶ）は、設定が分かりやすく簡単な上、機能は豊富。HTML&CSSでメニューを幾らでも加工できます。またCookieに開いたカテゴリを保存できる為、別のページに移動してもそのカテゴリのメニューが表示される機能があります。

スクロール

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

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

サンプル＆ダウンロード

サンプルはこちら。  色々なサンプルを用意してあります。

黒鯛倶楽部ではスクロールアコーディオンメニューを使用しています。

ダウンロード (scrooll_accordion_menu.zip)

設置方法

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

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

jquery,ddaccordion,wrapscroll、jsファイルのロード
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="wrapscroll.js"></script>

(注) ddaccordion.jsの下のクレジットは消さないようにとの事です。

ddaccordionメソッドの作成、wrapScrollオブジェクトの作成
<script type="text/javascript"><!--
ddaccordion.init({
  headerclass: "expandable",
  contentclass: "categoryitems",
  collapseprev: true,
  defaultexpanded: [0],
  animatedefault: false,
  persiststate: true,
  toggleclass: ["", "openheader"],
  togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
  animatespeed: "normal"
})
// wrapScroll
var mov = new wrapScroll('accordion_menu','container','header');
mov.marginTop = 5;  //上からのマージンを指定(px)
//--></script>

 

ddaccordionの解説

headerclass: "expandable",

カテゴリの追加class名を記述

contentclass: "categoryitems",

子メニューのclass名を記述。

collapseprev: true,

true:一つのカテゴリのみを開く。（一つを開くと開いていたカテゴリは閉じる。）
false:複数のカテゴリを開く事ができる。
全てのカテゴリを開いてしまうと、ブラウザの長さ・右コンテンツの量・長さによってはメニューの一部分が隠れてしまったり、wrapScrollが機能しない可能性があります。
メニュー項目が少ないのであればfalseでも可。

defaultexpanded: [0],

ロード後に開いておくカテゴリ。 []は全て閉じた状態。[0]-1番目、[1]-2番目をのカテゴリを開く 但し再訪問でクッキーが残っている場合は、クッキーの値が有効になる。
collapseprevをfalseにした場合は、複数カテゴリを開く事が可能。例、[0,1]

animatedefault: false,

ロード後に開くカテゴリまたはクッキーがある場合に、trueはアニメーションして開き、視覚的効果がある。falseはアニメーションせずに開く。

persiststate: true,

ブラウザのクッキーに開かれたカテゴリを登録するかどうか？
true：登録する。 false:登録しない。
登録すると他のページにジャンプした際、そのカテゴリが開かれる。なおクッキーはブラウザを閉じると消される。（Cookie有効期限未設定）

toggleclass: ["", "openheader"],

二つのCSS classを指定できる。最初は閉じている状態、次が開いている状態のclassを記述。["", ""]と省略する事も出来る。
ここでは開いているカテゴリの背景画像を変更しているので指定している。

togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],

これも上と同じように閉じている・開いている状態時に画像などを指定できる。便宜上ステータスアイコンと呼ぶ。
 ["suffix", "閉じた状態のアイコン" , "開いた状態のアイコン"]となる。["prefix", "", ""]とすると何も表示しない。
他にもこのような指定方法がある。
togglehtml: ["none", "", ""],
togglehtml: ["prefix", "[closed] ", "[open] "],
togglehtml: ["suffix", " <img src='close.gif' />", " <img src='open.gif' />"],
togglehtml: ["src", "minus.gif", "plus.gif"],

animatespeed: "normal"

カテゴリを開くアニメーションのスピード。"fast", "normal", or "slow"

wrapScrollの解説

var mov = new wrapScroll('accordion_menu','container','header');

wrapScrollを記述。詳しくはこちらをご覧下さい。

mov.marginTop = 5;

wrapScroll上マージンの指定。上部のマージンをpixel単位で指定することができます。

機能追加

(2008.03.19 追記)

ダウンロードしたファイルには ddaccordion_cookieexp.js と ddaccordion_cookiepath.js が含まれています。

ddaccordion_cookieexp.js

オリジナルは開いたカテゴリを記憶するcookieの有効期限未設定ですが、これはcookieの有効期限を追加設定したものです。ホームページのリピーターが多い場合に使うといいでしょう。ファイルをテキストエディタで開いて一番下の保存期間を設定してください。
以下のpathの設定もしてあります。pathの設定が不要なら path=/; を削除してください。

ddaccordion_cookiepath.js

これはHTMLファイルがディレクトリ階層にある場合、それぞれのディレクトリでcookieを保存してしまう為、開いたカテゴリの継承が上手く行きません。HTMLファイルがディレクトリ階層になっている場合に使うといいでしょう。有効期限は未設定です。

ご使用の際は ddaccordion.js とリネームして使ってください。

アコーディオンメニューのHTMLを記述します。

カテゴリ・メニューなどを記述してください。
<div id="accordion_menu">
<a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
<div class="menuheader expandable">カテゴリ 1</div>
<div class="categoryitems">
  <ul>
  <li><a href="#">MENU 1-1</a></li>
  <li><a href="#">MENU 1-2</a></li>
  <li><a href="#">MENU 1-3</a></li>
  <li><a href="#">MENU 1-4</a></li>
  <li><a href="#">MENU 1-5</a></li>
  <li><a href="#">MENU 1-6</a></li>
  </ul>
</div>
<div class="menuheader expandable">カテゴリ 2</div>
<div class="categoryitems">
  <ul>
  <li><a href="#">MENU 2-1</a></li>
  <li><a href="#">MENU 2-2</a></li>
  <li><a href="#">MENU 2-3</a></li>
  <li><a href="#">MENU 2-4</a></li>
  <li><a href="#">MENU 2-5</a></li>
  <li><a href="#">MENU 2-6</a></li>
  <li><a href="#">MENU 2-7</a></li>
  </ul>
</div>

<div class="menuheader expandable">カテゴリ 3</div>
<div class="categoryitems">
  <ul>
  <li><a href="#">MENU 3-1</a></li>
  <li><a href="#">MENU 3-2</a></li>
  <li><a href="#">MENU 3-3</a></li>
  <li><a href="#">MENU 3-4</a></li>
  </ul>
  <div style="text-align:center;padding:5px;"><img src="image/akafuji.jpg" width="150" /></div>
  <div style="padding:5px;font-size:11px;">メニュー内に写真を表示する事も可能です。</div>
</div>

<div class="menuheader expandable">サンプル</div>
<div class="categoryitems">
  <ul>
  <li><a href="collapseprev.html">複数のカテゴリを開く</a></li>
  <li><a href="defaultexpanded.html">開くカテゴリを固定</a></li>
  <li><a href="animatedefault.html">ロード後にアニメーションで開く</a></li>
  </ul>
</div>

<div class="menuheader" style="cursor: default">Always Displays</div>
<div style="padding:5px;font-size:11px;">
常に表示しておきたいテキスト・メールアドレス・カウンターなどをここに書く事が出来ます。<br />画像の挿入、リンクの設定、スタイルの指定も可能です。
</div>

<!-- / #accordion_menu --></div>

アコーディオンメニューのStyleSheetを記述します。

色々なデザインが出来るかと思います。ご自分で工夫して記述してください。
/* ▼　アコーディオンメニュー　▼ */
#accordion_menu{
  width: 180px; /*width of accordion menu*/
  background-color:#fff;
  letter-spacing:1px;
  margin:5px 10px;
}
/* アコーディオンのカテゴリの指定 */
#accordion_menu .menuheader{
  background-image: url(image/bg_menu.jpg);
  background-repeat: no-repeat;
  height:32px;
  margin-bottom: 3px;
  text-decoration: none;
  line-height: 32px;
  font-size: 16px;
  font-weight:bold;
  text-indent: 1.4em;
  color: #000;
  cursor: hand;
  cursor: pointer;
  /* ステータスアイコンを使用する場合 以下の2行が必要です。使用しない場合は削除しても構いません。 */
  display: block;
  position: relative;
}
#accordion_menu .menuheader:hover{
  color: #FF0;
}
/* openheader はカテゴリが開いている状態のCSS */
#accordion_menu .openheader{
  background-image: url(image/bg_menu.jpg);
  background-position: 0 -32px;
  background-repeat: no-repeat;
  color: #FFFFFF;
}
/* 子メニューの指定 */
#accordion_menu div.categoryitems ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
/*ステータスアイコンのCSS*/
#accordion_menu div.menuheader .statusicon{
  position: absolute;
  top: 10px;
  left: 5px;
  border: none;
}
#accordion_menu div.categoryitems ul li{
  padding-bottom: 2px;
}
#accordion_menu div.categoryitems ul li a{
  color: #A70303;
  background: url(image/arrow.png) no-repeat 2px 5px;
  display: block;
  padding: 2px 0;
  padding-left: 19px;
  text-decoration: none;
  border-bottom: 1px solid #dadada;
  font-size: 14px;
  font-weight: bold;
}
#accordion_menu div.categoryitems ul li a:visited{
  color: #A70303;
}
#accordion_menu div.categoryitems ul li a:hover{
  color: #A70303;
  background-color: #eee;
}
/* ▲　アコーディオンメニュー ▲　ここまで */

参考サイト

Accordion Menu script - Dynamic Drive(英語)
wrapScroll JavaScript Library - youmos

動作確認

Win/IE6.0 IE7.0 Firefox 2.0 で動作確認しています。

ライセンス

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

ddaccordion：個人利用、商用利用も可です。クレジットは削除しないように。

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

カスタマイズ

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

更新履歴

2008年3月19日 機能追加 ダウンロードファイルも更新
2008年2月25日 公開