Wie erstelle ich ein Overlay-Menü?

Question

Ich möchte ein Menü erstellen, das angezeigt wird, wenn auf die Hamburger-Schaltfläche geklickt wird. Ich habe versucht, es selbst zu tun, aber ich wurde frustriert, weil alles, was ich versuchte, nicht funktionierte. Ich will es tun mit jQuery

Hier ist, wie es jetzt aussieht:

Hier ist der HTML:

<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> 

Und hier ist die 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

Dies ist nur ein einfaches Beispiel, um loszulegen, einfach ein div über alles (Sie müssen möglicherweise z-index verwenden) und toggle ausblenden und zeigen diese Überlagerung, wenn etwas angeklickt wird.

$(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

Ich habe die solution für Sie.

ODER

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; 
    } 
} 

-