ハンバーガーメニューの横に画像を並べて真ん中に表示したい。

ハンバーガーメニューの横に画像を並べて真ん中に表示したいです。
そしてハンバーガーメニューをクリックしたら
スライドしてくるメニューで画像の上にかぶせたいです。

イメージはこんな感じです。
https://gyazo.com/7bc4c7b80ddca0fb2cd6c378d8d0f655

試したこと
①インライン要素をブロック要素にしてtext-centerを指定しましたが、
ハンバーガーメニューの上に表示されてしまいます。
②原因はz-indexかなと思ったのですが、z-indexをいじったら動かなくなってしまいます。

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
10    <title>Document</title>
11</head>
12<body>
13  <div class="el_humburger"><!--ハンバーガーボタン-->
14    <img class="d-block text-center" src="https://picsum.photos/id/1/100/200" alt="">
15    <div class="el_humburger_wrapper">
16      <span class="el_humburger_bar top"></span>
17      <span class="el_humburger_bar middle"></span>
18      <span class="el_humburger_bar bottom"></span>
19    </div>
20  </div>
21 
22  <header class="navi"><!--ナビゲーション-->
23    <div class="navi_inner">
24      <div class="navi_item"><a class="navi_menu" href="">ABOUT</a></div>
25      <div class="navi_item"><a class="navi_menu" href="">WORKS</a></div>
26      <div class="navi_item"><a class="navi_menu" href="">GALLERY</a></div>
27      <div class="navi_item"><a class="navi_menu" href="">FLOW</a></div>
28      <div class="navi_item"><a class="navi_menu" href="">FAQ</a></div>
29      <div class="navi_item"><a class="navi_menu" href="">CONTACT</a></div>
30    </div>
31  </header>
32
33  <div class="mainView">
34    <!--ページコンテンツ-->
35    </div>
36     
37    <!--CDNでjQuery読み込む-->
38    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
39     
40    <script type="text/javascript" src="script.js"></script>
41 
42</body>
43</html>
44

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

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件

自己解決

解決方法

全部書くと長～くなってしまうので、雑に書きます。

①まずはbootstrapとcssをうまく使いつつ目標のデザインを作ってみる

②画像をハンバーガーメニュー表示時にうまくかぶせるポイントは
.navi {
margin-top: -80px;}
にして、マージンをマイナスにしてあげることで上にスライドをずらすことができます。

③すると、いい感じにデザインが整うのですが、スライドの大きさのぶん、画面幅が広がってしまいます。一見、cssをいじればどうにかなると思いきや、なかなかうまくいきません。

④なのでこちら→cssのtransformを使ってドロワーメニューを作成しましたが画面幅が整わないのitagagakiさんからご指摘を頂いたように、script.jsの方から、$('header.navi').hide(0);と$('header.navi').show(0);を入れて、ドロワーメニューが開かれている時には、非表示、そしてクリックした時に表示という指示を出します。

すると、完成です。以下コードになります。

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            </a>
61        </div>
62    </div>
63</header>
64<!--スマホ用のNavbar-->
65    <!--CDNでjQuery読み込む-->
66    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
67    <script type="text/javascript" src="script.js"></script>
68</body>
69</html>

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

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);