ふと制作したホームページをスマホで見たところ、ハンバーガーメニュー(よくスマホの上に出てくる三本線のことです。タップするとスマホ用のナビメニューが出てきますよね。)が見えないことに気が付きました。
PCで閲覧するには良いですが、スマホで閲覧したときにメニューが無いのは不便です。

ただローカルで確認するとちゃんとハンバーガーメニューが出てくるのですよね~
レンタルサーバー上にアップロードすると見えなくなるのです。

ハンバーガーメニューが見えないとすると、slicknavというjQueryのレスポンシブメニュープラグインの不具合かな?と思いきや、ローカルでは動いている。謎です。

デベロッパーツールで見てみると、あっ確かにエラーが出ている!

Mixed Content: The page at ‘https://*******.com/’ was loaded over HTTPS, but requested an insecure script ‘http://code.jquery.com/jquery-3.1.0.min.js’. This request has been blocked; the content must be served over HTTPS.

このエラーメッセージでぐぐってみると以下の記事が見つかりました。(英語です)
https://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire

推測ですが、リンクに非SSL(http://~)が含まれていると、Chromeで閲覧したときにブロックされてしまうのでは…?

確かにエラーメッセージで指摘されている通り、headタグ内で指定している、jqueryの読み込み用CDNのリンクがhttpになっていました。よってここを最新のリンクに書き換えます。

修正前

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>

 

修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

これでサーバにアップロードしたら、無事にハンバーガーメニューが出現してくれました。
解決です!

 

 

コメントを残す