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. trolox(トロロックス)
  2. ホットコーヒー
  3. すぱじろうのたらことサーモンと千寿ねぎのすぱ
  4. 2022.09.14

    ボルダリング

PAGE TOP