カッコよく開閉できるサイドバー「PBB SideBar」
…ですが、そのままだとただ開閉するだけで、何もできませんでした。
そこで、MRBで少しコードを改修し、内容を直接HTMLで書き込めるようにしました。
仮にJavascriptがOFFになっていても、コンテンツの一部として普通に表示されます。
pbbsidebar.mrb.jsの他、mootoolsからmootools.jsをダウンロードしてください。
<script type="text/javascript" src="./mootools.js"></script>
<script type="text/javascript" src="./pbbsidebar.mrb.js"></script>
<script type="text/javascript">
window.onload = function() {
MySideBar = new PBBSideBar();
}
</script>
上記を記述したらアンカー要素などにonclick="javascript:MySideBar.display();を追記してください。
<a onclick="javascript:MySideBar.display();">Open/Close</a>
オプションは以下の通り。
例:
MySideBar = new PBBSideBar({
position : 'left',
styles: {
'width': '500',
'color': 'white',
'background-color': 'red',
'opacity': 0.6
},
showDuration: 500,
showEffect: Fx.Transitions.backOut,
hideDuration: 500,
hideEffect: Fx.Transitions.quadInOut
});
open/close
Firefoxなら、"A"を押しても開閉できます。
jsoutlineと相性が悪い、というか複数のwindow.onloadの問題(仕様)。