ハンバーガーメニューが表示されないのですが、間違っている部分をご指摘いただけないでしょうか？

ハンバーガーメニューを作ってみたのですが、正しく表示されません。
z-indexなどを使ってみたのですが、それでも表示されず、困っています。
間違っている部分をご指摘いただけると幸いです。

html
1<button type="button" class="btn js-btn">
2      <span class="btn-line"></span>
3  </button>
4    <nav>
5      <ul class="menu">
6        <li class="menu-list"><a href=#link>トップ</a></li>
7        <li class="menu-list"><a href=./html/menu.html>メニュー </a> </li>
8        <li class="menu-list"><a href=./html/reward.html>アンケート </a> </li>
9        <li class="menu-list"><a href=./html/reservation.html>ご予約 </a> </li>
10        <li class="menu-list"><a href=./html/recommend.html>こだわり</a></li>
11        <li class="menu-list"><a href=./html/popular.html>ランキング</a></li>
12      </ul>
13    </nav>

css
1    body {
2    margin: 0;
3    padding: 0;
4    text-align: center;
5    box-sizing: border-box;
6    }
7
8    button {
9    -webkit-appearance: none;
10    -moz-appearance: none;
11        appearance: none;
12    vertical-align: middle;
13    border: 0;
14    background: transparent;
15    border-radius: 0;
16    text-align: inherit;
17    }
18
19    button:hover {
20    cursor: pointer;
21    }
22
23    /**************** 以下、ハンバーガーボタンのスタイリング ****************/
24    .btn {
25    /* ボタンの配置位置  */
26    position: fixed;
27    top: 16px;
28    right: 16px;
29    /* ボタンの大きさ  */
30    width: 48px;
31    height: 48px;
32    /* バーガーの線をボタン範囲の中心に配置 */
33    justify-content: center;
34    align-items: center;
35    /* 最前面に */
36    z-index: 20;
37    background-color: green;
38    }
39
40    /***** 真ん中のバーガー線 *****/
41    .btn-line {
42    /* 線の長さと高さ */
43    width: 100%;
44    height: 4px;
45    /* バーガー線の色 */
46    background-color: #333;
47    /* バーガー線の位置基準として設定 */
48    position: relative;
49    transition: .2s;
50    z-index: 18;
51    }
52
53    /***** 上下のバーガー線 *****/
54    .btn-line::before,
55    .btn-line::after {
56    content: "";
57    /* 基準線と同じ大きさと色 */
58    position: absolute;
59    width: 100%;
60    height: 100%;
61    background-color: #333;
62    transition: .2s;
63    z-index: 8;
64    }
65
66
67    .btn-line::before {
68    /* 上の線の位置 */
69    transform: translateY(-16px);
70    }
71
72
73    .btn-line::after {
74    /* 下の線の位置 */
75    transform: translateY(16px);
76    }
77
78    /***** メニューオープン時 *****/
79    .btn.open {
80    transform: rotate(180deg);
81    }
82    .btn-line.open {
83    /* 真ん中の線を透明に */
84    background-color: transparent;
85    }
86
87    .btn-line.open::before,
88    .btn-line.open::after {
89    content: "";
90    /* 上下の線の色を変える */
91    background-color: #333;
92    transition: .2s;
93    }
94
95    .btn-line.open::before {
96    /* 上の線を傾ける */
97    transform: rotate(135deg);
98    }
99
100    .btn-line.open::after {
101    /* 上の線を傾ける */
102    transform: rotate(-135deg);
103    }
104

javascript
1$(function () {
2    $('.js-btn').on('click', function () {        // js-btnクラスをクリックすると、
3      $('.menu , .btn-line').toggleClass('open'); // メニューとバーガーの線にopenクラスをつけ外しする
4    })
5});

お手数おかけしますが、よろしくお願いいたします。

m.ts10806

2021/04/06 10:08

「正しい表示」は作る人しか分かりませんので仕様を具体的に記載してください。

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

回答1件

ハンバーガーの3本線が表示されないのを、表示させたいということでしょうか。

<span class="btn-line"></span> とこれの疑似要素で三本線にしようとしているのだと思いますが、
span要素はインライン要素なので、width height のサイズ指定が効いていないのが原因です。
中身に依存しますので、中身がなければ 0x0 のサイズになります。

span と疑似要素に display: block; を追加してブロックレベル要素にすれば表示されるようになります。

css
1/***** 真ん中のバーガー線 *****/
2.btn-line {
3  /* 線の長さと高さ */
4  width: 100%;
5  height: 4px;
6  /* バーガー線の色 */
7  background-color: #333;
8  /* バーガー線の位置基準として設定 */
9  position: relative;
10  transition: .2s;
11  z-index: 18;
12  display: block; /* 追加 */
13}
14
15/***** 上下のバーガー線 *****/
16.btn-line::before,
17.btn-line::after {
18  content: "";
19  /* 基準線と同じ大きさと色 */
20  position: absolute;
21  width: 100%;
22  height: 100%;
23  background-color: #333;
24  transition: .2s;
25  z-index: 8;
26  display: block; /* 追加 */
27}