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のページで確認することができます。

ダリアの花を見に行ってきた前のページ

Macで複数の画像を一括でリサイズできるアプリ「ImageXY」次のページImageXY

関連記事

  1. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  3. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  4. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  5. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  6. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP