JavaScript

サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」

Material Menuはサイドからスライド開閉するレスポンシブ対応のメニューを実装することができるjQueryプラグインです。デモでは開閉するパネルはシンプルなデザインですが、パネル下にシャドウがついたりとちょっとした立体感を感じさせる作りになっています。

[ads_center]

Material Menu

以下はMaterial Menuの実際のデモになります。

Material Menu

デモ

ブラウザの幅を縮めていき下へスクロールして行くと、メニューがアイコンに切り替わります。

アイコンをクリックすると左からメニューがスライドオープンしてきます。パネルが開かれている状態でパネルの外をクリックするとメニューがクローズします。

モバイル時にメニューアイコンに切り替わった時はメニューパネルが隠れているので、コンテンツの邪魔になりません。

開閉するアニメーションもスッと横から出てくるのでほとんどストレスを感じさせないところがいいですね。

Material Menu

CaptionerJs画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」前のページ

フェードやフリップなどのアニメーションでページ表示ができるjQueryプラグイン「Animsition」次のページAnimsition

関連記事

  1. Babylon Grid
  2. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  3. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  4. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  5. jQuery Floating Social Share
  6. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP