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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives