Q&A
自分が貼り付けたサンプルでは、表記されます。
右上のハンバーガーボタンは、ある程度スクロールすると表記されます。
右上のハンバーガーボタンを押してドロワーメニューが出てきた後に、
メニュー、ボタン、半透明の黒い背景どれをクリックしても、メニューが収まり、背景も消えるようにしたかったのですが、黒い背景を押しても、戻ってくれません。
メニューが残ったまま、背景がなくなります。
なぜ背景を押した時にメニューは残ってしまうのでしょうか？
右上のハンバーガーボタンは、ある程度スクロールすると表記されます。
右上のハンバーガーボタンは、下記のように800pxスクロールすると現れます。
if($(window).scrollTop() > 800) {
$('.modal-button-wrap,.modal-button-wrap__button').fadeIn();
}else{
$('.modal-button-wrap,.modal-button-wrap__button').fadeOut();
}
ソース
・HTML
<!-- drawermenu --> <!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div> <!-- drawermenu --> <nav> <div id="drawer"> <ul> <li><a href="#course">カリキュラム</a></li> <li><a href="#room">教室</a></li> <li><a href="#accsess">アクセス</a></li> <li><a href="#contactUs">お問い合わせ</a></li> </ul> </div> </nav> <!-- /drawermenu -->
・ｊQuery
<!-- drawermenu-button-three-whiteline --> <script> $(function(){ $('.overlay,#course,.close,.tutor1,.modal-button-wrap__button').on('click', function() { $(this).toggleClass('active'); return false; }); }); </script> <!-- drawermenu --> <script> $('.modal-button-wrap__button').click(function(){ //ulをクリックすると、メニューが戻る $('#drawer ul').toggleClass('showMenue'); }); $('#drawer ul li').click(function(){ //liをクリックすると、メニューが戻る $('#drawer ul').toggleClass('showMenue'); }); $('.overlay_drawermenu').click(function(){ //うまくいかない.overlay黒い半透明の背景をクリックすると、メニューが戻る $('#drawer ul').toggleClass('showMenue'); }); </script> <!-- drawermenu-buttonwrap-fadein-fadeout --> <script> $('.modal-button-wrap,.modal-button-wrap__button').css('display','none'); $(window).scroll(function(){ if($(window).scrollTop() > 800) { $('.modal-button-wrap,.modal-button-wrap__button').fadeIn(); }else{ $('.modal-button-wrap,.modal-button-wrap__button').fadeOut(); } }); </script> <!-- drawermenu-blackbackground --> <script> //5回目モーダルウィンドウ // #course figureをクリック $('.modal-button-wrap__button').click(function(){ //透明の背景、オーバーレイのhtmlを作る $('body').append('<div class="overlay_drawermenu"></div>'); //透明の背景、オーバーレイをフェードイン $('.overlay_drawermenu').fadeIn('slow'); // // date属性よりモーダルコンテンツのIDを取得 // var modal = '#' + $(this).attr('data-tutor'); // // ライトボックスの画像フェードイン // $(modal).fadeIn('slow'); // 「.modal-overlay」あるいは「.modal-close」をクリック $('.overlay_drawermenu, .close').off().click(function(){ ///透明の背景をフェードアウト // $('.overlay_drawermenu').fadeOut('slow'); // 透明の背景オーバーレイはフェードアウトしてから削除 $('.overlay_drawermenu').fadeOut('slow', function(){ $('.overlay_drawermenu').remove(); }); }); }); </script>
・CSS
/* 左から出てくるdrawer-menu */ #drawer ul { z-index: 300; width: 100%; position: fixed; top: 0; padding-top: 2.8rem; background-color: rgba(255,100,50,.2); cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; } #drawer li { background-color: rgba(255,100,50,.7); margin-bottom: 0.2rem; } #drawer li a { display: block; height: 3rem; line-height: 3rem; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; text-shadow:0.1rem 0.1rem 0 #BB1310; } /* .modal-button-wrap__buttonをクリックした際に加えられる */ #drawer .showMenue { margin-left: 0%; } /* /.modal-button-wrap__buttonをクリックした際に加えられる */ /* modalwindow-button-white-threeborder */ /*モーダルウィンドウのボタンの囲い*/ .modal-button-wrap { position: fixed; /*border: solid #fff 0.1rem;*/ top: 2%; right: 3%; } @media (min-width: 960px) { .modal-button-wrap { top: 5%; right: 5%; } } /*モーダルウィンドウのボタン*/ .modal-button-wrap__border { box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,.9); } .modal-button-wrap__button, .modal-button-wrap__button span { display: inline-block; transition: all .4s; box-sizing: border-box; } /*button-size*/ .modal-button-wrap__button { position: relative; width: 5rem; height: 4.4rem; } @media (min-width:960px) { .modal-button-wrap__button { position: relative; width: 5rem; height: 4.4rem; } } .modal-button-wrap__button span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px; } @media (min-width:960px) { .modal-button-wrap__button span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px; } } .modal-button-wrap__button span:nth-of-type(1) { top: 0; } .modal-button-wrap__button span:nth-of-type(2) { top: 20px; } .modal-button-wrap__button span:nth-of-type(3) { bottom: 0; } /*drawermenuのボタンのアニメーション*/ .modal-button-wrap__button.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-315deg); transform: translateY(20px) rotate(-315deg); } .modal-button-wrap__button.active span:nth-of-type(2) { opacity: 0; } .modal-button-wrap__button.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(315deg); transform: translateY(-20px) rotate(315deg); } /* /modalwindow-button */ /* modalwindow-body */ /*#course div { display: none; position:fixed; z-index:2; width:80%; top: 25%; left: 0; right: 0; margin:auto; cursor:pointer; }*/ /*#course div img:hover { opacity: 1; }*/ /* drawermenu-overlay-半透明のグレーバック */ /* lightbox-overlay-半透明のグレーバックは別のcss（.overlay） */ .overlay_drawermenu { z-index: 1; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.4); transition: all .3s; } /* /drawermenu */ /* lightbox-start */ /* lightbox-overlay-半透明のグレーバック */ /* drawermenu-overlay-半透明のグレーバックは別のcss（.overlay_drawermenu） */ .overlay { z-index:1; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.4); transition: all .3s; } /* /modalwindow-body */ /*#drawer .showMenue { margin-left: 0%; }*/ /* light-box-yufuimages */ #lightbox-course > div { display: none; position:fixed; z-index:2; width: 98%; top: 0; bottom: 0; left: 0; right: 0; text-align: center; vertical-align: middle; margin: auto; cursor: pointer; /* background-color: #fff;*/ } @media (min-width:960px) { #lightbox-course > div { display: none; position:fixed; z-index:2; width: 70%; top: 0; bottom: 0; left: 0; right: 0; text-align: center; vertical-align: middle; margin: auto; cursor: pointer; /* background-color: #fff;*/ } } #lightbox-course img.close { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
回答2件
0
ベストアンサー
https://teratail.com/questions/25951
上記で解決しました。
投稿2016/02/01 04:09
退会済みユーザー
総合スコア0
0
サラッとしか見てませんがとりあえずidの#も抜けてるしコードをコピペして(#等を補完して)走らせてもハンバーガーボタンも出てきません。
これではアドバイスのしようもないのでもう少し必要なコードと不要なコードを整理して書き込んでくれると答えやすいと思います。
投稿2016/01/19 07:12
総合スコア89
右上のハンバーガーボタンは、下記のように800pxスクロールすると現れます。
if($(window).scrollTop() > 800) {
$('.modal-button-wrap,.modal-button-wrap__button').fadeIn();
}else{
$('.modal-button-wrap,.modal-button-wrap__button').fadeOut();
}
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。