前提・実現したいこと
ハンバーガーメニューボタンを正常に表示させたい
発生している問題・エラーメッセージ
スマホでハンバーガーメニューボタンをタップして開き、
閉じるボタンで閉じると、ハンバーガーメニューボタンが表示されなくなってしまいます。
ボタンの位置を押すとメニューを開くことはできますが、表示はされません。
ページを再度読み込みすると、元どおり表示されますが、
メニューを開くと同じ現象が起きます。
Chromeの検証ツールでスマホ表示をしても、エラーを再現することはできず、
iPhoneでの表示エラーのようです。
ご教授いただけると大変助かります。
よろしくお願いいたします。
参考URL
http://tpldebut.shop8.makeshop.jp/
該当のソースコード
HTML
<li class="button-menu"> <div class="humberger"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div>
JS
$('.humberger').on('click', function() { if(!$('body').hasClass('fixed')) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); $('body').addClass('drawer-opened'); $('.button-menu').addClass('button-menu-opened'); } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo(0 , scrollpos); $('body').removeClass('drawer-opened'); $('.button-menu').removeClass('button-menu-opened'); } });
CSS
.humberger{ position: fixed; top: 16px; right: 15px; width: 30px; z-index: 100; padding: 13px 10px 10px; z-index: 10000; } .drawernav-search{ width: 100%; padding-right: 80px; box-sizing: border-box; } .drawernav-list-main ul{ padding: 0 15px 10px; } .drawernav-list-main{ border-bottom: solid 1px #666; } .drawernav-list-main:first-child{ border-top: solid 1px #666; } .drawernav-list-category{ padding-bottom: 8px; } .drawernav-list-title{ padding: 15px; display: block; } .drawernav-list-main a{ padding: 15px; display: block; } .drawernav-sub-list-title a, .drawernav-sub-list-data a{ display: block; padding: 8px 15px; } .drawernav-sub-list-data{ padding-left: 25px; } .drawernav-list-main-title{ padding: 15px 15px 5px; } .drawernav-sublist a{ padding: 5px 0 5px 1em; } .drawernav-list a{ color: #FFF; } .drawernav-list a:hover{ text-decoration: none; } .icon-bar{ height: 3px; background: #333; display: block; margin-bottom: 6px; transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ } .fixed-content{ right: inherit; width: 100%; z-index: 2; transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ } .drawer-opened .fixed-content{ left: -240px; } .drawer-opened .button-menu{ right: 0; } .drawer-opened .humberger .icon-bar{ background: #fff; } .drawer-opened .humberger :nth-child(1){ transform:translate(0,9px) rotate(45deg); } .drawer-opened .humberger :nth-child(2){ transform:translate(-20px ,0); opacity:0.0; } .drawer-opened .humberger :nth-child(3){ transform:translate(0,-9px) rotate(-45deg); } .button-menu{ position: fixed; top: 0; right: -100%; background: rgba(30,30,30,0.9); box-sizing: border-box; color: #fff; z-index: 2; transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ width: 100%; height: 100%; } .button-menu-opened{ overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .fixed { position: fixed; width: 100%; height: 100%; }