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. Relocator
  2. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  3. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  4. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  5. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  6. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP