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

前提・実現したいこと

https://www.aiship.jp/knowhow/archives/31639
上記のページを参考にハンバーガーメニューを作成したい

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

何も表示されない

該当のソースコード

HTML
1<html>
2<head>
3	<title></title>
4	<link href="css/style.css" rel="stylesheet" type="text/css">
5
6	<script>
7	$(function(){
8    $(".btn-gnavi").on("click", function(){
9        // ハンバーガーメニューの位置を設定
10        var rightVal = 0;
11        if($(this).hasClass("open")) {
12            // 位置を移動させメニューを開いた状態にする
13            rightVal = -300;
14            // メニューを開いたら次回クリック時は閉じた状態になるよう設定
15            $(this).removeClass("open");
16        } else {
17            // メニューを開いたら次回クリック時は閉じた状態になるよう設定
18            $(this).addClass("open");
19        }
20        $("#global-navi").stop().animate({
21            right: rightVal
22        }, 200);
23    });
24});
25</script>
26
27</head>
28<body>
29<script
30src="https://code.jquery.com/jquery-3.3.1.min.js"
31integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
32crossorigin="anonymous"></script>
33
34<div id="wrapper">
35        <span></span>
36        <span></span>
37        <span></span>
38 
39<nav id="global-navi">
40 
41<ul class="menu">     
42 
43<li><a href="">トップ</a></li>
44<li><a href="">概要</a></li>
45<li><a href="">特集</a></li>
46<li><a href="">アクセス</a></li>
47<li><a href="">お問い合わせ</a></li>
48</ul>
49</nav>
50</div>
51</body>
52</html>

css
1#global-navi {
2    background:#333;
3    position: fixed;
4    top: 0;
5    right: 0px;
6    width: 100%;
7}
8#wrapper nav ul li{
9display:inline-block;
10font-size: 16px;
11padding:  30px 20px 25px 28px;
12}
13#wrapper nav ul li a{
14color: #ddd
15}
16/*スマホ画面で例１のハンバーガーメニューの形にする*/
17@media screen and (max-width: 600px) {
18#wrapper nav {
19    position: fixed;
20    top: 0;
21    right: -300px;
22    width: 300px;
23    height: 100%;
24    padding-top: 50px;
25    background:#333;
26    font-size: 16px;
27    box-sizing: border-box;
28    z-index: 2
29}
30#wrapper nav ul li {
31    display:block;
32    padding: 20px 28px
33}
34 
35#wrapper nav ul li a {
36    text-decoration: none;
37    color: #ddd
38}
39 
40#wrapper .btn-gnavi {
41    position: fixed;
42    top: 20px;
43    right: 20px;
44    width: 30px;
45    height: 24px;
46    z-index: 3;
47    box-sizing: border-box;
48    cursor: pointer;
49    -webkit-transition: all 400ms;
50    transition: all 400ms
51}
52 
53#wrapper .btn-gnavi span {
54    position: absolute;
55    width: 30px;
56    height: 4px;
57    background: #666;
58    border-radius: 10px;
59    -webkit-transition: all 400ms;
60    transition: all 400ms
61}
62 
63#wrapper .btn-gnavi span:nth-child(1) {
64    top: 0
65}
66 
67#wrapper .btn-gnavi span:nth-child(2) {
68    top: 10px
69}
70 
71#wrapper .btn-gnavi span:nth-child(3) {
72    top: 20px
73}
74 
75#wrapper .btn-gnavi.open {
76    -webkit-transform: rotate(180deg);
77    transform: rotate(180deg)
78}
79 
80#wrapper .btn-gnavi.open span {
81    background: #fff
82}
83 
84#wrapper .btn-gnavi.open span {
85    width: 24px;
86}
87#wrapper .contents section p {
88    position: absolute;
89    top: 50%;
90    width: 30%;
91    line-height: 1.4;
92    font-size: 20px;
93    color: #fff;
94    text-shadow: 0 0 6px #666
95}
96 
97#wrapper .contents section:nth-child(odd) p {
98    left: 10%
99}
100 
101#wrapper .contents section:nth-child(even) p {
102    right: 10%
103}
104}

試したこと

スクリプトを読み込ませる位置がいけないのかと思い

</body>の前で読み込ませてみたのですが反映されませんでした。

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

回答1件

ベストアンサー

上記サイトの例がJQueryを理解している人前提で、ずいぶん端折られている部分がありますね。
ピンポイントで重要な部分のコードだけを例示して、あとはサンプルをみてねって感じだと思います。

で、問題は

javascript
1$(".btn-gnavi").on("click", function(){

これは本来calss="btn-gnavi"といクラス名が付与されたタグがないと動きません。
それがハンバーガーメニューのアイコン（三本線のやつ）になり、そのアイコンをクリックするとメニューが表示される仕組みです。

で、肝心のハンバーガーメニューのアイコンが例示のコードにはないので何も表示されない状態です。

まず、上記サイトの「例１　基本的なハンバーガーメニューを作成する」のリンクでサンプルを見てください。ブラウザならソースもみれるので完成形を見てから解説を読むのをおススメします。

投稿2020/04/16 07:26

編集2020/04/16 07:30

storm3

総合スコア330

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！