A.K.I. Home
SiteDev2 / 折りたたみメニュー機能
サンプル（パクリ元：ブログでもだいたい使えるHTMLタグ リファレンス）
※ちょうどいい画像を見つけ次第差し替えますので画像はご容赦を。。。
ミソはサブメニューをwiki記法にしてあるところ。
Wikiのリンク付けが使えるのです。
- 3のカテゴリ
- 4のカテゴリ
menu.js
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "button_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
buttonID.src='http://html.appelle.jp/image/close.gif';
}else{
objID.style.display='none';
objID.className='close';
buttonID.src='http://html.appelle.jp/image/open.gif';
}
}
テンプレートのヘッダ内に
<script type="text/javascript" src="/aki/menu.js"></script>
こんな感じでスクリプトタグを追加することで準備完了です。
sitedev2ページ内の記述
#html{{
<ul style="list-style-type:none">
<li><input type="image" src="http://html.appelle.jp/image/open.gif" id="button_3" onclick="show('3');"> 3のカテゴリ
<div id="layer_3" style="display: none;position:relative;" class="close">
}}
-test3-1
-test3-2
-test3-3
#html{{
</div>
<li><input type="image" src="http://html.appelle.jp/image/open.gif" id="button_4" onclick="show('4');"> 4のカテゴリ
<div id="layer_4" style="display: none;position:relative;" class="close">
}}
-test4-1
-test4-2
-test4-3
#html{{
</div>
</ul>
}}
※リスト下の空行は必須です。
これで上のように折りたたみメニューができます。
-test3-1 -test3-2 -test3-3
このへんを
-[[test3-1]]
このように書くことができるので、Wiki的にメニューを作っていけるはずです。
このページではjsファイルに分離せず
#html{{
<script>
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "button_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
buttonID.src='http://html.appelle.jp/image/close.gif';
}else{
objID.style.display='none';
objID.className='close';
buttonID.src='http://html.appelle.jp/image/open.gif';
}
}
</script>
}}
このようにhtmlプラグインを使っています。