バーガーメニューのアニメーションが作動しない

前提・実現したいこと

html、css初心者です。

スマホサイトにバーガーメニューをつけたいのですが、
アニメーションがうまく動きません。
ボタンとメニューが完全にばらばらに表示されてしまいます。
どこが問題でしょうか？

ちなみにコンソールにはエラーは何も表示されていません。

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

スマホのバーガーメニューが作動しない

該当のソースコード

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
5<title>タイトル</title>
6<meta name="description" content="コンテンツ"/>
7<meta name="keywords" content="コンテンツ" />
8<meta http-equiv="Content-Script-Type" content="text/javascript" />
9<meta http-equiv="Content-Style-Type" content="text/css" />
10<script type="text/javascript" src="js/common.js"></script>
11<meta name="viewport" content="width=device-width, initial-scale=1.0">
12<link href="css/common.css" rel="stylesheet" type="text/css" />
13<link rel="stylesheet" type="css/common.css" media="screen and (max-width: 500px)" href="reset.css" />
14</head>
15
16
17<body>
18<a name="top" id="top"></a>
19<div id="frame">
20<div id="container">
21<div class="red_bar">
22<h1>タイトル</h1>
23<a href="">HOME</a>
24</div>
25
26<!--sp_navi-->
27<div class="sp_navi">
28  <img id="sp_navi_btn" class="u-max-full-width" src="img/sp_navi.png" alt="sp_navi" srcset="img/sp_navi@2x.png 2x" />
29
30  <ul class="sp_navi_li">
31    <li><a href="index.html">TOPページ</a></li>
32    <li><a href="news.html">内容</a></li>
33    <li><a href="company.html">よくあるご質問</a></li>
34    <li><a href="company.html">お問い合わせ</a></li>
35  </ul>
36</div>
37
38<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
39  $(function(){
40    $(document).ready(function(){
41
42      $("#sp_navi_btn").click(function () {
43        $(this).next().slideToggle();
44      });
45
46    });
47  });
48</script>
49
50</body>
51</html>
52

試したこと

下記を参考にJqueryのコードを変更したりしたのですが変わりませんでした。。
https://naka-blog.com/neterr_file_not_found

x_x

2018/10/29 09:09

yasu1110

2018/10/29 09:14

ご指摘の通りでした。。失礼いたしました。ありがとうございます！

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

回答1件

ベストアンサー

HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
2  $(function(){
3    $(document).ready(function(){
4
5      $("#sp_navi_btn").click(function () {
6        $(this).next().slideToggle();
7      });
8
9    });
10  });
11</script>

scriptタグがおかしいので動いてないです。

HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
2<script>
3  $(function(){
4    $(document).ready(function(){
5
6      $("#sp_navi_btn").click(function () {
7        $(this).next().slideToggle();
8      });
9
10    });
11  });
12</script>