JavaScript

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

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

[ads_center]

Material Menu

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

Material Menu

デモ

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

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

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

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

Material Menu

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

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

関連記事

  1. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

  2. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  3. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  4. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  5. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  6. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP