Как сделать некликабельную область у меню

Question

Всем добра!

Такой вопрос: Как сделать, чтобы область, где расположено меню была не кликабельной?

Т.е. при клике на эту область <nav id="myDropdown" class="main_menu"> </nav> окно меню не закрывалось, но при клике вне этой области оно закрылось?

Спасибо за помощь! :3

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("main_menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.main_menu {
    width: 400px;
    border-radius: 5px;
    margin: 40px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    min-height: 100px;
    display: none;
    position: absolute;
    background: #fff;
    font-size: 16px;
    
}

.dropdown {
    position: relative;
    display: inline-block;
}


.show {display: block;}

<div onclick="myFunction()" class=" block_menu dropdown dropbtn">Кнопочка(тут картинка кнопки)
<nav id="myDropdown" class="main_menu">
    <ul>
        <li><a class="main_menu-point" href="">1</a></li>
        <li><a class="main_menu-point" href="">2</a></li>
        <li><a class="main_menu-point" href="">3</a></li>
    </ul>
</nav>
</div>

БЛОГ НА HUSL

Как сделать некликабельную область у меню

Ответы (0 шт):