スマホメニューとメニューリンクが重なる

どうもカトーです。

弊社はインフラメインの会社ですが、どうも最近サイト制作の依頼が来たりします。まぁIT企業だと少なからずそういう事が多いと思いますが、先日も「2020年版 見直すサイトコーディング 第2回 ヘッダー周り」の記事を書いたので、改めてこちらも備忘録代わりに掲載しておきますね。

概要として書いておくとBootstrap4でハンバーガーメニューがどうもテイストが合わなくて、良くあるスマホ用のハンバーガーメニューをいれたら、ホバーが被って作り直しただけですが参考までにどうぞ

 

よくあるハンバーガーメニュー

See the Pen
参考:ハンバーガーメニューホバー
by konica (@k-ato)
on CodePen.

なんてことないメニューだったのですが、開いた時に表示されっぱなしで、メニューしたのメニューのリンクが被ったとので、CSSのクラスに追加しただけです。

元の拾ってきたコードが見えない状況で開いている状態でしたのメニューと被ったという事ですね。

図にするとこんな感じです。

まぁ何が怖いかっているとスマホ用のハンバーガーメニューとBootstrapのヘッダー上部固定のSticky Topを使うと、z-indexがz-index: 1020;dだったりするので、z-index:999 とかで効かないとかなるわけですね。

 

メニューをクリックしたら閉じたい

See the Pen
スマホメニュークリックしたら閉じる
by kato (@k-ato)
on CodePen.

挙動としてどうかという話はさておき、メニューをクリックしたら、このスマホメニューは閉じたいものです。

active のクラスで有効なので、以下を追加しておきます。

 

 

最後に

書いてみまえば、なんてことないですが、なにかフレームワークを利用したり、汎用コードを利用すると少しデザイン修正が入ると面倒で1から書き直さないと逆に手間になりますね。モバイルファーストが言われてこのスマホメニューは必須になってるで、ここらへんで自分が使いやすいようにテンプレートでもつくりなおしてみようと密かにおもいましたよ。

 

 

 

 

 

最新情報をチェックしよう!
>システム構築・保守に特化した会社です。

システム構築・保守に特化した会社です。

システムの構築・保守運用「システムガーディアン」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG