skuare.net

リストって概して味気ないですよね。
そんな部分を印象に残せたら、クリックしていただきやすくなるかもしれません。
jQueryプラグインのmobilyblocksなら、クリック時にエフェクトを伴い、華麗に表示できます。

使用方法
mobilyblocksからファイル一式をダウンロードします。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="mobilyblocks.js" type="text/javascript"></script>
<script>
$(function () {
$('.class名').mobilyblocks({
animateTime: 500, // アニメーション速度
zIndex: 50, // z-index
widthMultiplier: 1.15 //表示リストの大きさ
});
});
</script>

上記のように記述したら、リスト部分を以下のようにします。
<div class="class名">
<ul class="reset">
<li>1</li>
<li>2</li>
<li>3</li>
<!-- etc. -->
</ul>
</div>

また適宜CSSを調整していきます。
.class名 {
display:block;
width:20px; //クリックさせる領域の幅
height:20px; //クリックさせる領域の高さ
background: #CCC; //クリックさせる領域の背景（画像も可）
position:relative;
cursor:pointer;
}

ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}

ul.reset li {
position:absolute;
}

クリック時にリストを華麗に表示！jQueryプラグイン「mobilyblocks」サンプル