cssのtransformを使ってドロワーメニューを作成しましたが画面幅が整わない

こちらは以前の質問の続きです。→ハンバーガーメニューの横に画像を並べて真ん中に表示したい。

cssのtransformを使ってドロワーメニューを作成しましたが画面幅が整わないです。
クリックした時に横からドロワーメニューが出てくるのですが、
ドロワーメニューの幅の分だけ画面幅が広がってしまっています。
なぜでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9      <!--Bootstrap CSS-->
10      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
11      <!--CSS-->
12      <link rel="stylesheet" href="style.css">
13      <!--Fontawesome-->
14      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
15    <title>Document</title>
16</head>
17<body>
18  <div class="p-2 text-center">
19    <a href="#"><img class="header-image" src="https://picsum.photos/id/1/100/200" alt=""></a>
20    <div class="el_humburger"><!--ハンバーガーボタン-->
21        <div class="el_humburger_wrapper">
22            <span class="el_humburger_bar top"></span>
23            <span class="el_humburger_bar middle"></span>
24            <span class="el_humburger_bar bottom"></span>
25        </div>
26    </div>
27</div>
28<header class="navi" style="background-color: #f7f8f8;"><!--ナビゲーション-->
29    <div class="p-2" style="background-color: #f1f4ff; font-size: 18px;">
30        メニュー
31    </div>
32    <div class="p-4" style="background-color: #f7f8f8;">
33        <form class="search_box text-center" action="">
34            <input type="text" class="search_box" placeholder="サイト内検索">
35        </form>
36    </div>
37    <div class="navi_inner">
38        <div class="navi_item">
39            <a class="navi_menu" href="">ホーム
40            </a>
41        </div>
42        <div class="navi_item">
43            <a class="navi_menu" href="">お問い合わせ一覧  
44            </a>
45        </div>
46        <div class="navi_item">
47            <a class="navi_menu" href="">アクセス  
48            </a>
49        </div>
50        <div class="navi_item">
51            <a class="navi_menu" href="">サイトマップ 
52            </a>
53        </div>
54        <div class="navi_item">
55            <a class="navi_menu" href="">ENGLISH 
56            </a>
57        </div>
58        <div class="navi_item navi_item_last">
59            <a class="navi_menu" href="">採用情報
60                <div class="d-inline">
61                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
62                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
63                    </svg>
64                </div>   
65            </a>
66        </div>
67    </div>
68</header>
69<!--スマホ用のNavbar-->
70    <!--CDNでjQuery読み込む-->
71    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
72    <script type="text/javascript" src="script.js"></script>
73</body>
74</html>

CSS
1@charset "utf-8";
2  /*ハンバーガーボタン*/
3  .el_humburger {
4    position: absolute;
5    top: 45px;
6    right: 60px;
7    width: 46px;
8    height: 25px;
9    padding-top: 1px;
10    -webkit-box-sizing: border-box;
11    box-sizing: border-box;
12    padding-top: 0px;
13   z-index: 10;
14    cursor: pointer;
15    pointer-events: auto;
16    color: #000;
17    text-align: center;}
18  @media screen and (max-width: 840px) {
19    .el_humburger {
20      display: block;
21      right: 0;
22      top: 27px;
23      padding-top: 20px;
24      width: 70px;
25      height: 70px;}
26      #factory .el_humburger {
27        display: none; } }
28  .el_humburger_wrapper {
29    margin-bottom: 5px;
30    width: 42px;
31    display: inline-block; }
32  @media screen and (max-width: 840px) {
33    .el_humburger_wrapper {
34      margin-bottom: 5px;
35      width: 30px; } }
36  .el_humburger_text {
37    font-size: 12px;
38    letter-spacing: 0.1em;
39    font-family: "游ゴシック Medium", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }
40  .js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
41    display: none; }
42  .el_humburger_text.el_humburger_text__close {
43    display: none; }
44  .js_humburgerOpen .el_humburger_text.el_humburger_text__close {
45    display: block; }
46  @media screen and (max-width: 840px) {
47    .el_humburger_text {
48      font-size: 10px;
49      padding-top: 2px; } }
50  @media screen and (max-width: 840px) {
51    .el_humburger_text svg path {
52      -webkit-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
53      -o-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
54      transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
55      fill: #000; } }
56  @media screen and (max-width: 840px) {
57    .js_humburgerOpen .el_humburger_text svg path {
58      fill: #000; } }
59  .el_humburger span.el_humburger_bar {
60    display: block;
61    width: 100%;
62    margin: 0 auto 9px;
63    height: 1px;
64    background: #000;
65    -webkit-transition: all .2s ease-in-out;
66    -o-transition: all .2s ease-in-out;
67    transition: all .2s ease-in-out; }
68  .el_humburger span.el_humburger_bar:last-child {
69    margin-bottom: 0; }
70   
71  .js_humburgerOpen .el_humburger span.el_humburger_bar {
72    background: #000; }
73   
74  @media screen and (max-width: 840px) {
75    .el_humburger span.el_humburger_bar {
76      left: 0;
77      top: 0;
78      background: #000; } }
79   
80  .js_humburgerOpen .el_humburger span.el_humburger_bar.top {
81    -webkit-transform: translateY(9px) rotate(-45deg);
82    -ms-transform: translateY(9px) rotate(-45deg);
83    transform: translateY(9px) rotate(-45deg); }
84   
85  .js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
86    opacity: 0; }
87   
88  .js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
89    -webkit-transform: translateY(-11px) rotate(45deg);
90    -ms-transform: translateY(-11px) rotate(45deg);
91    transform: translateY(-11px) rotate(45deg); }
92   
93  .el_humburgerButton.el_humburgerButton__close {
94    top: 2%;
95    right: 2%; }
96   
97  .el_humburgerButton__close span.el_humburger_bar {
98    display: block;
99    width: 35px;
100    margin: 0 auto;
101    height: 4px;
102    background: #000; }
103   
104  .el_humburgerButton__close span.el_humburger_bar.top {
105    -webkit-transform: translateY(5px) rotate(-45deg);
106    -ms-transform: translateY(5px) rotate(-45deg);
107    transform: translateY(5px) rotate(-45deg); }
108   
109  .el_humburgerButton__close span.el_humburger_bar.bottom {
110    -webkit-transform: translateY(-6px) rotate(45deg);
111    -ms-transform: translateY(-6px) rotate(45deg);
112    transform: translateY(-6px) rotate(45deg); }
113   
114  .navi {
115    position: absolute;
116    margin-top: -80px;
117    right: 0;
118    height: 200%;
119    background-color: white;
120    width: 450px;
121    z-index: 3;
122    -webkit-box-sizing: border-box;
123    box-sizing: border-box;
124    -webkit-transition: all 600ms ease-out;
125    -o-transition: all 600ms ease-out;
126    transition: all 600ms ease-out;
127    transform:translateZ(0) translateX(100%);
128    overflow: auto; }
129    .js_humburgerOpen .navi {
130      transform:translateZ(0) translateX(0); }
131      @media screen and (max-width: 840px) {
132        .navi {
133          padding: 100px 5% 0; }
134        .js_humburgerOpen .navi {
135          width: 100%;} }
136   
137  .navi_item {
138    font-size: 20px;
139    font-family: "Marcellus", serif !important;
140    white-space: nowrap;
141    padding: 10px 0px;
142  border-top: solid 1px #aaa;
143    margin-left: 90px; }
144    .navi_item.op_innerLink {
145      cursor: pointer; }
146    @media screen and (max-width: 840px) {
147      .navi_item {
148        margin-left: 0px;
149        font-size: 15px; } }
150
151.search_box {
152    width: 330px;
153}
154
155.header-image {
156    height: 50px;
157    width: 150px;
158    z-index: -1;
159}
160
161.navi_inner {
162    background-color: #fff;
163}
164
165.navi_item_last {
166  border-bottom: solid 1px #aaa;
167}
168
169.navi_menu {
170  margin-left: 10px;
171}

javascript
1//変数定義
2var navigationOpenFlag = false;
3var navButtonFlag = true;
4var focusFlag = false;
5
6//ハンバーガーメニュー
7    $(function(){
8
9      $(document).on('click','.el_humburger',function(){
10        if(navButtonFlag){
11          spNavInOut.switch();
12          //一時的にボタンを押せなくする
13          setTimeout(function(){
14            navButtonFlag = true;
15          },200);
16          navButtonFlag = false;
17        }
18      });
19      $(document).on('click touchend', function(event) {
20        if (!$(event.target).closest('.navi,.el_humburger').length && $('body').hasClass('js_humburgerOpen') && focusFlag) {
21          focusFlag = false;
22          //scrollBlocker(false);
23          spNavInOut.switch();
24        }
25      });
26    });
27
28//ナビ開く処理
29function spNavIn(){
30  $('body').removeClass('js_humburgerClose');
31  $('body').addClass('js_humburgerOpen');
32  setTimeout(function(){
33    focusFlag = true;
34  },200);
35  setTimeout(function(){
36    navigationOpenFlag = true;
37  },200);
38}
39
40//ナビ閉じる処理
41function spNavOut(){
42  $('body').removeClass('js_humburgerOpen');
43  $('body').addClass('js_humburgerClose');
44  setTimeout(function(){
45    $(".uq_spNavi").removeClass("js_appear");
46    focusFlag = false;
47  },200);
48  navigationOpenFlag = false;
49}
50
51//ナビ開閉コントロール
52var spNavInOut = {
53  switch:function(){
54    if($('body.spNavFreez').length){
55      return false;
56    }
57    if($('body').hasClass('js_humburgerOpen')){
58     spNavOut();
59    } else {
60     spNavIn();
61    }
62  }
63};

行動規範の内容に同意します

回答1件

ベストアンサー

自信はないですが$('header.navi').hide(0);と$('header.navi').show(0);を入れることで解決してみました。参考になれば…。

JavaScript
1//変数定義
2var navigationOpenFlag = false;
3var navButtonFlag = true;
4var focusFlag = false;
5
6//ハンバーガーメニュー
7    $(function(){
8
9      $(document).on('click','.el_humburger',function(){
10        if(navButtonFlag){
11          spNavInOut.switch();
12          //一時的にボタンを押せなくする
13          setTimeout(function(){
14            navButtonFlag = true;
15          },200);
16          navButtonFlag = false;
17        }
18      });
19      $(document).on('click touchend', function(event) {
20        if (!$(event.target).closest('.navi,.el_humburger').length && $('body').hasClass('js_humburgerOpen') && focusFlag) {
21          focusFlag = false;
22          //scrollBlocker(false);
23          spNavInOut.switch();
24        }
25      });
26    });
27
28//ナビ開く処理
29function spNavIn(){
30 $('header.navi').show(0);
31 $('body').removeClass('js_humburgerClose');
32  $('body').addClass('js_humburgerOpen');
33  setTimeout(function(){
34    focusFlag = true;
35  },200);
36  setTimeout(function(){
37    navigationOpenFlag = true;
38  },200);
39}
40
41//ナビ閉じる処理
42function spNavOut(){
43  $('body').removeClass('js_humburgerOpen');
44  $('body').addClass('js_humburgerClose');
45  setTimeout(function(){
46    $(".uq_spNavi").removeClass("js_appear");
47    focusFlag = false;
48  },200);
49  setTimeout(function(){
50    $('header.navi').hide(0);
51  },1000);
52  navigationOpenFlag = false;
53}
54
55//ナビ開閉コントロール
56var spNavInOut = {
57  switch:function(){
58    if($('body.spNavFreez').length){
59      return false;
60    }
61    if($('body').hasClass('js_humburgerOpen')){
62     spNavOut();
63    } else {
64     spNavIn();
65    }
66  }
67};
68
69$('header.navi').hide(0);