コンテンツをスライド表示させるJavaScript「Slide box」

デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。
そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。
最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。

使用方法

Slide boxからslidebox.js、slidebox.cssを、jQueryからjquery.jsをダウンロードします。


<link rel="stylesheet" href="slidebox.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slidebox.js"></script>
<script>
$(document).ready(function(){
	$("#ID名").slideBox();
});
</script>

上記を記述後、指定したIDでスライド表示させたいコンテンツを書きます。
<div id="ID名">コンテンツ</div>
※オプション


$(document).ready(function(){
	$("#ID名").slideBox({
		width: "100%", //ボックス幅
		height: "200px",　//ボックス高さ
		position: "bottom" //表示位置
	});
});

サンプル

「開く」をクリックしてみてください。

Lorem lispum.
In blandit turpis.
Cras a mi at odio.
Vivamus egestas urna.
Furce gravida lectus.

Javascriptサンプルページ一覧

skuare.net