.matchMedia()を使ってハンバーガーメニューを作成する
window.matchMedia
window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。
例 1000pxまではjsを有効にさせる
ナビゲーションを作成
Toggleを使う場合、「:not(:animated)」を設定しないとボタンをクリックした回数分スライドしてしまうので、「:not(:animated)」の設定をしましょう。
またスマホのの場合、resizeイベントの解釈がiOSとandroidで微妙に違うので注意が必要です。
ユーザーエージェントでスマホかPCか判別してやる方法もあります
ユーザーエージェント
ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。
今回のパターンはPC・タブレットであればjQueryを有効に。スマホ(iPhone・Android)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。
逆にPC・タブレットであればjQueryを無効に。スマホ(iPhone・Android)であればjQueryを有効の場合
また、PCであればjQueryを無効に。スマホ(iPhone・Android)とタブレット(iPad)であればjQueryを有効の場合
このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。