Как закрыть оверлей при клике по меню, используя Javascript - PullRequest
Новая
       24

Как закрыть оверлей при клике по меню, используя Javascript

0 голосов
/ 11 апреля 2019

Я настраиваю навигацию по меню, которая в настоящее время создается для отображения и скрытия при нажатии на значок меню гамбургера.Навигация по меню - это контейнер со 100% фиксированным наложением.

Если вы посмотрите ссылку JS Fiddle, раздел меню - это белый столбец слева, а синий - просто наложение, внутри которого находится навигационная панель.

Однако я бы хотелиметь возможность также закрывать навигацию по меню всякий раз, когда они щелкают за пределами меню / также щелкают по наложению, а не просто снова нажимая значок меню.Я пытался создать скрипт, но что-то не так - я не знаком с e.target, но, похоже, это то, что требуется, исходя из того, что я читал .. (?)

Буду признателен за любую помощь в этом.

Я построил то, что у меня до сих пор в JSFiddle - извините, но мой код скрипта не будет работать в разделе JS, поэтому мне пришлось включить его в HTMLраздел (дополнительная благодарность, если кто-то может помочь, пожалуйста, в чем причина)

https://jsfiddle.net/SJStorey/4ohvkxq8/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css">

<div class="yellowmenubar" style="text-align:center;margin:auto;">

<i class="fa fa-navicon" onclick="up(menuscreen);"></i>

<div id="menuscreen" onclick="down(menuscreen);">
    <div id="Menunav">
            </div>
            </div>
            </div>

<script>
function up(menuscreen) {
    var x = document.getElementById("menuscreen");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
function down(menuscreen) {

var x = document.getElementById("menuscreen");
if(e.target.id !== "Menunav"){
 x.style.display = "none";
}

}
</script>


#menuscreen {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 30, 96, 0.9); /* Blue background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    overflow: hidden;
}

#Menunav
{
    width: 400px;
    min-height: 100vh;
    top: -55px;
    float: left;
    background-color: white;
    color: grey;
    position: relative;
    transition: 2s;
    padding: 105px 50px 0 50px;
}

.yellowmenubar
{
    width: 100%;
    height: 55px;
    background-color: #FFD900;
    position: fixed;
    z-index: 2;
    margin-bottom: 50px;
}

.fa-navicon
{
    font-size: 25px;
    float: left;
    color: #003D8E;
    margin-left: 20px;
    margin-top: 15px;
    cursor: pointer;
    transform: rotate(0deg);
}
...