Responsive overlay menu

JavaScript

美しいオーバーレイメニューを実装できる「Responsive overlay menu」

Responsive overlay menuはレスポンシブに対応した美しいオーバーレイメニューを実装することができるフレームワークです。画面全体にオーバーレイがかかり、その中に好きなメニューを作成することができます。

Responsive overlay menu

デモ

右上にあるハンバーガーメニューをクリックすると、フェードで画面全体にオーバーレイがかかりメニューが表示されます。

余白をたっぷり取ってあるので、スッキリして見やすいデザインですね。レスポンシブなのでスマホからでも見やすいです。

ベースとなるマークアップはこんな感じです。

<div class="menu-btn">
    <a class="btn-open" href="javascript:void(0)"></a>
</div>
<div class="overlay">
<!-- ここにコンテンツ -->
</div>

overlayというクラスがついたdiv内にメニューコンテンツを入れていきます。メニュー自体の作成は自由度も高そうなので、自サイトにも合わせやすそうですね。

Responsive overlay menu

関連記事

  1. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  2. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  3. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  4. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  5. Bootstrap Mobile FullScreen Modal
  6. Relocator

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP