ハンバーガーメニューの作り方で左右どちらかの出現で、positionを使いたくない。

Question

<div id="sp"> <span></span> <span></span> <span></span> このタグでハンバーガーメニューを作りたいです。 現在ポートフォリオでメニューが右から出現させる予定ですが、固定にしたくないのでposition:fixed;は使いたくないです。 あと、ランディングページにしますのでメニューをクリックしたら別ページに飛ぶのではなく、下にスクロールする形にしたいです。 そこで重要なのは、スクロール後にメニューが消えている状態にしたいです。 よろしくお願いします。

Answer 1

このタグでハンバーガーメニューを作りたい

ググってみるといいかもしれません。

ハンバーガーメニュー css - Google 検索

---

現在ポートフォリオでメニューが右から出現させる予定ですが、固定にしたくないのでposition:fixed;は使いたくないです。

ビューポートを基準にしなくてはいけないので、fixed がダメならば、absolute でルート要素を包含ブロックにする以外にないと思います。

と思いましたが、よく考えると何らかの方法で右寄せして translate(100%) でもいいかもしれません。親要素がビューポートいっぱいに広がっている前提ですが。

---

スクロール後にメニューが消えている状態にしたい

既出です。

ハンバーガーメニュー　ページ内リンクに関連する質問・回答の検索結果(1ページ目)｜teratail

ハンバーガーメニュー　ページ内リンク - Google 検索

Answer 2

質問があいまいで回答のしようがありませんが
position:absoluteでrightを設定するとか？