オーバーレイモバイルメニューの作成方法は？

Question

ハンバーガーボタンをクリックしたときに表示されるメニューを作成します。私はそれを自分自身でやろうとしましたが、私が試したすべてがうまくいかなかったので、私は不満を感じました。

ここ

はHTMLです：：私はjQueryを使ってそれをやりたい

ここ

は、それが今のように見える方法です

<div class="intro"> 
    <div class="container"> 

     <!-- Navigation --> 

     <div class="menu"> 
      <ul class="navigation"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#contactMe" class="jump-contact">CONTACT</a></li> 
       <li><a href="#">BLOG</a></li> 
       <li><a href="#myWork" class="jump-work">MY WORK</a></li> 
      </ul> 
     </div> 

     <div class="toggle-nav">&#9776;</div> 

     <!-- Intro Section --> 

     <h1>Nelson Lupanda</h1> 
     <h3>Front End Developer</h3> 
    </div> 
</div> 

そして、ここでCSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    font-weight: lighter; 
} 

@media only screen and (min-width: 380px) and (max-width: 500px) and 
    (orientation:portrait), (max-width:480px) and (orientation:landscape) { 

    html { 
     font-size: 16px; 
    } 

    * { 
     box-sizing:border-box; 
     moz-box-sizing:border-box; 
     webkit-box-sizing:border-box; 
    } 

    hr { 
     size:1; 
     width: 15%; 
    } 

    /* intro section */ 

    .intro { 
     background-color: #f2f2f2; 
     height: auto; 
     width: 100%; 
     font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    } 

    .intro .container { 
     height: 100%; 
     padding: 20px 15px 50px 15px; 
    } 

    .intro .menu { 
     text-align: center; 
     display: none; 
    } 

    .intro .menu ul { 
     background-color: #f2f2f2; 
    } 

    .intro .menu li { 
     display: block; 
     list-style: none; 
     margin-top: 10px; 
    } 

    .intro .menu li a { 
     text-decoration: none; 
     color: #000000; 
    } 

    .intro .toggle-nav { 
     float: right; 
     clear: right; 
     margin-right: 20px; 
     font-size: 1.5rem; 
     cursor: pointer; 
    } 

    .intro h1 { 
     margin: 60px 0 0 0; 
    } 

    .intro h3 { 
     margin-bottom: 30px; 
    } 

    .intro h1, .intro h3 { 
     font-weight: bolder; 
     text-align: center; 
    } 

} 

Answer 1

にですこれは簡単な例です。すべての上にdivを置くだけですz-indexを使用する必要があるかもしれません）、何かがクリックされたときにそのオーバーレイを非表示にして表示します。

$(document).ready(function() { 
 
    $('.menu').on('click', function() { 
 
     $('.overlay').show(); 
 
    }); 
 
    $('.close').on('click', function() { 
 
     $('.overlay').hide(); 
 
    }) 
 
})

.content { 
 
    width: 100%; 
 
    height: 20000px; 
 
    background-color: yellow; 
 
} 
 
.menu { 
 
    margin-left: 1rem; 
 
    margin-top: 1rem; 
 
} 
 
.overlay { 
 
    background-color: rgba(0,0,0,.8); 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    display:none; 
 
} 
 
.close { 
 
    margin-left: 1rem; 
 
    margin-top: 1rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="overlay"> 
 
     <button class="close">close</button> 
 
    </div> 
 
    <button class="menu">menu</button> 
 
</div>

Answer 2

私はあなたのためsolutionを持っています。

OR

JS：

$(function(){ 
    $(".toggle-nav").click(function(){ 
    $(".menu").toggleClass("open"); 
    }); 
}); 

HTML：

<div class="intro"> 
    <div class="container"> 

     <!-- Navigation --> 
     <div class="toggle-nav">&#9776;</div> 
     <div class="menu"> 
      <ul class="navigation"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#contactMe" class="jump-contact">CONTACT</a></li> 
       <li><a href="#">BLOG</a></li> 
       <li><a href="#myWork" class="jump-work">MY WORK</a></li> 
      </ul> 
     </div> 



     <!-- Intro Section --> 

     <h1>Nelson Lupanda</h1> 
     <h3>Front End Developer</h3> 
    </div> 
</div> 

CSS：

html, body { 
width: 100%; 
height: 100%; 
margin: 0px; 
font-weight: lighter; 
} 
@media only screen and (min-width: 380px) and (max-width: 500px) and (orientation:portrait), (max-width:480px) and (orientation:landscape) { 
    html { 
     font-size: 16px; 
    } 

    * { 
     box-sizing:border-box; 
     moz-box-sizing:border-box; 
     webkit-box-sizing:border-box; 
    } 

    hr { 
     size:1; 
     width: 15%; 
    } 

    /* Style for the menu */ 



    /* intro section */ 

    .intro { 
     background-color: #f2f2f2; 
     height: auto; 
     width: 100%; 
     font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    } 

    .intro .container { 
     height: 100%; 
     padding: 20px 15px 50px 15px; 
    } 

    .intro .menu { 
     text-align: center; 
     display: none; 
    } 

    .intro .menu ul { 
     background-color: #f2f2f2; 
    } 

    .intro .menu li { 
     display: block; 
     list-style: none; 
     margin-top: 10px; 
    } 

    .intro .menu li a { 
     text-decoration: none; 
     color: #000000; 
    } 

    .intro .toggle-nav { 
     float: right; 
     clear: right; 
     margin-right: 20px; 
     font-size: 1.5rem; 
     cursor: pointer; 
     display: block; 
     width: 100%; 
    } 

    .intro h1 { 
     margin: 60px 0 0 0; 
    } 

    .intro h3 { 
     margin-bottom: 30px; 
    } 

    .intro h1, .intro h3 { 
     font-weight: bolder; 
     text-align: center; 
    } 

    .container > .toggle-nav { 
     text-align: right; 
    } 

    .menu.open { 
     display: block; 
    } 
} 

-