2022.03.29(Tue)

ブラウザの「戻る」ボタンで戻ると一瞬ドロワーメニューが表示されてしまう問題

こんにちは。

iMac 27 インチの新型を待ってたんですが発売されないみたいですね。

Apple 的には Mac StudioとStudio Display を買ってくれということみたいです。

60万円コースですよ。。。

どうしようかなと悩んでます。

さてと、本題に入ります。

スマホサイトでよく使われるドロワーメニュー。

ハンバーガーボタンをタップすると画面の右端からにゅるっと出てくる仕様が多いですよね。

仕組みはドロワーメニューを

.drawer-menu{
    transform: translate(-300px)
}

上記のように css の transform で隠しておいて、ハンバーガーメニューをタップした時に、ドロワーメニューに「open」等のクラスを追加。

クラスが追加されたら

.drawer-menu.open{
    transform: translate(0)
}

上記のように css を上書きしてドロワメニューを表示させるというような仕組みが多いと思います。

この仕組みのドロワーメニューの問題点として、ブラウザの「戻る」ボタンでページを前ページに戻ると、一瞬ドロワーメニューが表示されてしまうことがあります。

この場合 transform を使わずに、

.drawer-menu{
    right:-300px;
}

.drawer-menu.open{
    right:0;
}

上記のように position を使ってやると解決します。

transform は便利ですが、状況によって使い分けが必要ですね。

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。