JavaScript

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

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

[ads_center]

Material Menu

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

Material Menu

デモ

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

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

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

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

Material Menu

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

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

関連記事

  1. JavaScript

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

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

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  3. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  4. jQuery cForm

    JavaScript

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

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

  5. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  6. Hamburger Icon Menu

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP