開閉するナビ（レスポンシブ）

<div class="menubtn"><a href="#">MENU</a></div> <ul class="nav-global"> <li><a href="#">XXXX</a></li> <li><a href="#">XXXX</a></li> <li><a href="#">XXXX</a></li> </ul> .menubtn { display: none; } .nav-global { display: block; } .nav-global li { float: left; } /* レスポンシブ設定 幅600px以下 */ @media screen and (max-width: 600px) { .menubtn { display: block; } .nav-global { display: none; } .nav-global li { float: none; } } $(function(){ $(window) // ウインドウサイズ変更時.nav-globalがdisplay: none;のままの不具合回避 .on('resize', function() { // resizeイベントはブラウザのウインドウサイズ変更や、スマホ・タブレットの縦横を変えた時も発生 var $nav = $('.nav-global'); var listFloat = $nav.find('li').css('float'); // 600px以下で'none'、それ以上で'left'が代入される if (listFloat === 'none') { $nav.css('display','none'); // 600px以下の場合非表示 } else { $nav.css('display', 'block'); // それ以上で表示 } /* .css('CSSプロパティ', 値)、.css('CSSプロパティ') パラメータに「プロパティと値」を指定すると変更、「プロパティのみ」を指定すると値を取得 */ }); $('.menubtn > a') .on('click', function() { $('.nav-global').slideToggle(400); }); });