画面を小さくしていく時に、ブレイクポイント付近でナビゲーションメニューの中身が見えてしまうのをなくしたい。

練習用にPCサイトでは２カラムのサイトのデザインで、
タブレット・モバイルは１カラムのハンバーガーメニューに変わるサイトを作っているのですが。

画面を小さくしていきタブレットのブレイクポイント付近になると、画面の上部にナビゲーションメニューの中身がちょい見えしてししまいます。
”opacity:０;”と設定すると、中身は見えなくなるのですが、
ナビゲーションメニューが開閉時にフェードイン/フェードアウトのようなアニメーションがかかってしまいます。
どちらも解決するような方法がありましたらアドバイスいただけたらうれしいです。

html
1<body>
2    <div id="side-menu">
3      <div id="top-header">
4        <h1 class="logo"><img src="#" alt="" title=""></h1>
5        <a id="menuButton">
6          <div class="bar"></div>
7          <div class="bar"></div>
8          <div class="bar"></div>
9        </a>
10        <div id="nav-contener">
11          <nav id="nav">
12            <ul id="menu-list">
13              <li><a href="#">TOP</a></li>
14              <li><a href="#">MESSAGE</a></li>
15              <li><a href="#">GALLERY</a></li>
16              <li><a href="#">BRAND</a></li>
17              <li><a href="#">PROJECT</a></li>
18              <li><a href="#">COMPANY</a></li>
19            </ul>
20            <ul id="icon-list">
21              <li><a href="#"><img src="iconFb.png" ></a></li>
22              <li><a href="#"><img src="iconInsta.png"></a></li>
23              <li><a href="#"><img src="iconTw.png" ></a></li>
24              <li><a href="#"><img src="iconYouTube.png"></a></li>
25            </ul>
26          </nav>
27        </div><!--- nav-contener --->
28      </div><!--- top-header --->
29    </div>

css
1/* ------------------ */
2/*        body        */
3/* ------------------ */
4body {
5  display: grid;
6  grid-template-rows: 100%;
7  grid-template-columns: 4fr 1fr;
8  grid-template-areas: "main nav";
9  position: relative;
10  font-family: 'Noto Sans JP', serif;
11  position: relative;
12}
13main{
14  width: 960px;
15  grid-column-start: 1;
16  grid-column-end: 2;
17  grid-area: main;
18  margin-bottom: 260px;
19}
20nav {
21  width: 240px;
22  grid-column-start: 2;
23  grid-column-end: 3;
24  grid-area: nav;
25  position: fixed;
26}
27section {
28  margin-bottom: 70px;
29}
30li {
31  list-style: none;
32}
33a {
34  font-size: 14px;
35  color: #000000;
36  text-decoration: none;
37}
38
39/* ------------------ */
40/*        nav         */
41/* ------------------ */
42#side-menu {
43  margin-left: 50px;
44}
45nav ul {
46  background: white;
47}
48nav li {
49  margin-bottom: 30px;
50}
51#menu-list li a:hover{
52  border-bottom: 1px solid #000000;
53}
54#icon-list li {
55  display: inline-block;
56  padding-right: 9px;
57}
58#icon-list img{
59  width: 20px;
60  height: 20px;
61}
62.logo {
63  padding: 30px 0 50px;
64}
65.logo img {
66  width: 90px;
67  height: 20px;
68}
69
70/* ------------------ */
71/*       tablet       */
72/* ------------------ */
73
74@media screen and (max-width:799px) {
75body {
76  display: block;
77  width: 799px;
78}
79main {
80  width: 100%;
81  margin-bottom: 140px;
82}
83
84/* ---- menu  ----- */
85#side-menu {
86  height: 55px;
87  margin-left: 0;
88  position: relative;
89}
90#top-header {
91  width: 100%;
92  height: 55px;
93  position: fixed;
94  z-index: 100;
95  background-color: white;
96  border-bottom: 1px solid #ccc;
97  text-align: center;
98}
99.logo {
100  position: relative;
101  z-index: 100;
102  padding: 15px 0;
103  background: #FFF;
104}
105.logo img {
106  height: 25px;
107}
108#nav {
109  width: 100%;
110  visibility: hidden;
111  overflow: hidden;
112  transform: translateY(-100%);
113  transition: all 0.6s;
114}
115#nav li{
116  margin-bottom: 0px;
117}
118#menu-list {
119  padding-top: 20px;
120}
121#menu-list li {
122  padding: 20px 0;
123  border-bottom: 1px solid #cccccc;
124  text-align: left;
125}
126#menu-list li:last-child{
127  border-bottom: 2px solid #cccccc;
128}
129#menu-list li::before {
130  display: block;
131  content: '';
132  position: relative;
133  right: -5px;
134  top: 9px;
135  width: 6px;
136  height: 6px;
137  border-top: solid 2px currentColor;
138  border-right: solid 2px currentColor;
139  -webkit-transform: rotate(45deg);
140  transform: rotate(45deg);
141}
142#icon-list {
143  text-align: left;
144}
145#icon-list li {
146  padding: 15px;
147  text-align: left;
148}
149#menu-list li a {
150  margin-left: 25px;
151}
152#menu-list li a:hover {
153  border-bottom: 1px solid black;
154}
155
156/* ----- humberger menu ----- */
157#menuButton {
158  display: inline-block;
159  height: 35px;
160  width: 35px;
161  position: fixed;
162  z-index: 110;
163  top: 11px;
164  right: 8px;
165}
166.bar {
167  height: 2px;
168  width: 50%;
169  background-color: black;
170  position:absolute;
171  top: 50%;
172  left: 50%;
173  transform: translate(-50%, -50%);
174  transition: 0.3s;
175}
176.bar:nth-of-type(1){
177  transform: translate(-50%, -7px);
178}
179.bar:nth-of-type(3){
180  transform: translate(-50%, 5px);
181}
182/* ---- menu/active  ----- */
183#nav.active {
184  width: 100%;
185  visibility: visible;
186  background: #ffffff;
187  text-align: left;
188  border-bottom: 1px solid #cccccc;
189  position: relative;
190  top: -36px;
191  left: 0;
192  transform: translateY(0%);
193}
194#menuButton.active div:nth-of-type(1){
195  transform: translate(-63%, 0px) rotate(-46deg);
196}
197#menuButton.active div:nth-of-type(2){
198  opacity: 0;
199}
200#menuButton.active div:nth-of-type(3){
201  transform: rotate(-133deg) translate(40%, -8px);
202}
203

JavaScript
1`strict`
2{
3const btn = document.getElementById("menuButton");
4const nav = document.getElementById("nav");
5const menu = document.getElementById("menu-list");
6
7btn.addEventListener("click", () => {
8  btn.classList.toggle("active");
9  nav.classList.toggle("active");
10  menu.classList.toggle("active");
11  });
12}

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

回答1件

ベストアンサー

Javascript
1        let timeoutId;
2
3        window.addEventListener("resize", () => {
4            document.getElementById("nav").style.transition = "0s";
5            clearTimeout(timeoutId);
6
7            timeoutId = setTimeout( ()=> {
8                document.getElementById("nav").style.transition = "";
9            }, 500);
10        });