/* HTML
<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>
*/
/* CSS
.menubtn { display: none; }
.nav-global { display: block; }
.nav-global li { float: left; }
@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);
});
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.