CSSのover-flow:hidden;が効いていない？？

お世話になります！

ドロワーメニューの実装を考えていて、サイトを参考にしているのですが思うようにいきません。

実装したい内容は、.buttonを押したら.drawer-menuがみぎから出てくるようにしたいです。

メニューが閉じている時は、
width:0; height:100vh; overflow:hidden;
でメニュー内の要素を非表示にしたかったのですが表示されてしまいます。

以下、テストでしたソースコードです。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト</title>
6    <link rel="stylesheet" href="css/style.css">
7  </head>
8  <body>
9    <div class="contents">
10      <aside class="sidebar">
11        <!-- ボタン押下でメニュー閉じる -->
12        <div class="button"></div>
13      </aside>
14      <div class="header"></div>
15    </div>
16    <div class="drawer-menu">
17      <aside class="sidebar">
18        <!-- ボタン押下でメニュー閉じる -->
19        <div class="button"></div>
20      </aside>
21      <div class="header"></div>
22　　　<!-- ここにulなどでメニュー項目を表示 -->
23    </div>
24  </body>
25  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
26  <script type="text/javascript" src="js/common.js"></script>
27</html>
28
29

CSS
1* {
2  padding: 0; margin: 0;
3}
4
5.header {
6  position: fixed;
7  top: 0;
8  width: 100%;
9  height: 80px;
10  background-color: white;
11  border-bottom: black solid 2px;
12  padding-left: 80px;
13  box-sizing: border-box;
14}
15.drawer-menu .header {
16  background: black;
17  border-bottom: white solid 2px;
18  box-sizing: border-box;
19  height: 80px;
20  padding-left: 0;
21  width: 100%;
22
23}
24.button {
25  width: 50px;
26  height: 50px;
27  background: rgb(241, 111, 111);
28}
29.contents {
30  position: relative;
31  width: 100vw;
32  height: 100vh;
33}
34
35.drawer-menu {
36  position: fixed;
37  top: 0;
38  width: 0;
39  height: 100vh;
40  background: rgb(0, 0, 0);
41  z-index: 10;
42  overflow: hidden;
43}
44
45.sidebar {
46  position: fixed;
47  top: 0;
48  left: 0;
49  width: 80px;
50  height: 100vh;
51  background-color: white;
52  border-right: black solid 2px;
53  box-sizing: border-box;
54  z-index: 9;
55}
56.drawer-menu .sidebar {
57  position: fixed;
58  top: 0;
59  left: 0;
60  width: 80px;
61  height: 100vh;
62  background-color: black;
63  border-right: white solid 2px;
64}
65

js
1$('.button').on('click', function(){
2
3  $menu = $('.drawer-menu');
4
5  if ($menu.css('width') == '0px' ) {
6    $('.drawer-menu').animate({width:'100vw'});
7  }
8  else {
9    $('.drawer-menu').animate({width:'0'});
10  }
11});
12

予定では drawer-menu の横幅を０にてoverflow:hidden;にしているので、切れてくれると思ったのですが、ガッツリ見えてしまっています。

この様な場合はどうすればよろしいでしょうか？
初歩的な事だとは思いますが、よろしくお願いいたします。

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

回答1件

ベストアンサー

fixedは通常のフローから除外されるためでは。

CSS
1.drawer-menu .header {
2  background: black;
3  border-bottom: white solid 2px;
4  box-sizing: border-box;
5  height: 80px;
6  padding-left: 0;
7  width: 100%;
8  position: absolute; /* ADD */
9}
10.drawer-menu .sidebar {
11  /* position: fixed; REMOVE */
12  position: absolute; /* ADD */
13  top: 0;
14  left: 0;
15  width: 80px;
16  height: 100vh;
17  background-color: black;
18  border-right: white solid 2px;
19}
20```**動くサンプル：**[https://jsfiddle.net/fmdL47yt/](https://jsfiddle.net/fmdL47yt/)
21
22---
23
24【position - CSS: カスケーディングスタイルシート | MDN】
25[https://developer.mozilla.org/ja/docs/Web/CSS/position#fixed](https://developer.mozilla.org/ja/docs/Web/CSS/position#fixed)