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

サイトの要素として入れたいけど、あまり重要ではないけれど印象づけたい。
例えばサイトの概要をスライドインするコンテンツとして利用してみてはいかがでしょうか。
Jquery Side Contentを利用することで、簡単に導入することが可能です。
サイドからスライドインできるコンテンツを表示可能なJavaScript「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「Jquery Side Content」サンプル

sponsors

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

記事作成:
記事URL:

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