resizeに対応したハンバーガーメニュー

2024年7月18日 #CSS, #jQuery

ハンバーガーメニューの場合、メニューの表示・非表示をresizeに対応させる必要があります。

//resizeとloadした時、macthmedia900pxだったら#g-navと#ham-btnのクラスを削除
let windowWidth = $(window).width(); //resize前のwidth

$(window).on(‘resize load’,function(){
　let ww = $(window).width(); //resize後のwidth
　if(windowWidth != ww) {
　　if(window.matchMedia(‘(min-width: 900px)’).matches){
　　　$(‘#g-nav’).removeClass(‘move’);
　　　$(‘#ham-btn’).removeClass(‘is-active’);
　　}
　　windowWidth = ww;
　}
});