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

デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。
そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。
最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。
コンテンツをスライド表示させるJavaScript「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" //表示位置
});
});
コンテンツをスライド表示させるJavaScript「Slide box」サンプル

sponsors

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

記事作成:
記事URL:

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