ハンバーガーメニューを押して、ナビゲーションを右から左に動かしたいが機能しない。

JavaScript, Css, HTMLに関する質問です。

ハンバーガーメニューを開いた時に、左に向かってナビゲーションを動かしたいのですが、
上手く機能しませんが、何故でしょうか。

私が実現したいこと
http://demo.tivel.jp/n/drawer/
デザインではなく、動的操作です。

分からないこと
なぜ、ハンバーガーメニューの画像を押しても、画面が動かないのか。
それはJava Scriptの記述が問題なのか、HTMLの構造に問題があるのか。

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  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" type="text/css" href="css/style.css">
8
9</head>
10
11
12<body  id ="TOP" >
13
14
15<div id ="inner-wrapping">
16<header class = "clearfix" >
17<h1><a href="#TOP"><img src="img/siteTitle.png" alt="title-logo"></a></h1>
18
19<p class="humberger" id="humberger"><a href=""><img src="https://tzcat.com/wp-content/uploads/2017/04/btn03-18.png" alt="img" width=64px;></a></p>
20
21<div class="header-right">
22      <p style="font-size:10px">"地域にねづいた歯科医院"デンタルクリニック</p>
23      <h2 style="margin-top:10px;">????03-0000-0000 </h2>
24     <p style="font-size:10px;margin-top:5px;margin-bottom: 10px;" class="yoyaku">予約受付時間　10:00～19:30 <a style="color:red;">日祝 </a>休診</p>
25</div>
26</header>
27
28
29<nav class="">
30      <ul>
31      <li class ="first"><a href="#TOP">トップページ<br>HOME</a></li>
32      <li><a href="#clinic">医院紹介<br>CLINIC</a></li>
33      <li><a href="#service">診察案内<br>SERVICE</a></li>
34      <li><a href="#staff">院長／スタッフ紹介<br>STAFF</a></li>
35      <li class ="last"><a href="./access.html">アクセス/Q&A<br>Access</a></li>
36      </ul>
37</nav>
38
39<main>
40
41<div id ="wrapper" class="clearfix" style="margin-top: 20px;">
42  <div class = "left-content" style="">
43  <div class = "top">
44    <h2>一般歯科</h2>
45  <ul class ="first">
46      <li><a class ="txt">虫歯治療</a></li>
47      <li><a class ="txt">歯周病治療</a></li>
48      <li><a class ="txt">入れ歯</a></li>
49      <li class="first-last"><a class ="txt">予防歯科</a></li>
50  </ul>
51</div>
52
53<div class="bottom">
54    <h2>審美歯科</h2>
55    <ul class ="second">
56      <li><a class ="txt">ホワイトニング</a></li>
57      <li><a class ="txt">オールセラミック</a></li>
58      <li><a class ="txt">セラミックインレー</a></li>
59      <li class="first-last"><a class ="txt">PMTC</a></li>
60    </ul>
61</div>
62
63  </div>
64
65    <div class ="right-content clearfix">
66    <p><img src="./img/clinic.jpg" alt="clinic" ></p>
67
68<div id ="imformation">
69   <h2 style="border-bottom:3px solid #6CC6C4;font-size:20px;padding:5px;text-align:left;">新着情報</h2>
70
71  <div class ="imfor-dl">
72
73  <dl class="clearfix">
74    <dd>2012/08/01</dd>
75    <dt>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</dt>
76    <dd>2012/07/24</dd>
77    <dt>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</dt>
78    <dd>2012/07/02</dd>
79    <dt>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております</dt>
80  </dl>
81
82  </div>
83</div>
84    </div>
85
86</div>
87<p class="top-page" style="display: none; position:fixed; right:10px; bottom:10px; "> <a href="#"><img src="img/page-top.png" alt="top-page"></a></p>
88</main>
89
90<footer style="background-color: #6CC6C4;color:#fff;">
91    <ul>
92      <li>トップページ</li>
93      <li>医師紹介</li>
94      <li>診察案内</li>
95      <li>院長/スタッフ紹介</li>
96      <li>アクセス</li>
97    </ul>
98</footer>
99
100<p style="width:1050px; margin:0 auto; padding:10px;border-bottom:solid 3px #6CC6C4">デンタル クリニック 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
101<p style="padding:10px;font-size:0.8em">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
102
103</div>
104</body>
105</html>
106

JavaScript
1<script src="js/jquery-3.4.1.min.js"></script>
2
3 <script>
4  $(document).ready(function(){
5  $('#humberger').on('click', function(){
6  $('nav, #inner-wrapping').toggleclass('show');
7});
8});
9 </script>

CSS
1*,p,div,ul,article,section,footer,header{
2margin:0;
3padding: 0;
4}
5
6img{
7vertical-align:bottom;
8}
9
10body{
11border-top: solid 8px #6CC6C4;
12background-color: #F6F6F6;
13}
14
15a,p,h1,h2,h3{
16text-align:center;
17font-family:sans-serif;
18}
19
20header{
21width:1050px;
22margin:0 auto;
23margin-bottom:10px;
24}
25
26header h1{
27float:left;
28padding:35px;
29padding-left: 0px;
30}
31
32.header-right{
33float:right;
34padding-top:10px;
35margin-right: 3px;
36}
37
38.humberger{
39float: right;
40}
41
42p.yoyaku{
43border:solid 1px #D6D6D6;
44padding:10px;
45}
46
47ul{
48list-style: none;
49}
50
51nav{
52display:block;
53position: fixed;
54right:-100vw;
55top:-8px;
56height:100%;
57width:280px;
58}
59
60nav ul{
61clear:both;
62}
63
64nav ul li{
65justify-content: center;
66background-color: #6CC6C4;
67width:260px;
68padding:10px;
69text-align:center;
70border-bottom:1px solid white;
71}
72
73nav ul li a{
74color:white;
75text-decoration:none;
76font-size:0.85em;
77}
78
79.show{
80 transform: translate3d(-280px, 0,  0);
81}
82
83.clearfix::after{
84clear:both;
85display:block;
86content:"";
87}
88
89main,footer{
90width:1050px;
91margin:0 auto;
92}
93
94main{
95border: solid 1px inherit;
96}
97
98#wrapper{
99width:100%;
100}
101
102.left-content{
103width:25%;
104float:left;
105}
106
107.top h2,
108.bottom h2{
109  background-color: #6CC6C4;
110  color:white;
111  font-size:1em;
112  text-align:left;
113  padding:10px;
114  border-radius: 6px 6px 0px 0px;
115}
116
117.left-content ul{
118border-right: 1px solid #6CC6C4;
119border-left: 1px solid #6CC6C4;
120background-color: white;
121}
122
123.left-content ul li{
124background-color: white;
125margin-bottom:10px;
126padding:10px;
127border-bottom:1px solid #6CC6C4;
128font-size:0.9em;
129}
130
131.left-content ul li::before{
132content:"●";
133color:#6CC6C4;
134font-size:0.8em;
135}
136
137.left-content ul li a{
138margin-left: 5px;
139}
140
141.first-last{
142border-bottom:0px;
143}
144
145.top{
146margin-bottom:15px;
147}
148
149.right-content{
150width:73%;
151float:right;
152}
153
154.right-content p{
155width:762px;
156}
157
158.right-content img{
159  vertical-align: bottom;
160      width: 762px;
161      max-width: 100%;
162      height: auto;
163}
164
165#imformation{
166width:99.5%;
167background-color: white;
168padding:0;
169}
170
171.imfor-dl{
172margin-bottom: 50px;
173}
174
175dl{
176padding:5px;
177}
178
179dd{
180width:30%;
181padding:10px;
182padding-left: 0px;
183padding-bottom: 15px;
184float:left;
185}
186
187dt{
188border-bottom: 1px dashed #6CC6C4;
189padding-bottom: 6px;
190padding-top: 6px;
191}
192
193/*ここから質問と回答コーナー*/
194#qa-wrapper{
195clear: both;
196content: "";
197padding-bottom: 50px;
198text-align: center;
199}
200.qablock{
201  position: relative;
202  margin-bottom: 20px;
203  background: #eee9e6;
204  border:1px solid #eee9e6;
205}
206.question_txt{
207  cursor: pointer;
208  padding:5px 15px;
209  padding: 10px;
210  margin: 10px !important;
211  border-bottom: 1px dashed #6f5436;
212}
213.qicon{
214  color: #6f5436;
215  font-weight: bold;
216  margin-right:15px;
217}
218.answer_txt{
219  margin: 0px !important;
220  padding: 10px 15px;
221}
222.show_button{
223  position: absolute;
224  bottom:0px;
225  right:0px;
226  width:43px;
227  height:43px;
228}
229.show_button::after{
230  content: '▲'!important;
231  display: block;
232  text-align: center;
233  width: 43px;
234  height: 43px;
235  line-height: 43px;
236  top: 0;
237  left: 0;
238  margin-left: 0px;
239  margin-top: 0px;
240  color:#b4ada9;
241}
242.question_txt::after{
243  content: '▼'!important;
244  width: 43px;
245  height: 43px;
246  line-height: 43px;
247  top: 0;
248  left: 0;
249  margin-left: 5px;
250  margin-top: 0px;
251  color:#b4ada9;
252}
253.qa{
254  background: #fff;
255}
256.active{
257display: block;
258}
259.close{
260display: none;
261}
262
263
264/*ここからfooter*/
265footer{
266background-color: #6CC6C4;
267border-radius:5px ;
268color:white;
269}
270
271footer ul{
272display:flex;
273}
274
275footer li{
276justify-content: space-around;
277margin-right: auto;
278margin-left: auto;
279}
280