サムネイル付きのボックスをサイドからスライドさせるjQuery

Ads

ちょっと使う予定が出来るかもなので
メモ。サムネイル付きのメニューが
マウスオーバーでサイドからスムー
ズにスライドします。css3も使用して
いますが、シャドウと角丸だけみたい
ですね。

マークアップも簡単っぽいので備忘録としてエントリーします。

Related Posts and CSS3

jquery02
サイドにサムネイル付きのバーが隠されていて、マウスを乗せることでコンテンツがスライドします。

マークアップは以下のような感じ。

<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span class="rp_title">Post Title</span>
<span class="rp_links">
<a target="_blank" href="#">Article</a>
<a target="_blank" href="#">Demo</a>
</span>
</div>
</li>
...
</ul>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>

div要素ごとスライドさせるみたいですね。応用すれば面白そう。以下よりDL出来ます。

Related Posts Slide Out Boxes with jQuery and CSS3