スクロールアコーディオンメニュー 解説はこちら
Accordion-Menu & wrapScroll
色々なサンプルを作りましたのでご覧下さい。
サンプルはサンプルカテゴリ内にあります。
このサンプルは「クッキー有効、カテゴリを一つのみ開く、ロード後のアニメーション無し、クッキーが無ければサンプルカテゴリを開く」と設定してあります。
クッキー有効なので、他のカテゴリを開き、リロードしてみてください。
ダウンロードしたファイルには ddaccordion_cookieexp.js と ddaccordion_cookiepath.js が含まれています。
ご使用の際は ddaccordion.js とリネームして使ってください。
詳しくは解説の機能追加をご覧下さい。
Accordion-Menu & wrapScroll
JavaScript Code
<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>
<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>
Accordion-Menu HTML Code
<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" style="cursor: default">Always Displays</div>
<div style="padding:5px;font-size:11px;">
常に表示しておきたいテキスト・メールアドレス・カウンターなどをここに書く事が出来ます。<br />画像の挿入、リンクの設定、スタイルの指定も可能です。
</div>
<!-- / #accordion_menu --></div>
Accordion-Menu StyleSheet Code
/* ▼ アコーディオンメニュー ▼ */
#accordion_menu{
width: 180px;
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;
}
/*ステータスアイコンの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;
}
/* ▲ アコーディオンメニュー ▲ ここまで */
