Zenn
💬

【CSS】ハンバーガーメニューの微調整（2022年12月1日業務報告）

2022/12/01に公開
CSS
HTML
PHP
tech

ハンバーガーメニューで下線を最後の項目にだけ引かない

メニューにborder-bottomで下線を引いたのですが、親メニューと子メニューで下線が重なる部分がでてきてしまったので、これを修正したい。
下線が重複

【対応】
１．親子に共通で当たっているborder-bottomを、親要素、子要素でそれぞれで当たるようにする。

.menu-content ul > li {
    border-bottom: solid 1px #ffffff;
}

↓↓↓↓↓↓

/* main-menu = 親メニューのクラス名 */
.menu-content ul.main-menu > li { 
    border-bottom: solid 1px #ffffff;
}
/* sub-menu = 子メニューのクラス名 */
.menu-content ul.sub-menu > li {
    border-bottom: solid 1px #ffffff;
}

２．子メニューの最後の要素にだけ下線を引かない
リストの最後の項目（Web開発）にだけ下線を引かないように、対象が子メニューのコードのliにnot(:last-child)を記述する。

.menu-content ul.sub-menu > li:not(:last-child) {
    border-bottom: solid 1px #ffffff;
}

これで希望通りの表示になりました＾＾
下線が重複を改善
 

展開したメニューを右端にピッタリとくっついて表示されるようにしたい

参考にしたサイトだとメニューが格納されているdivを
left: 100%で隠して、表示するときにleft: 30%;としていたが、これだと画面サイズによってメニューが表示される位置が変わってしまった。

そのため、right: -100%;で隠して、表示はright: 0%;とすることで、常時右端にピッタリとくっついた状態で表示させることができました。
常に右端
 

メインビジュアルを画面サイズに合わせていい感じに表示したい

サイズ767px以下用に別の画像ファイルを用意して、そちらを表示させることにする。
メインビジュアルの切り替え
 

ハンバーガーメニューがGoogleMapの上だと反応しない

トップページに会社のアクセス情報としてGoogleMapを設置したが、ハンバーガーメニューがマップと重なっている状態だと反応しなくなる問題を解決する。
ハンバーガーメニューが反応しない

【対応】
ハンバーガーメニューが前面にあるにも関わらず、タップ反応がマップの方に出ているので、マップ状をタップしても反応しないようにpointer-events: none;を指定することでメニューの動作を確認。
･･･が、これだと普通にマップの操作ができなくなるのでダメだわ。
とりあえず後回し。
 

住所の改行をレスポンシブで変える

「東京都千代田区千代田1-1-1 皇居」
画面サイズ767px以下では皇居部分を改行させたい。

【HTML】

<p>東京都千代田区千代田1-1-1<br class="br-tag">皇居</p>

【CSS】

/* 通常時 */
.br-tag{
    display: none;
}
/* 画面サイズ767px以下のとき */
@media screen and (max-width: 767px) ｛
    footer .footerleft .br-tag {
        display: block;
    }
｝

 

フッターの内容を画面サイズで自動的に改行させたい

結構悩んでしまったが、flex-boxの要素にmax-widthとwidthを指定したらできた。

footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* 幅が足りないときは折り返す */
}
footer  > div {
    max-width: 400px;
    width: 100%;
}

flex-boxには３つのdiv（会社情報、メニュー、問い合わせボタン）が入っているので、下限幅400pxとして３つ以上表示できないときは自動的に改行するようにした。
 

ハンバーガーメニューの微調整

  • アイコンをもう少し小さく
  • メニューの表示位置を下に移動
     

【修正前／修正後】
ハンバーガーメニュー比較
 

メモ

  • ブラウザ上で画像を並べて見比べられるサービス
    上記の「ハンバーガーメニューの微調整」の画像を作成するのに、画像を横並びにしたかったがzennではそのような機能が無いみたいです。
    そのため簡単に画像を横並びに表示してくれるサービスを探したところ、ずばりそのものといったサービスがありました。
    https://2ndart.hatenablog.com/entry/2019/07/27/164241

Discussion