ズボラ応援ブログ始めました

ナビゲーションメニュー実装&jQueryが動かない場合の対処方法

f:id:niketcha:20190907214713p:plain

ブログにナビゲーションメニューを付けました。マウスオーバーでサブカテゴリーが表示され、スマホではトグルメニューが表示されるというものです。

コピペだけではjQueryが動かなかったので、その際の対処方法を載せています。

またナビゲーションメニュー実装時に参考にしたサイトも合わせて紹介します。

jQueryが動かなかった原因

他サイトを参考にナビゲーションメニューを付けたのですが、トグルメニューがうまく動かない。使われていたのはslideToggleでした。

色々検証したところ、原因は読み込んでいるCDNの問題でした。コピペ元ではhttp://~のソースを読んでいましたが、私のサイトはSSL化しています。SSL化したサイトでは、https://から始まるCDNでないと読み込むことができないんですね。

f:id:niketcha:20190725140935p:plain

Chromeデベロッパー・ツールにもエラーが出ていました。

jQueryが動かなくて困っている方は、chromeでF12を押して確認してみてください。



ナビゲーションメニューを参考にしたサイト

ナビゲーションメニューの実装には下記のサイトを参考にさせていただきました。

※現在当サイトでは、操作性を考慮してトグルメニューを廃止しました。動作デモはリンク先のサイトを参照してください。

www.yukihy.com

そのまま使うとスクロールバーが消えたり動かせなくなってしまいました。heightを100%やautoにしているあたりが原因みたいでしたが、デザインを崩さずに直す方法がわからなかったので、とりあえず次のcssを入れて対処しました。

div#container {
overflow: scroll;
height: 100vh;
}

コメント

タイトルとURLをコピーしました