Прикрыть текст (с непрозрачностью CSS) твердым div

после исследования я не мог найти ответ, поэтому я спрашиваю его здесь. Для мобильной версии моего веб-сайта я хотел бы, чтобы кнопка открыла меню навигации (которое статично на настольной версии) и закрыла основную часть. Я хотел, чтобы текст на главной части был виден все время, но когда навигационное меню было открыто, оно исчезало. Я нашел функцию непрозрачности CSS, которая звучала многообещающе, Javascript работал для всего этого, но Nav div не блокировал выцветший текст основной части, когда он был покрыт. Может кто-нибудь помочь? Вот мой код:

function openNav() {
document.getElementById("nav").style.left = "5px";
document.getElementById("list").style.opacity = "0.5";
document.getElementById("navc").style.display = "inline";
}
function closeNav() {
document.getElementById("nav").style.left = "-206px";
document.getElementById("list").style.opacity = "1";
document.getElementById("navc").style.display = "none";
}
body {
background-color: #000000;
color: #ffffff;
margin-bottom: 0;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}
#nav {
background-color: rgba(0, 0, 0, 1.0);
width: 188px;
margin-left: auto;
margin-right: auto;   
text-align: left;
line-height: 16px;
border: 1px solid white;
border-bottom: 0;
border-top: 0;
padding: 8px;
height: 785px;
position: absolute;
left: -206px;
overflow: auto;
}
#navm {
height: 30px;
width: 30px;
display: inline;
position: absolute;
top: 6px;
right: 6px;
}
#navc {
display: none;
height: 30px;
width: 30px;
position: absolute;
top: 6px;
right: 6px;
}
#list {
margin-left: 205px;
width: 310px;
line-height: 18px;
text-align: left;
padding: 8px;
position: absolute;
left: -208px;
}
#banner {
width: 308px;
height: 30px;
border: 1px solid white;
position: relative;
margin-top: 0;
display: block;
}
<div id="container">
<img src="/img/banner.png" alt="Banner" id="banner">
<img src="/img/navm.png" alt="" id="navm" onclick="openNav()">
<img src="/img/navc.png" alt="" id="navc" onclick="closeNav()">
<div id="nav">
<a href="/link1.html">Link 1</a><br>
<a href="/link2.html">Link 2</a><br>
<a href="/link3.html">Link 3</a><br><br>
<a href="/link4.html">Link 4</a><br><br>
</div>
<div id="list">
<h3 class="list" style="margin-top: 0">About Us</h3>
<div class="bio" style="margin-bottom: 14px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. <a href="/link5.html">Link 5 &gt;&gt;</a>
</div>
  </div>

1 ответ