ハンバーガーメニューが上手く表示できません。

前提・実現したいこと

クリックすると×になるハンバーガーメニューを作りたいです。

発生している問題・エラーメッセージ

クリックするとナビゲーションの文字は表示非表示されるのですが、ハンバーガーメニューには変化が起きないです。
エラーメッセージは出ていません。

該当のソースコード

html
1<div class="menu_button"><span class="bar1"></span> <span class="bar2"></span> <span class="bar3"></span></div>
2	<div class="navigation">
3		<nav>
4			<ul>
5				<li><a>HOME</a></li>
6				<li><a>NEWS</a></li>
7				<li><a>CONCEPT</a></li>
8				<li><a>MENU</a></li>
9				<li><a>SHOP</a></li>
10				<li><a>ABOUT</a></li>
11			</ul>
12		</nav>
13	</div>

CSS
1.menu_button {
2  width: 40px;
3  height: 20px;
4  outline: none;
5  border: none;
6  font-size: 20px;
7  display: block;
8  margin-left: auto;
9  margin-top: 56.5px;
10  margin-right: 40px;
11  potion: relative;
12}
13.menu_button span {
14  display: block;
15  width: 70px;
16  height: 9px;
17  background-color: #000000;
18  margin-bottom: 20px;
19  transition: transform .5s, opacity .5s;
20  float: right;
21  border-radius: 4.5px;
22  potion: absolute;
23}
24.menu_button.bar1 {
25  top: 0;
26}
27.menu_button.bar2 {
28  top: 0;
29  bottom: 0;
30  margin: auto;
31}
32.menu_button.bar3 {
33  bottom: 0;
34}
35.menu_button.show.bar1 {
36  transform: rotate(-45deg) translateY(10px);
37}
38.menu_button.show.bar2 {
39  opacity: 0;
40}
41.menu_button.show.bar3 {
42  transform: rotate(45deg) translateX(-12px);
43}
44.navigation {
45  potion: fixed;
46  opacity: 0;
47  visibility: hidden;
48  transition: opacity.5s, visibility .5s;
49}
50.navigation.show {
51  opacity: 1;
52  visibility: visible;
53}

java
1$(function(){
2		$('.menu_button').on('click',function(){
3			$('.menu_button,.navigation').toggleClass('show');
4		});
5	})

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

CSS
1/*
2.menu_button.bar1
3            ↓ （他も同様）*/
4.menu_button .bar1 { /* 略 */ }
5```**一応動くサンプル**[https://jsfiddle.net/5xa0ro2c/](https://jsfiddle.net/5xa0ro2c/)
6
7---
8
9あとは`position`のつづりが間違っています。
10
11【position - CSS: カスケーディングスタイルシート | MDN】
12[https://developer.mozilla.org/ja/docs/Web/CSS/position](https://developer.mozilla.org/ja/docs/Web/CSS/position)