ハンバーガーメニューを弁当ボックスに変えたい

ハンバーガーメニューのデザインを弁当ボックスのデザインに変えたいです。
今は3本のラインが並んでいますが、縦3つ横3つのスクエアボックスを並べて
bento boxデザインにしたいです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style.css">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
10</head>
11<body>
12    <div class="hamburger">
13        <span></span>
14        <span></span>
15        <span></span>
16      </div>
17      
18      <nav class="globalMenuSp">
19          <ul>
20              <li><a href="#">Menu1</a></li>
21              <li><a href="#">Menu2</a></li>
22              <li><a href="#">Menu3</a></li>
23              <li><a href="#">Menu4</a></li>
24              <li><a href="#">Menu5</a></li>
25          </ul>
26      </nav>
27      
28    <div class="container-fluid">
29        <div class="row">
30            <div class="col-xs-12 cover-img" style="background-image:url('https://picsum.photos/2000/1500');">
31                <div class="cover-text text-center">
32                    <p style="color: #fff;">hogehogehogehoge</p>
33                </div>
34            </div>
35        </div>
36    </div>
37    <script>
38        $(function() {
39    $('.hamburger').click(function() {
40        $(this).toggleClass('active');
41 
42        if ($(this).hasClass('active')) {
43            $('.globalMenuSp').addClass('active');
44        } else {
45            $('.globalMenuSp').removeClass('active');
46        }
47    });
48});
49    </script>
50</body>
51</html>

css
1.cover-img {
2	height: 600px;
3	display: table;
4	width: 100%;
5	background-size: cover;
6}
7
8/* ワイドスクリーン用のCSS */
9@media only screen and (min-width: 1500px) {
10	.cover-img {
11		height: 800px;
12	}
13}
14
15/* タブレット用のCSS */
16@media only screen and (min-width : 768px) and (max-width : 1200px) {
17	.cover-img {
18		height: 500px;
19	}
20}
21
22/* スマホ用のCSS */
23@media only screen and (max-width: 479px) {
24	.cover-img {
25		height: 300px;
26	}
27}
28
29.cover-text {
30	display: table-cell;
31	vertical-align: middle;
32  text-align: center;
33}
34
35/*　ハンバーガーボタン　*/
36.hamburger {
37    display : block;
38    position: fixed;
39    z-index : 3;
40    right : 13px;
41    top   : 12px;
42    width : 42px;
43    height: 42px;
44    cursor: pointer;
45    text-align: center;
46  }
47  .hamburger span {
48    display : block;
49    position: absolute;
50    width   : 30px;
51    height  : 2px ;
52    left    : 6px;
53    background : #555;
54    -webkit-transition: 0.3s ease-in-out;
55    -moz-transition   : 0.3s ease-in-out;
56    transition        : 0.3s ease-in-out;
57  }
58  .hamburger span:nth-child(1) {
59    top: 10px;
60  }
61  .hamburger span:nth-child(2) {
62    top: 20px;
63  }
64  .hamburger span:nth-child(3) {
65    top: 30px;
66  }
67  
68  /* ナビ開いてる時のボタン */
69  .hamburger.active span:nth-child(1) {
70    top : 16px;
71    left: 6px;
72    -webkit-transform: rotate(-45deg);
73    -moz-transform   : rotate(-45deg);
74    transform        : rotate(-45deg);
75  }
76  
77  .hamburger.active span:nth-child(2),
78  .hamburger.active span:nth-child(3) {
79    top: 16px;
80    -webkit-transform: rotate(45deg);
81    -moz-transform   : rotate(45deg);
82    transform        : rotate(45deg);
83  }
84  
85  nav.globalMenuSp {
86    position: fixed;
87    z-index : 2;
88    top  : 0;
89    left : 0;
90    color: #000;
91    background: #fff;
92    text-align: center;
93    transform: translateY(-100%);
94    transition: all 0.6s;
95    width: 100%;
96  }
97  
98  nav.globalMenuSp ul {
99    background: #ccc;
100    margin: 0 auto;
101    padding: 0;
102    width: 100%;
103  }
104  
105  nav.globalMenuSp ul li {
106    list-style-type: none;
107    padding: 0;
108    width: 100%;
109    border-bottom: 1px solid #fff;
110  }
111  nav.globalMenuSp ul li:last-child {
112    padding-bottom: 0;
113    border-bottom: none;
114  }
115  nav.globalMenuSp ul li:hover{
116    background :#ddd;
117  }
118  
119  nav.globalMenuSp ul li a {
120    display: block;
121    color: #fff;
122    padding: 1em 0;
123    text-decoration :none;
124  }
125  
126
127  nav.globalMenuSp.active {
128    transform: translateY(0%);
129  }

hatena19

2021/01/03 03:26 編集

弁当ボックスのデザインというのが文章だけからでは明確に伝わりません。画像で提示してください。ハンバーガーの3本線(開く)に対応するものと、×（閉じる）に対応するもの、それぞれを。

Larkiwing

2021/01/03 03:38

画像挿入しました。

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

回答1件

ベストアンサー

下記のようなCSSでどうでしょうか。

css
1/*　ハンバーガーボタン　*/
2.hamburger {
3    display : block;
4    position: fixed;
5    z-index : 3;
6    right : 13px;
7    top   : 12px;
8    width : 42px;
9    height: 42px;
10    cursor: pointer;
11    text-align: center;
12  }
13  .hamburger span {
14    display : block;
15    position: absolute;
16    width   : 30px;
17    height  : 6px;
18    left    : 6px;
19    background : repeating-linear-gradient(
20      to right, #555, #555 6px,
21      rgba(84,84,84,0) 6px, rgba(84,84,84,0) 10px);
22    -webkit-transition: 0.3s ease-in-out;
23    -moz-transition   : 0.3s ease-in-out;
24    transition        : 0.3s ease-in-out;
25  }
26  .hamburger span:nth-child(1) {
27    top: 10px;
28  }
29  .hamburger span:nth-child(2) {
30    top: 20px;
31  }
32  .hamburger span:nth-child(3) {
33    top: 30px;
34  }
35
36  /* ナビ開いてる時のボタン */
37 .hamburger.active span {
38    top : 16px;
39    height  : 2px;
40    background : repeating-linear-gradient(
41      to right, #555, #555 6px,
42      rgba(84,84,84,1) 6px, rgba(84,84,84,1) 10px);
43}
44  .hamburger.active span:nth-child(1) {
45    left: 6px;
46    -webkit-transform: rotate(-45deg);
47    -moz-transform   : rotate(-45deg);
48    transform        : rotate(-45deg);
49  }
50
51  .hamburger.active span:nth-child(2),
52  .hamburger.active span:nth-child(3) {
53     -webkit-transform: rotate(45deg);
54    -moz-transform   : rotate(45deg);
55    transform        : rotate(45deg);
56  }