菜单覆盖问题

Question

I'm having the issue with the overlay of a menu, when I open the menu the content in the background is still visible, i have tried playing with the z-index but it doesn't help.

The paragraph is seen in light gray when you open the menu .

 $("#menu").click(function() { $(".nav").toggleClass('is-open'); $(".overlay").toggleClass('is-visible'); $(this).toggleClass('open'); }); 

 * { margin: 0; padding: 0; } li { list-style: none; } html { color: #222; font-family: Avenir, sans-serif; } a { color: #111; display: inline-block; text-decoration: none; padding: 10px 0; text-transform: uppercase; font-weight: lighter; opacity: .7; transition: all 0.4s ease-in-out; } a:hover { opacity: 1; } .nav { text-align: right; float: right; } .nav li { transition-delay: 0.15s; transform: translate(30px, 0); opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .nav.is-open li { transform: translate(0px, 0); opacity: 1; } .nav.is-open li:nth-child(1) { transition-delay: 0.1s; } .nav.is-open li:nth-child(2) { transition-delay: 0.15s; } .nav.is-open li:nth-child(3) { transition-delay: 0.2s; } .nav.is-open li:nth-child(4) { transition-delay: 0.25s; } .nav.is-open li:nth-child(5) { transition-delay: .3s; } .nav.is-open li a { color: #fff; } #menu { float: right; width: 25px; height: 15px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; cursor: pointer; } #menu span { display: block; position: absolute; height: 2px; width: 100%; background: #222; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out; } #menu span:nth-child(1) { top: 0px; } #menu span:nth-child(2), #menu span:nth-child(3) { top: 9px; } #menu span:nth-child(4) { top: 18px; } #menu.open span:nth-child(1) { top: 9px; width: 0%; left: 50%; } #menu.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu.open span:nth-child(4) { top: 9px; width: 0%; left: 50%; } #menu.open span { background: #fff; } header { float: right; padding: 50px; } header { position: relative; } .overlay { background: transparent; width: 100%; height: 100vh; z-index: -4; transition: background .5s ease-in-out; } .overlay.is-visible { background: #000; position: absolute; z-index: -2; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <a id="menu" href="#"> <span></span> <span></span> <span></span> <span></span> </a> <nav> <ul class="nav"> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </header> <div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div> 

Answer 1

If you want to have different colors per paragraph, I suggest you to use a pseudo-element inside your .overlay element. You'll be able to colorize it, and it will hide your content:

.overlay {
  position: relative;
  ...
}
.overlay.is-visible:after {
  content: '';
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

Whole snippet:

 $("#menu").click(function() { $(".nav").toggleClass('is-open'); $(".overlay").toggleClass('is-visible'); $(this).toggleClass('open'); }); 

 * { margin: 0; padding: 0; } li { list-style: none; } html { color: #222; font-family: Avenir, sans-serif; } a { color: #111; display: inline-block; text-decoration: none; padding: 10px 0; text-transform: uppercase; font-weight: lighter; opacity: .7; transition: all 0.4s ease-in-out; } a:hover { opacity: 1; } .nav { text-align: right; float: right; } .nav li { transition-delay: 0.15s; transform: translate(30px, 0); opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .nav.is-open li { transform: translate(0px, 0); opacity: 1; } .nav.is-open li:nth-child(1) { transition-delay: 0.1s; } .nav.is-open li:nth-child(2) { transition-delay: 0.15s; } .nav.is-open li:nth-child(3) { transition-delay: 0.2s; } .nav.is-open li:nth-child(4) { transition-delay: 0.25s; } .nav.is-open li:nth-child(5) { transition-delay: .3s; } .nav.is-open li a { color: #fff; } #menu { float: right; width: 25px; height: 15px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; cursor: pointer; } #menu span { display: block; position: absolute; height: 2px; width: 100%; background: #222; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out; } #menu span:nth-child(1) { top: 0px; } #menu span:nth-child(2), #menu span:nth-child(3) { top: 9px; } #menu span:nth-child(4) { top: 18px; } #menu.open span:nth-child(1) { top: 9px; width: 0%; left: 50%; } #menu.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu.open span:nth-child(4) { top: 9px; width: 0%; left: 50%; } #menu.open span { background: #fff; } header { float: right; padding: 50px; } header { position: relative; } .overlay { position: relative; background: transparent; width: 100%; height: 100vh; z-index: -4; transition: background .5s ease-in-out; } .overlay.is-visible:after { content: ''; background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <a id="menu" href="#"> <span></span> <span></span> <span></span> <span></span> </a> <nav> <ul class="nav"> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </header> <div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div> 

Answer 2

Below code is working for your.

 $("#menu").click(function () { $(".nav").toggleClass('is-open'); $(".overlay").toggleClass('is-visible'); $(this).toggleClass('open'); }); 

  * { margin: 0; padding: 0; } li { list-style: none; } html { color: #222; font-family: Avenir, sans-serif; } a { color: #111; display: inline-block; text-decoration: none; padding: 10px 0; text-transform: uppercase; font-weight: lighter; opacity: .7; transition: all 0.4s ease-in-out; } a:hover { opacity: 1; } .nav { text-align: right; float: right; } .nav li { transition-delay: 0.15s; transform: translate(30px, 0); opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .nav.is-open li { transform: translate(0px, 0); opacity: 1; } .nav.is-open li:nth-child(1) { transition-delay: 0.1s; } .nav.is-open li:nth-child(2) { transition-delay: 0.15s; } .nav.is-open li:nth-child(3) { transition-delay: 0.2s; } .nav.is-open li:nth-child(4) { transition-delay: 0.25s; } .nav.is-open li:nth-child(5) { transition-delay: .3s; } .nav.is-open li a { color: #fff; } #menu { float: right; width: 25px; height: 15px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; cursor: pointer; } #menu span { display: block; position: absolute; height: 2px; width: 100%; background: #222; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out; } #menu span:nth-child(1) { top: 0px; } #menu span:nth-child(2), #menu span:nth-child(3) { top: 9px; } #menu span:nth-child(4) { top: 18px; } #menu.open span:nth-child(1) { top: 9px; width: 0%; left: 50%; } #menu.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu.open span:nth-child(4) { top: 9px; width: 0%; left: 50%; } #menu.open span { background: #fff; } header { float: right; padding: 50px; } header { position: relative; z-index:2 } .overlay { background: transparent; width: 100%; height: 100vh; z-index: -4; transition: background .5s ease-in-out; position:absolute; top:0px; } .overlay-2 { width: 100%; } .overlay.is-visible { background: #000; position: absolute; z-index: 1; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <a id="menu" href="#"> <span></span> <span></span> <span></span> <span></span> </a> <nav> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div class="overlay-2">Hello, <br> this is the para that is still visible when you open the menu</div> <div class="overlay"></div> 

Or

You want single div with .overlay then write below line in css.

.overlay.is-visible {
   color:transparent;
}

Answer 3

In the js code:

$("#menu").click(function() {
  $(".nav").toggleClass('is-open');
  $(".overlay").toggleClass('is-visible');
  $(".overlay p").toggle('display');

  $(this).toggleClass('open');
});

And in the html add p tag to content :

 <div class="overlay"><p>Hello, <br> this is the para that is still visible when you open the menu</p></div>