bentoboxの要素と要素の間を狭くしたい。

bentoboxを作ったのですが、marginが大きすぎるため変なスペースが生まれています。
またクローズした時にばってんにしたいのですが、このデザインもなかなかうまくいきません。
画像を貼り付けましたのでイメージはこんな感じになります。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>page</title>
5   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6  <link rel="stylesheet" type="text/css" href="1.page.css">
7
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
9  <link rel="stylesheet" href="style.css">
10  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
11
12</head>
13<body>
14    <script>
15        $(function() {
16    $('.bento-menu').click(function() {
17        $(this).toggleClass('active');
18    
19        if ($(this).hasClass('active')) {
20            $('.globalMenuSp').addClass('active');
21        } else {
22            $('.globalMenuSp').removeClass('active');
23        }
24    });
25    });
26    </script>
27
28  <div class="bento-menu">
29    <span></span>
30    <span></span>
31    <span></span>
32    <span></span>
33    <span></span>
34    <span></span>
35    <span></span>
36    <span></span>
37    <span></span>
38  </div>
39  
40  <nav class="globalMenuSp">
41    <ul>
42        <li><a href="#">Menu1</a></li>
43        <li><a href="#">Menu2</a></li>
44        <li><a href="#">Menu3</a></li>
45        <li><a href="#">Menu4</a></li>
46        <li><a href="#">Menu5</a></li>
47    </ul>
48</nav>
49</body>
50</html>

css
1
2body{
3  margin: 20px;
4  padding: 0;
5  background: #262626;
6  font-family: 'Chakra Petch', sans-serif;
7  font-size: 36px;
8}
9.bento-menu{
10  width: 250px;
11  height: 250px;
12  position: absolute;
13  top: 33%;
14  right: 1%;
15  transform: translateY(-50%);
16  cursor: pointer;
17  z-index: 5;
18}
19.bento-menu span{
20  width: 20px;
21  height: 20px;
22  background: #fff;
23  position: absolute;
24}
25.bento-menu span:nth-child(1){
26  top: 0;
27  left: 0;
28  transition: .6s;
29}
30.bento-menu span:nth-child(2){
31  top: 0;
32  left: 88px;
33  transition: .6s;
34}
35.bento-menu span:nth-child(3){
36  top: 0;
37  left:175px;
38  transition: .6s;
39}
40.bento-menu span:nth-child(4){
41  top: 88px;
42  left: 0;
43  transition: .6s;
44}
45.bento-menu span:nth-child(5){
46  top: 88px;
47  left: 88px;
48  transition: .6s;
49}
50.bento-menu span:nth-child(6){
51  top: 88px;
52  left:175px;
53  transition: .6s;
54}
55.bento-menu span:nth-child(7){
56  top: 175px;
57  left: 0;
58  transition: .6s;
59}
60.bento-menu span:nth-child(8){
61  top: 175px;
62  left: 88px;
63  transition: .6s;
64}
65.bento-menu span:nth-child(9){
66  top: 175px;
67  left:175px;
68  transition: .6s;
69}
70.bento-menu:hover span:nth-child(2){
71  transform: translate(0px,88px);
72}
73.bento-menu:hover span:nth-child(4){
74  transform: translate(88px,0px);
75}
76.bento-menu:hover span:nth-child(6){
77  transform: translate(-88px,0px);
78}
79.bento-menu:hover span:nth-child(8){
80  transform: translate(0px,-88px);
81}
82.bento-menu:hover span:nth-child(1){
83  transform: rotate(180deg);
84}
85.bento-menu:hover span:nth-child(3){
86  transform: rotate(180deg);
87}
88.bento-menu:hover span:nth-child(7){
89  transform: rotate(-180deg);
90}
91.bento-menu:hover span:nth-child(9){
92  transform: rotate(-180deg);
93}
94
95/*============================================================*/
96
97/* ナビ開いてる時のボタン */
98.bento-menu .active span:nth-child(1) {
99  top : 16px;
100  left: 6px;
101  -webkit-transform: rotate(-45deg);
102  -moz-transform   : rotate(-45deg);
103  transform        : rotate(-45deg);
104}
105
106.bento-menu.active span:nth-child(2),
107.bento-menu.active span:nth-child(3) {
108  top: 16px;
109  -webkit-transform: rotate(45deg);
110  -moz-transform   : rotate(45deg);
111  transform        : rotate(45deg);
112}
113
114nav.globalMenuSp {
115  position: fixed;
116  z-index : 2;
117  top  : 0;
118  left : 0;
119  color: #000;
120  background: #fff;
121  text-align: center;
122  transform: translateY(-100%);
123  transition: all 0.6s;
124  width: 100%;
125}
126
127nav.globalMenuSp ul {
128  background: #ccc;
129  margin: 0 auto;
130  padding: 0;
131  width: 100%;
132}
133
134nav.globalMenuSp ul li {
135  list-style-type: none;
136  padding: 0;
137  width: 100%;
138  border-bottom: 1px solid #fff;
139}
140nav.globalMenuSp ul li:last-child {
141  padding-bottom: 0;
142  border-bottom: none;
143}
144nav.globalMenuSp ul li:hover{
145  background :#ddd;
146}
147
148nav.globalMenuSp ul li a {
149  display: block;
150  color: #fff;
151  padding: 1em 0;
152  text-decoration :none;
153}
154
155
156nav.globalMenuSp.active {
157  transform: translateY(0%);
158}
159
160
161
162p{
163  position: absolute;
164  top: 270px;
165  width: 200px;
166  text-align: center;
167  left: 20px;
168  color: darkorange;
169}

Lhankor_Mhy

2021/01/04 08:48

スクリーンショットのようにしたい、というご質問でよろしいですか？

Larkiwing

2021/01/04 08:50

はい、そうです。

Lhankor_Mhy

2021/01/04 09:07

✖に変化するときはどのようなアニメーションにするのですか？

Lhankor_Mhy

2021/01/04 09:10

https://teratail.com/questions/313672 この質問とは何が違うのですか？

Larkiwing

2021/01/04 09:15

✖に変化するときはどのようなアニメーションにするのですか？＞特にこだわりはなく、とりあえずバッテンにしたいです。この質問とは何が違うのですか？＞サイズです。前回の質問では repeating-linear-gradientを使って、できたと思ったのですが、サイズを調整しようとしたところ、うまくいかずにこちらはスマホ対応だけにしようと思いました。

Lhankor_Mhy

2021/01/04 10:50

サイズを変えるたびに毎回質問をするつもりなのですか？

Larkiwing

2021/01/04 10:54

自分でできるところは、ググりつつ書籍を読みつつ限界まで挑戦します。ですが、自分でできないときにはお力を借りたいと思っています。

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

回答1件

ベストアンサー

この質問とは何が違うのですか？
＞サイズです。前回の質問では repeating-linear-gradientを使って、できたと思ったのですが、
__サイズを調整しようとしたところ、うまくいかずにこちらはスマホ対応だけにしようと思いました。 __

JavaScript - ハンバーガーメニューを弁当ボックスに変えたい｜teratail
↑のサンプルCSSのサイズを変更しました。サイズ調整ができるように変数を設定しました。

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