ドロワーメニューのページ内リンクについて

Question

いつも大変お世話になっております。

楽天で制作中のスマホページ
https://www.rakuten.ne.jp/gold/●●●●/top/index_sp.html

にて２点質問させてください。

①
ドロワーメニューのページ内リンク遷移について
メニューからページ内遷移したときに、ドロワーメニューを閉じるには
どうしたらよいでしょうか。

②
①のときに遷移したページ上部が固定ヘッダーに隠れて見えなくなってしまいます。
リンク先に移ったときに固定ﾍｯﾀﾞｰ分ずらすにはどうしたらよいでしょうか。

お忙しいところ恐れ入りますがご回答の程宜しくお願いいたします。

Answer

ECマスターズの塚本です。

いただいた以下件名のご質問ですが、

　ドロワーメニューのページ内リンクについて

本日担当が休みをとっておりますので、
回答が明日となる予定です。

お急ぎのところお時間いただきますが、
回答までお待ちいただければと思います。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。


> １．
> ドロワーメニューのページ内リンク遷移について
> メニューからページ内遷移したときに、ドロワーメニューを閉じるには
> どうしたらよいでしょうか。

ページ内遷移するリンクのタグに
onClick="(function(){document.querySelector('#navTgl ~ .close').click();})();"
を追記していただくことで、
リンククリックと同時に閉じるボタンを押す動作を加えることができます。


> ２．
> １．のときに遷移したページ上部が固定ヘッダーに隠れて見えなくなってしまいます。
> リンク先に移ったときに固定ヘッダー分ずらすにはどうしたらよいでしょうか。

ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック
https://www.tomotanuki.com/entry/web-in-page-link-fixed

上記ページにて紹介されている、
下記スタイルシートを、ページ内に適用してください。

= この下の行から ====================
a[name]::before {
    content: "";
    display: inline-block;
    height: ヘッダーの高さpx;
    margin-top: -ヘッダーの高さpx;
    vertical-align: top;
}
= この上の行まで ====================

margin-topには、マイナスの値をご設定ください。
クルークさんのショップの場合は、height: 89px; margin-top: -89px; となります。

なお、この方法では、Firefox上での動作を改善することはできませんので
予めお含みおきください。

Answer

お世話になっております。
いただいたタグで修正することができました。
大変助かりました。ありがとうございます。

すみません、もう１点質問がありますので別スレッドにて
質問させていただきます。
こちらは急ぎではないのでお手すきのときにご確認いただきたいです。
宜しくお願いいたします。