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

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  2. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  3. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  4. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  5. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  6. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP