前の記事 «:phpspotのブログの間違いの指摘についての考え
次の記事 »:WordPressのロゴを美しく輝かせるPhotoShopチュートリアル

クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」

2007年10月23日

スポンサード リンク

Image Menu

クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。
メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。



画像を変えれば、よりクールなメニューを作れそうですね。

必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。

<h2>Example:</h2>
    <div id="kwick">
        <ul class="kwicks">
            <li class="kwick opt1"><span>Lanscapes</span></li> 
            <li class="kwick opt2"><span>People</span></li> 
            <li class="kwick opt3"><span>Nature</span></li> 
            <li class="kwick opt4"><span>Urban</span></li> 
            <li class="kwick opt5"><span>Abstract</span></li> 
        </ul> 
    </div>
<script type="text/javascript">
    var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>

メニュー部分はCSSでデザインできて、HTMLもクリーン。
これはなかなか使えそう。

スポンサード リンク

投稿者 KJ : 2007年10月23日 07:09 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。