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プラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  2. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  3. jQuery_Overlay_Menu
  4. no-image
  5. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  6. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP