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スライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  2. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  3. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  4. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  5. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  6. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP