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内にメニューコンテンツを入れていきます。メニュー自体の作成は自由度も高そうなので、自サイトにも合わせやすそうですね。
レスポンシブに対応した美しいオーバーレイメニューを実装したい方は、是非チェックしてみてください。
