Square Menu

JavaScript

スクエアなアニメーション付きメニューを実装できるjQueryプラグイン「Square Menu」

Square MenuというjQueryプラグインを使えば、スクエアなアニメーション付きメニューを実装することができます。jQueryとCSS3を使って構築しています。実際のデモを見てみると、動作も滑らかでとてもいい感じです。

[ads_center]

Square Menuの使い方

Square Menuの使い方

jQuery Square Menu by Pete R. | The Pete Design

jQuery本体とダウンロードしたプラグインファイル(JS・CSS)をhead内に読み込み、以下のようにHTMLをマークアップします。

<div class="sidemenu">
    <nav class="left">
        <a href="...">...</a>
        <a href="...">...</a>
        <a href="...">...</a>
    </nav>
    <nav class="right">
        <a href="...">...</a>
        <a href="...">...</a>
        <a href="...">...</a>
    </nav>
</div>

そしてSquare Menuをセットします。

$(".sidemenu").square_menu({
    flyDirection: "bottom",
    button: "Menu",
    animationStyle: "vertical",
    closeButton: "X"
  });

アニメーション付きのスタイリッシュなメニューを実装したい時に活用してみたいですね。

関連記事

  1. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. Zoomerang.js
  5. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP