質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

メニューが残ったまま、背景がなくなります。なぜ背景を押した時にメニューは残ってしまうのでしょうか?

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,745
退会済みユーザー

退会済みユーザー

右上のハンバーガーボタンを押してドロワーメニューが出てきた後に、
メニュー、ボタン、半透明の黒い背景どれをクリックしても、メニューが収まり、背景も消えるようにしたかったのですが、黒い背景を押しても、戻ってくれません。

メニューが残ったまま、背景がなくなります。
なぜ背景を押した時にメニューは残ってしまうのでしょうか?

右上のハンバーガーボタンは、ある程度スクロールすると表記されます。
右上のハンバーガーボタンは、下記のように800pxスクロールすると現れます。

if($(window).scrollTop() > 800) {
                    $('.modal-button-wrap,.modal-button-wrapbutton').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 -->

・jQuery

<!-- 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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/04/11 19:21

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

0

サラッとしか見てませんがとりあえずidの#も抜けてるしコードをコピペして(#等を補完して)走らせてもハンバーガーボタンも出てきません。
これではアドバイスのしようもないのでもう少し必要なコードと不要なコードを整理して書き込んでくれると答えやすいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/19 17:34

    自分が貼り付けたサンプルでは、表記されます。
    右上のハンバーガーボタンは、ある程度スクロールすると表記されます。

    キャンセル

  • 2016/01/19 18:08

    右上のハンバーガーボタンは、下記のように800pxスクロールすると現れます。

    if($(window).scrollTop() > 800) {
    $('.modal-button-wrap,.modal-button-wrap__button').fadeIn();
    }else{
    $('.modal-button-wrap,.modal-button-wrap__button').fadeOut();
    }

    キャンセル

check解決した方法

-3

https://teratail.com/questions/25951
上記で解決しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • トップ
  • HTMLに関する質問
  • メニューが残ったまま、背景がなくなります。なぜ背景を押した時にメニューは残ってしまうのでしょうか?