BlockDesignに追加したモーダルウィンドウ風メニューを紹介します

三本線のアイコンをクリックすると画面いっぱいにメニューが表示される「モーダルウィンドウ風メニュー」を最近はよく見かけます。BiNDupでもスマホモードでは三本線のメニュー（通称：ハンバーガーメニュー）で表示されますが、最近良く見かけるケースはパソコンで見たときも三本線のメニューで表示されるようになっているデザインです。

上下や左右などに固定して表示しておきいつでもメニューを開けるような構成が多く、見ている人も「ここをクリックすればいつでもメニューが開く」と認識していることが多いと考えられるので、迷いにくいサイト作成に役立つ印象です。また、こんな感じのメニュー（モーダルウィンドウ風メニュー）にしたいというご要望は何件かお聞きしてきました。これはメガメニューのようにBiNDupの標準機能としてできることではないためBiNDupにどのように取り込むかを試行錯誤しながらブロックデザインを作成してみました。もちろんスマホ対応のレスポンスデザインです。

また、メニューボタンの色、モーダルウィンドウの背景色や文字色など、リソースエディタ内に取り込んでいただくCSSから簡単に変更できますので、ご自身のサイトのカラーイメージなどに合わせることが可能です。

※Block DesignはBiNDでの制作を請けている方、BiNDupセールスパートナーに登録されている方（個人・法人とも）のご利用はご遠慮いただいております。BiNDupによる制作を業としている方、BiNDupセールスパートナーの方（個人・法人とも）でBlockDesignのご利用を希望される方は、「BiNDism パートナー募集」をご覧ください。
https://bindism.com/partner/

BiNDで作るホームページ制作　バインドイズム – BiNDism
https://bindism.com

modal_001 既存ページにモーダルウィンドウ風メニューを簡単に組み込むブロックデザイン

modal_002 右上に設置したメニューボタンに合わせてコンテンツ右に余白を設けたブロックデザイン。

modal_003 右上に設置したメニューボタンに合わせてコンテンツ右に余白を設けたブロックデザインで、ページ背景に動画を指定したバリエーション。

Block Design

modal_001　既存ページにモーダルウィンドウ風メニューを簡単に組み込むブロックデザイン

modal_002　右上に設置したメニューボタンに合わせてコンテンツ右に余白を設けたブロックデザイン。

modal_003　右上に設置したメニューボタンに合わせてコンテンツ右に余白を設けたブロックデザインで、ページ背景に動画を指定したバリエーション。