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. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  2. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  3. jQuery contextMenu plugin & polyfill
  4. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  5. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  6. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

コメント

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

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

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP