フルスクリーンメニューの下位要素のリンクが効かない

前提・実現したいこと

フルスクリーンメニューの下位要素のリンクに影響がでないようにしたい。

発生している問題・エラーメッセージ

フルスクリーンメニューを設置すると、下位要素のリンクに触れなくなります。
メニューを開いたときに触れなくなるのはいいのですが、メニューを開いていない時にまで触れないのは困るので修正したいです。

試したこと

フルスクリーンメニューのcss内、「.fullscreenmenu」と「.fullscreenmenu.show」を消すとリンクが直ったので、その部分のz-indexの数値を変更したり、ナビゲーション以外の全コンテンツをdivの大枠で囲ってフルスクリーンメニューより大きな数字のz-indexを設定して全面・背面を意識してみましたが変化がありませんでした。（意味がなかったので下記のソースからは消しています）
なぜ下位のリンクにまで影響が出てしまうのかわかりません…。

該当のソースコード

HTML
1<header id="header">
2    <div id="logo"><a href="/">タイトル</a></div>
3    <!-- globalNavigation -->
4    <nav id="globalNavigation">
5        <ul class="gnav">
6            <li class="topmenu"><a href="#" class="menuttl">テスト</a></li>
7            <li class="topmenu"><a href="#" class="menuttl">テスト</a></li>
8            <li class="topmenu"><a href="#" class="menuttl">テスト</a></li>
9            <li class="topmenu"><a href="#" class="menuttl">テスト</a></li>
10        </ul>
11    </nav>
12    <!-- //globalNavigation -->
13        <nav class="menu">
14           <div class="strokes"></div>
15           <div class="strokes"></div>
16           <div class="strokes"></div>
17        </nav>
18    <div class="fullscreenmenu">
19        <ul>  
20            <li>
21                <a href="#">About</a>
22            </li>
23            <li>
24                <a href="#">Blog</a>
25            </li>
26            <li>
27                <a href="#">Contact</a>
28            </li>
29        </ul>
30    </div>
31</header>
32
33<p><a href="#">リンクテキスト</a></p>
34<p><a href="#">リンクテキスト</a></p>
35<p><a href="#">リンクテキスト</a></p>
36<p><a href="#">リンクテキスト</a></p>

css
1/* ヘッダー */
2#header #logo a {
3    display:inline-block;
4}
5#header {
6    position:fixed;
7    left:0;
8    top:0;
9    width:100%;
10    height:90px;
11    display:-webkit-box;
12    display:-ms-flexbox;
13    display:flex;
14    -webkit-box-orient:horizontal;
15    -webkit-box-direction:normal;
16    -ms-flex-flow:row wrap;
17    flex-flow:row wrap;
18    -webkit-box-pack:justify;
19    -ms-flex-pack:justify;
20    justify-content:space-between;
21    -webkit-box-align:flex-start;
22    -ms-flex-align:flex-start;
23    align-items:flex-start;
24    z-index:999;
25}
26/* ナビ */
27#globalNavigation .gnav {
28    display:-webkit-box;
29    display:-ms-flexbox;
30    display:flex;
31    -webkit-box-orient:horizontal;
32    -webkit-box-direction:normal;
33    -ms-flex-flow:row wrap;
34    flex-flow:row wrap;
35    margin-right: 100px;
36}
37#globalNavigation .gnav>li a:hover {
38    opacity:1;
39}
40#globalNavigation .gnav>li .menuttl {
41    display:-webkit-box;
42    display:-ms-flexbox;
43    display:flex;
44    -webkit-box-orient:horizontal;
45    -webkit-box-direction:normal;
46    -ms-flex-flow:row wrap;
47    flex-flow:row wrap;
48    -webkit-box-align:center;
49    -ms-flex-align:center;
50    align-items:center;
51    -webkit-box-pack:center;
52    -ms-flex-pack:center;
53    justify-content:center;
54    -webkit-box-orient:vertical;
55    -webkit-box-direction:normal;
56    -ms-flex-flow:column;
57    flex-flow:column;
58    letter-spacing:.05em;
59    padding:0 20px;
60    height:50px;
61    font-size:1.0rem;
62    font-weight:bold;
63}
64/* ハンバーガーメニュー */
65nav.menu{
66    position:absolute;
67    width: 42px;
68    height: 36px;
69    top: 0;
70    right: 0;
71    margin: 30px 30px 0 0;
72    cursor: pointer;
73    z-index: 9999;
74}
75nav.menu div.strokes {
76    width: 100%;
77    height: 6px;
78    margin: 0 0 6px 0;
79    background: black;
80    transition:  transform 0.3s, opacity 0.1s;
81    z-index: 9999;
82}
83.hide{
84    opacity: 0;
85    transform:  translateX(-42px);
86    z-index: 9999;
87}
88.animate0{
89    transform: rotate(45deg) translateY(17px);
90    z-index: 9999;
91}
92.animate2{
93    transform: rotate(-45deg) translateY(-17px);
94    z-index: 9999;
95}
96.fullscreenmenu{
97    background-color: rgba(52, 152, 219, 0);
98    top: 0;
99    left: 0;
100    width: 100%;
101    height: 100vh;
102    position: absolute;
103    opacity: 0;
104    -webkit-transition: background 0.5s ease-in-out, opacity 0.5s;
105    -moz-transition: background 0.5s ease-in-out, opacity 0.5s;
106    -ms-transition: background 0.5s ease-in-out, opacity 0.5s;
107    -o-transition: background 0.5s ease-in-out, opacity 0.5s;
108    transition: background 0.5s ease-in-out, opacity 0.5s;
109    text-align: center;
110}
111.fullscreenmenu.show{
112    opacity: 1;
113    background-color: rgba(52, 152, 219, 0.9);
114    -webkit-transition: background 0.5s ease-in-out, visibility 0.5s;
115    -moz-transition: background 0.5s ease-in-out, visibility 0.5s;
116    -ms-transition: background 0.5s ease-in-out, visibility 0.5s;
117    -o-transition: background 0.5s ease-in-out, visibility 0.5s;
118    transition: background 0.5s ease-in-out, visibility 0.5s;
119    z-index: 999;
120}
121.fullscreenmenu ul{
122    padding: 10%;
123}
124.fullscreenmenu li a{
125    visibility: inherit;
126    color: white;
127    font-family: 'Source Sans Pro', sans-serif;
128    font-size: 70px;   
129    text-decoration: none;
130    font-weight: 100;
131    text-transform: uppercase;
132    line-height: 150%;
133}

Javascript
1(function () {
2    "use strict";
3
4    var fullscreenmenu = document.querySelector(".fullscreenmenu");
5
6    var strokes = document.querySelectorAll(".strokes"),
7        icon = document.querySelector(".menu"),
8        fullscreenmenu = document.querySelector(".fullscreenmenu");
9
10    function transformStart() {
11
12        strokes[0].classList.toggle("animate0")
13        strokes[1].classList.toggle("hide");
14        strokes[2].classList.toggle("animate2");
15        fullscreenmenu.classList.toggle("show");
16
17    }
18
19    icon.addEventListener("click", transformStart);
20
21})();

JQuery
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

行動規範の内容に同意します

回答1件

ベストアンサー

opacity: 0; で透明にしただけでは見えなくなるだけで、下の要素をクリックはできません。
pointer-events: none; でマウスイベントを無効にして下の要素をクリックできたりホバーが効くようになります。

css
1.fullscreenmenu{
2
3    /* 略 */
4
5    pointer-events: none; /* 追加 */
6}
7
8.fullscreenmenu.show{
9
10    /* 略 */
11
12    pointer-events: auto; /* 追加 */
13}