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

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  4. HR Navigation Responsive Menu
  5. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP