ハンバーガーメニューの実装が上手くいかないのです。

#ハンバーガーメニューの実装が上手くいかないのです。

wordpressで、オリジナルテーマを手作りしながら、ポートフォリオサイト作りをしています。
基本部分はできあがり、viewport設定、スマホ対応をしているところです。

スマホサイズのときには、グローバルメニューを、ハンバーガーメニューにしたいと思い、
jQueryを使っての実装にチャレンジしています。

ボタンは表示され、css設定も特に問題ないのですが、
表示/非表示の動作をしてくれないのです。

headタグ内に書いたコードを何度も見直しましたが、特に不備の無さそうです。

ソースは以下の通りです。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/reset.css"> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"> <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400&display=swap" rel="stylesheet"> <title><?php bloginfo('name'); ?></title>  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $("#menubtn").click(function(){ $("#nav-menu").slideToggle(); }); }); </script>  </head> <body> <div class="wrap"> <header> <div class="header-wrap"> <div class="header-content"> <h1 class="header-logo"><a href="#"><img src="#"></a></h1> <button type="button" id="menubtn">MENU</button> <nav class="global-nav" id="nav-menu"> <ul> <li class="global-nav-item"><a href="#">HOME</a></li> <li class="global-nav-item"><a href="#">Profile</a></li> <li class="global-nav-item"><a href="#/">Portfolio</a></li> <li class="global-nav-item"><a href="#">Contact</a></li> </ul> </nav> </div> </div> </header> ```

css
/*=====================================

header for sp viewport

=====================================/
@media(max-width: 640px) {
#nav-menu{
display: none;
}
.header-wrap {
height: 100px;
width: 100%;
background-color: #FF4F7D;
}

.header-content {
    text-align: center;
}

.header-logo {
    height: 60px;
    width: 306px;
    margin: 0 auto;
}

.global-nav {
    width: 100%;
    height: 40px;
    background-color: #ffffff;
}

.global-nav-item {
    display: inline-block;
    height: 40px;
    margin: 0 30px;
}


.global-nav-item a {
    display: inline-block;
    text-decoration: none;
    color: #303030;
    font-size: 1.6rem;
    line-height: 40px;
}

}


作業的には、元からつくり終わっていたリリース済wordpressサイトを開き、
Google chromeのデベロッパーツール内で、
<!--ここから加筆--> <!--ここまで加筆-->の部分を加筆して挑戦してみています。

どなたかわかりそうな方、ご助力のほどどうぞよろしくお願いいたします。

Lhankor_Mhy

2019/06/15 04:47

当方で試したところ、「表示/非表示の動作」ができましたので、問題が再現しませんでした。環境の問題か、ご提示いただいていない部分のコードに問題があるのかもしれません。

Lhankor_Mhy

2019/06/15 04:53 編集

ryujno

2019/06/15 09:44

ありがとうございます！ httpsにして、wordpressアップロードしたら、無事、解決しました！

Lhankor_Mhy

2019/06/15 09:47

ご解決されて何よりです。サイトがhttpsの時には、javascriptもhttpsに合わせなくてはいけないので、今後も覚えておかれるといいかと思います。自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself

ryujno

2019/06/15 09:48

なるほど！　勉強になりました。ありがとうございます！

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

回答1件

自己解決

Lhankor_Mhy　さんから頂いたとおり、
jQueryを読み込む際のアドレス記述を、
http→httpsに直したら、無事上手く行きました。

Lhankor_Mhy　さん、ありがとうございます！

投稿2019/06/15 09:49

ryujno

総合スコア19

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

ハンバーガーメニューの実装が上手くいかないのです。

関連した質問