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. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  2. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  3. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  4. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  5. Create a month picker jQuery plugin

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP