【レスポンシブ化】ハンバーガーとアコーディオンのコラボ

どうもお久しぶりです。

今回は仕事で使ったハンバーガーメニューとアコーディオンのコラボの備忘録を残しておきます。

さらに言えば、アコーディオンで開いたメニューをオーバーレイさせたので、そこまで備忘録として残しておこうか・・・そこは悩み中です。

今回の使用環境

今回使用したのは、会社の環境なので、普段の自宅用の環境とは多少違うので、再現できるようにこちらも残しておきます。

  • Mac book pro ver.不明
  • Vagrant ver.1.9.3
  • Dream Weaver ver.2017CC

以上が基本的な環境です。

今回のお仕事は、もともとDreamWeaverで作られたホームページのレスポンシブ化ということでした。
ほぼほぼのページのレスポンシブ化はWidthを調整したり、floatの解除などをするだけでよかったのですが、問題はNavigationの部分でした。

このNavigationの部分ですが、DreamWeaverのテンプレート機能を使って作られていたので、ちょっと面倒・・・。
テンプレート機能うんぬんは今回は説明しませんが、テンプレートを編集して、Navigationをスマホ用のホームページでよくあるようなハンバーガーメニューにして、メニューをアコーディオンで開くという形にしてほしいということだったので、それを行いました。
 

ハンバーガーメニューの作成

 

今回参考にしたハンバーガーメニューはCSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 101. 中央ラインがサークルに変形を使いました。

ソースは上記のサイトにあります。
そして、jQueryを使用して、ハンバーガーメニューをクリックしたらアコーディオンが開くようにします。

 

 

 

これがそのjQueryです。
menu-triggerを囲んでいるdivクラスのnav_btnがクリックされたら、mobile_navigationというアコーディオンで開きたいクラスをslidetoggleで(‘slow’)にしているので、ゆっくりと開くという動きをつけています。

また、ボタン自体にクリック時のエフェクトをつけたいので、menu-triggerにtoggleclassをつけ、nav_btnがクリックされたらactiveにし、active時のCSSを書いてあげます。

これでハンバーガーメニューをクリック→アコーディオンでメニュー表示ができるようになります。
 

アコーディオンメニューをオーバーレイして表示

 
ここまでで、ハンバーガーメニューをクリックしたらアコーディオンでメニューが表示されるようにはなりましたが、このままだと、メニューの下にあるメイン画像やコンテンツなどがメニューに押されて、崩れてしまったり、表示位置がずれてしまったりするので、アコーディオンで表示したメニューがそのままページ上部で開けるように、他のコンテンツに対して影響を及ぼさないようにします。

今回はそれを解決するために、ただ端にオーバーレイ表示させただけです!笑

これはCSSでz-indexを書いてあげるだけで、他のコンテンツの上にオーバーレイするようになります。

 

 

z-indexはボックスの重なりの順序を指定するときに使用するプロパティで、z-indexの値が大きいほど上に重なり、小さいほど下にいくという動きをします。
値は、整数で指定し、0が基準となり整数が大きくなればなるほど上にボックスを表示させることができます。
このz-indexはボックスのpositionにstatic以外の要素が指定されているときにしか使うことができないので、注意が必要です。

また、コンテンツをオーバーレイ表示させたときに、下のコンテンツも透けて見えるようにアコーディオンメニューのbackground-colorにbackground-color: rgba(255,255,255,0.86);で白系の半透明の背景色を設定しておきます。

rgbaではカラーの他に透明度を設定できるので便利なのですが、自分はどうしてもカラーコードばかり使ってしまう傾向にあるので、今回のレスポンシブ化を機にrgbaも使いこなしていかないとですね・・;;

レスポンシブ化を行うにあたって、このハンバーガーメニュー、アコーディオン、コンテンツのオーバーレイはかなり使うので、覚えておくと便利ですねぇ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です