如何使背景链接在显示菜单之前不可单击？

Question

Trying to incorporate this menu concept into a friends art exhibition website but I am running into a problem with the menu links being clickable regardless of whether they are visible or not. I have been messing around with pointer-events:none; but can't quite fix the problem. I can make the links totally unclickable even when then menu is shown but that defeats the purpose. Any help would be appreciated.

A link to working demo and code can be found here

 console.clear(); var app = function () { var body = void 0; var menu = void 0; var menuItems = void 0; var init = function init() { body = document.querySelector('body'); menu = document.querySelector('.menu-icon'); menuItems = document.querySelectorAll('.nav__list-item'); applyListeners(); }; var applyListeners = function applyListeners() { menu.addEventListener('click', function () { return toggleClass(body, 'nav-active'); }); }; var toggleClass = function toggleClass(element, stringClass) { if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass); }; init(); }(); 

 body { background-color: #1e2023; font-family: "Fira Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .site-content { max-width: 1100px; height: 100vh; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-content__headline { font-weight: 200; color: #ffffff; font-size: calc(2vw + 10px); } .menu-icon { height: 30px; width: 30px; position: fixed; z-index: 2; left: 50px; top: 30px; cursor: pointer; } .menu-icon__line { height: 2px; width: 30px; display: block; background-color: #ffffff; margin-bottom: 4px; -webkit-transition: background-color .5s ease, -webkit-transform .2s ease; transition: background-color .5s ease, -webkit-transform .2s ease; transition: transform .2s ease, background-color .5s ease; transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease; } .menu-icon__line-left { width: 15px; } .menu-icon__line-right { width: 15px; float: right; } .nav { position: fixed; z-index: 1; } .nav:before, .nav:after { content: ""; position: fixed; width: 100vw; height: 100vh; background: rgba(234, 234, 234, 0.2); z-index: -1; -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; -webkit-transform: translateX(0%) translateY(-100%); transform: translateX(0%) translateY(-100%); } .nav:after { background: white; -webkit-transition-delay: 0s; transition-delay: 0s; } .nav:before { -webkit-transition-delay: .1s; transition-delay: .1s; } .nav__content { position: fixed; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 100%; text-align: center; font-size: calc(2vw + 10px); font-weight: 200; cursor: pointer; } .nav__list-item { position: relative; display: inline-block; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; opacity: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); -webkit-transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, transform .3s ease; transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease; margin-right: 25px; } .nav__list-item:before { content: ""; position: absolute; background: #000000; width: 20px; height: 1px; top: 100%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-transition: all .3s ease; transition: all .3s ease; z-index: -1; } .nav__list-item:hover:before { width: 100%; } body.nav-active .menu-icon__line { background-color: #000; -webkit-transform: translateX(0px) rotate(-45deg); transform: translateX(0px) rotate(-45deg); } body.nav-active .menu-icon__line-left { -webkit-transform: translateX(1px) rotate(45deg); transform: translateX(1px) rotate(45deg); } body.nav-active .menu-icon__line-right { -webkit-transform: translateX(-2px) rotate(45deg); transform: translateX(-2px) rotate(45deg); } body.nav-active .nav { visibility: visible; } body.nav-active .nav:before, body.nav-active .nav:after { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); } body.nav-active .nav:after { -webkit-transition-delay: .1s; transition-delay: .1s; } body.nav-active .nav:before { -webkit-transition-delay: 0s; transition-delay: 0s; } body.nav-active .nav__list-item { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease; } body.nav-active .nav__list-item:nth-child(0) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } body.nav-active .nav__list-item:nth-child(1) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } body.nav-active .nav__list-item:nth-child(2) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } body.nav-active .nav__list-item:nth-child(3) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } body.nav-active .nav__list-item:nth-child(4) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Projects</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="menu.css"> <script src="menu.js"></script> </head> <body> <div class="menu-icon"> <span class="menu-icon__line menu-icon__line-left"></span> <span class="menu-icon__line"></span> <span class="menu-icon__line menu-icon__line-right"></span> </div> <div class="nav"> <div class="nav__content"> <ul class="nav__list"> <a href="https://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it"> <li class="nav__list-item">Home</li></a> <a href="https://bootsnipp.com/search?q=navigation+"> <li class="nav__list-item">About</li></a> <li class="nav__list-item">Projects</li> <li class="nav__list-item">Contact</li> </ul> </div> </div> <div class="site-content"> <h1 class="site-content__headline">Another menu concept</h1> </div> </body> </html> 

Answer 1

You can achieve what you're trying to do by toggling pointer-events: none on .nav__content . I'm not sure how experienced you are with the parent selector , but it's useful in this situation.

In your SCSS

&__content{
    …
    pointer-events: none;

    .nav-active & { // <-- parent selector
        pointer-events: auto;
    }
}

Answer 2

Another way to do this is toggle the display of the menu items. I edited your JS code. By using display none it effectively makes the list item elements not clickable. Then you change the display when the items are active.

const applyListeners = () => {
    menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
    for(let i=0; i<menuItems.length; i++) {
        menuItems[i].style.display="";
    }
}

const init = () => {
    body = document.querySelector('body');
    menu = document.querySelector('.menu-icon');
    menuItems = document.querySelectorAll('.nav__list-item');

    for(let i=0; i<menuItems.length; i++) {
        menuItems[i].style.display="none";
    }

    applyListeners();
}