開閉するサイドバーを作成するjavascript「PBB SideBar」

コンテンツを重視する観点から、メニューなどは必要に応じて開閉できると良いかもしれません。
PBB SideBarはエフェクト付きでサイドバーを開閉できるjavascriptです。

使用方法

PBB SideBarからpbbsidebar.v1.00.jsを、mootoolsからmootools.jsをダウンロードします。

<script type="text/javascript" src="http://yourdomain/mootools.js"></script>

<script type="text/javascript" src="http://yourdomain/pbbsidebar.v1.00.js"></script>

<script type="text/javascript">

window.onload = function() {

		MySideBar = new PBBSideBar();

	}

</script>

上記を記述したら何らかの要素にonclick="javascript:MySideBar.display();を付与すれば完成です。
<input type="submit" value="開/閉" onclick="javascript:MySideBar.display();">
またオプションとして以下のようなものがあります。

position：出る場所
width：幅（px）
background-color：背景色
opacity：透明度
showDuration：開く速度
showEffect：開くエフェクトの種類
hideDuration：閉じる速度
hideEffect：閉じるエフェクトの種類

例：

MySideBar = new PBBSideBar({

	position : 'right',

	styles: {

		'width': '400',

		'color': 'white',

		'background-color': 'red',

		'opacity': 0.6

	},

	showDuration: 500,

	showEffect: Fx.Transitions.backOut,

	hideDuration: 500,

	hideEffect: Fx.Transitions.quadInOut

});

サンプル

開く/閉じる

"A"を押しても開閉できます。
Javascriptサンプルページ一覧

skuare.net