ハンバーガーメニューが正常に表示されない

前提・実現したいこと

スマホデザイン時に表示されるハンバーガーメニューを作っています。
ハンバーガーメニューのアニメーションは動きますが、ボタンをクリックしても中身が空になってしまいます。
中身が正常に表示されるようにしたいです。

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

内容部分が表示されません。

該当のソースコード

HTML
1<nav class="navigation-sp sp-block">
2	<ul>
3		<li><a href="info.html">INFO</a></li>
4		<li><a href="menu.html">MENU</a></li>
5		<li><a href="takeout">TAKEOUT</a></li>
6		<li><a href="access.html">ACCESS</a></li>
7	</ul>
8</nav>
9<div class="nav-toggle">
10	<span></span><span></span><span></span>
11</div>

CSS
1nav.navigation-sp {
2	position: absolute;
3	z-index: 2;
4	top: 0;
5	left: 0;
6	background: #000;
7	color: #000;
8	text-align: center;
9	transform: translateY(-100%);
10	transition: all 0.6s;
11	width: 100%;
12}
13
14nav.navigation-sp ul {
15	background: #666;
16	margin: 0 auto;
17	padding: 0;
18	width: 100%;
19}
20
21nav.navigation-sp ul li {
22	font-size: 1.1em;
23	list-style-type: none;
24	padding: 0;
25	width: 100%;
26	border-bottom: 1px solid #ccc;
27}
28
29nav.navigation-sp ul li a {
30	display: block;
31	color: #fff;
32	padding: 1em 0;
33	text-decoration: none;
34}
35
36nav.navigation-sp ul li a:hover {
37	display: block;
38	color: #fd9802;
39	padding: 1em 0;
40	text-decoration: none;
41}
42
43nav.navigation-sp.active {
44	transform: translateY(0%);
45}
46
47.nav-toggle {
48	display: block;
49	position: fixed; 
50	right: 15px;
51	top: 22px;
52	width: 50px;
53	height: 34px;
54	cursor: pointer;
55	z-index: 3;
56	text-align: center;
57}
58
59.nav-toggle span {
60	display: block;
61	position: absolute;  
62	width: 50px;
63	border-bottom: solid 6px #fff;
64	-webkit-transition: .35s ease-in-out;
65	-moz-transition: .35s ease-in-out;
66	transition: .35s ease-in-out;
67}
68
69.nav-toggle span:nth-child(1) {
70	top: 0;
71}
72
73.nav-toggle span:nth-child(2) {
74	top: 14px;
75}
76
77.nav-toggle span:nth-child(3) {
78	top: 28px;
79}
80
81.nav-toggle.active span:nth-child(1) {
82	top: 14px;
83	right: 0;
84	-webkit-transform: rotate(-45deg);
85	-moz-transform: rotate(-45deg);
86	transform: rotate(-45deg);
87}
88
89.nav-toggle.active span:nth-child(2),
90.nav-toggle.active span:nth-child(3) {
91	top: 14px;
92	-webkit-transform: rotate(45deg);
93	-moz-transform: rotate(45deg);
94	transform: rotate(45deg);
95}

javascript
1$(function() {
2	$('.nav-toggle').click(function() {
3		$(this).toggleClass('active');
4
5		if ($(this).hasClass('active')) {
6			$('.navigation-sp').addClass('active');
7		} else {
8			$('.navigation-sp').removeClass('active');
9		}
10	});
11});

試したこと

CSSでの実装も試してみましたが、やはり内容が表示されませんでした。

kei344

2018/11/29 04:18

https://teratail.com/questions/161008 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input