PC時は通常のナビゲーションでSP時はハンバーガーメニューの時のjQuery
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pc時は横並びでsp時にハンバーガーメニュー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Lorem, ipsum</h1> <nav id="pc-nav"> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> <li><a href="#">ボタン5</a></li> </ul> </nav> <button id="ham-btn"> <span></span> </button> </header> <nav id="sp-nav"> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> <li><a href="#">ボタン5</a></li> </ul> </nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js' integrity='sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==' crossorigin='anonymous'></script> <script> $(function(){ //ファイルが読み込まれた時のbodyの幅を変数に代入する let w = $(window).innerWidth(); //画面をリサイズしたら $(window).on('load resize',function(){ //リサイズ毎に幅を取得する let currentW = $(window).innerWidth(); if(w == currentW){ //幅は変わっていないresize return; }else{ //幅が変わったresize if(w > 800){ //pcの時 $('#sp-nav').hide(); $('#ham-btn').removeClass('is-active'); } } }); //#ham-btnをクリックしたら $('#ham-btn').on('click',function(){ $(this).toggleClass('is-active'); $('#sp-nav').slideToggle(200); }); }); </script> </body> </html>
