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. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. Before and After image script
  4. Fluidbox

    JavaScript

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

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

  5. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  6. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP