JavaScript

巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりできるjQueryプラグイン「Makisu」を使ってみました。アニメーションが見ていてとても面白いですね。レストランのメニューをこれで実装したりすると面白そうだなって思いました。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<link rel="stylesheet" href="css/style.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="js/makisu.js"></script>

HTMLはこんな感じで。

<dl class="list sample">
    <dt>sample</dt>
    <dd><a href="#">list1</a></dd>
    <dd><a href="#">list2</a></dd>
    <dd><a href="#">list3</a></dd>
    ・・・略・・・
</dl>

で、Makisuをセットします。

<script>
$('.sample').makisu({
    selector: 'dd',
    overlap: 0.85,
    speed: 1.7
});

$('.list').makisu('open');
</script>

こんな感じでCSSの3Dドロップダウンを簡単に実装することができます。他にもtoggleを使えばボタンを押す度に開いたり閉じたりすることもできるので、オプションや詳しい使い方なんかはGitHubのページで確認することができます。

関連記事

  1. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  6. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP