メニューが表示されるまでバックグラウンドリンクをクリックできないようにするには？

Question

このメニューのコンセプトを友人のアート展示ウェブサイトに組み込もうとしていますが、私は目に見えるかどうかにかかわらずクリック可能なメニューリンクに問題があります。私はpointer-events:none;とおしゃべりしていますが、問題をかなり修正することはできません。メニューが表示されてもリンクを完全に解除できないようにすることはできますが、それは目的を破ります。どんな助けもありがとう。

A link to working demo and code can be found here

console.clear(); 
 

 
var app = function() { 
 
\t var body = void 0; 
 
\t var menu = void 0; 
 
\t var menuItems = void 0; 
 

 
\t var init = function init() { 
 
\t \t body = document.querySelector('body'); 
 
\t \t menu = document.querySelector('.menu-icon'); 
 
\t \t menuItems = document.querySelectorAll('.nav__list-item'); 
 

 
\t \t applyListeners(); 
 
\t }; 
 

 
\t var applyListeners = function applyListeners() { 
 
\t \t menu.addEventListener('click', function() { 
 
\t \t \t return toggleClass(body, 'nav-active'); 
 
\t \t }); 
 
\t }; 
 

 
\t var toggleClass = function toggleClass(element, stringClass) { 
 
\t \t if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass); 
 
\t }; 
 

 
\t 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"> 
 
\t <span class="menu-icon__line menu-icon__line-left"></span> 
 
\t <span class="menu-icon__line"></span> 
 
\t <span class="menu-icon__line menu-icon__line-right"></span> 
 
</div> 
 

 
<div class="nav"> 
 
\t <div class="nav__content"> 
 
\t \t <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> 
 
\t \t \t <li class="nav__list-item">Projects</li> 
 
\t \t \t <li class="nav__list-item">Contact</li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 

 
<div class="site-content"> 
 
\t <h1 class="site-content__headline">Another menu concept</h1> 
 
</div> 
 
</body> 
 

 
</html>

Answer 1

でこれを実行する別の方法は、メニュー項目の表示を切り替えるです。あなたのJSコードを編集しました。 display noneを使用することにより、リストアイテム要素を効果的にクリック可能にしません。次に、アイテムがアクティブなときに表示を変更します。

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(); 
} 

Answer 2

あなたが.nav__contentにpointer-events: noneを切り替えることにより、何をしようとして達成することができます。 parent selectorでどのように経験しているのか分かりませんが、この状況では便利です。

あなたSCSS

&__content{ 
    … 
    pointer-events: none; 

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