レスポンシブ時のハンバーガーメニューの挙動がおかしいです。

Question

##現状
レスポンシブ時、ハンバーガーメニューを開いた直後、closeボタンの位置が右から左に押し出されてしまいます。
これを押し出されないようにしたいのですが、検証画面でいじってみてもなかなかうまくいきません。

添付したキャプチャのように、closeボタンの位置を動かすとメニュの中身まで一緒にズレてしまいます。
添付キャプチャ

##自分なりの推測
・基礎の理解が不十分であり、順不同なコードの書き方をしてしまっているため
・Jqueryを指定している箇所にsassで擬似要素を書いているため？（そのせいで時々動作しないことがあると、コード記述の参考にした本に書いてありました）

コード

サイト

ヒントだけでも頂けると嬉しいです。
よろしくお願いいたします。

Answer 1

#回答

.openbtn.active{
    position: relative;
    top: 5px;
    left: 85%;
  }

初めまして、WEB作成頑張っているみたいですね！
さて、今回ですが自分自身、コード解析ができておらず見た目上だけでよいのでしたらこちらのコードを追加すればCloseボタンの位置は開いた時の位置と同じ位置にすることができました。
CloseボタンのClassがopenbtn.activeと指定されていたのでpositionの指定をしました。
もっと良いやり方もあるかもしれないので色々な方法で試してみてください。

---

レスポンシブデザインを目指すのであれば、コードの見直しは多くあります。が基本部分はとてもよくできていると思いますのでゆっくりでいいので時間がある時に見直してみてください。
例)
・width,heightの指定はpxでなく%を使う。(画面の大きさによっては大きくなりすぎる場合があるので、その時はmin-widthやmax-widthをpxで指定。)
・FlexBoxを用いたレスポンシブデザイン。
・フレームワークを用いる。(有名なものだとBootStrapｍのグリッドシステムなど。)
etc...

知識が増えるとできることが多くなってとても楽しいので頑張ってください！

Comments

[Katy6879]

＞mamemaru様、
初めまして！＾＾
貴重なお時間の中、アドバイスいただきありがとうございます。

早速上記のコードを入れて見たところ、１発で反映してくれました...！
本当にありがとうございます！！

私の書いたコードでは、解析するのはすごく難しいのだろうなと思っておりましたので、はっきりとご指摘いただけてありがたい限りです。

一旦自分の中ではポートフォリオ作成を一区切りとしますが、アドバイスいただいたように、position部分の他の方法や、レスポンシブの書き方、width,heightの指定方法を統一していくなど、勉強しながら修正していこうと思います。

質問の仕方が悪かったせいか、なかなか回答がつかず、詰んでいたのですが、こんなにわかりやすく教えていただけた上、励ましのコメントまでいただけて本当に嬉しかったです（ ; ; ）！

ゆっくりだと思いますが、学習をやめずに続けていきます。
この度は本当にありがとうござました＾＾