【jquery】現在あるメニューをモーダルメニューにする

Javascript

ハンバーガーメニューを作成する時に現行サイトの修正だとサイトによって記述を変えることがあるので、汎用的なハンバーガーモーダルメニューを作成してみました。

1つのメニュー領域だけでなく複数のメニュー領域やサイドバーをモーダル内にタグ付けするだけで入れられるようにしています。

また、ページ内アンカーリンクに対しても対応してみました。

デモ

それぞれのソースは長いのですが重要なポイントを解説していきます。

jsは

〇モーダルの表示領域を作成して、そこにメニューを複製します。
〇ハンバーガーボタンに特定のクラスを付与して押下毎にクラスを付け替えます。
〇モーダルメニュー以外を押下した場合はメニューを閉じるようにする。
〇アンカーリンクの場合はモーダルを閉じてスクロールするようにする。

が主な処理となります。

他のハンバーガーメニューと違うのはモーダルの領域に既存のエリアを複製するという点です。

これによって既存のメニューを簡単にモーダル化することが可能になります。

また、デモではヘッダーメニューとサイドバーをモーダルメニューに入れる設定になっています。複数の領域をモーダルメニューに出来るということです。

 

CSSは後半がメニューに関連する部分ですが、モーダルメニューで問題になるスクロールバーの設定が冒頭に入っています。

これはモーダル内で画面高さを超える状態になるとスクロールバーが出たり、通常状態でスクロールバーがあると表示がずれるのを防ぐために、スマホ表示時は常に表示しないようにしています。

 

HTMLは全幅ヘッダー内にメニューと2カラム構成でサイドバーがある状態にしています。

オレンジ色の部分がハンバーガーでbodyの子要素になるように記述します。

青色の部分がモーダル内に入れたい部分で、class="go_menu_content"でくくります。

 

 

コメント

タイトルとURLをコピーしました