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"
  });

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

新しいフリーのフォント集 2014・3前のページ

ヴィンテージなロゴのテンプレート30選次のページヴィンテージなロゴのテンプレート

関連記事

  1. Filterable Product Grid
  2. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  3. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  4. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  5. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  6. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP