サイドからスライドインできるコンテンツを表示可能なJavaScript「Jquery Side Content」

サイトの要素として入れたいけど、あまり重要ではないけれど印象づけたい。
例えばサイトの概要をスライドインするコンテンツとして利用してみてはいかがでしょうか。
Jquery Side Contentを利用することで、簡単に導入することが可能です。

使用方法

Jquery Side Contentからファイル一式をダウンロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.sidecontent.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").sidecontent();
});
</script>

次に上記で指定したid名でサイドコンテンツを記述します。


<div id="id名">
	サイドコンテンツ
</div>

最後にCSSで見た目を調整すれば完成です。


<style>
#sidecontent {
	background-color: black;
	color: White;
	width: 33%;
	float: right;
}
#sidecontent div {
	padding: 2%;
	cursor: default;
	height: 96%;
}
.sidecontentslider {
	background-image: url(a.png);
	padding-left: 30px;
	cursor: pointer;
}
.sidecontentslider:hover {
	background-image: url(b.png);
}
.sidecontentslider.expanded {
	background-image: url(c.png);
}
.sidecontentslider.expanded:hover {
	background-image: url(d.png);
}
</style>

サンプル

右の矢印をクリックして下さい。

サイドコンテンツ

ええやろ？

Javascriptサンプルページ一覧

skuare.net