フルスクリーンメニューでz-indexが効かない

前提・実現したいこと

フルスクリーンメニューを開いた際に、ハンバーガーボタンだけは表示したままクリックできるようにしたい。

発生している問題・試したこと

フルスクリーンメニューを開くと、ハンバーガーボタンまで押せなくなってしまう。

headerのz-index指定を外してlogo・globalNavigation・menuに個別にz-indexをしたが反応しない。
また、headerのz-index指定を外した地点でメニューのリンクに触れなくなる問題が起きる。
headerのz-index指定を外さずに、ハンバーガーボタン（menu）にheaderに指定したものよりも大きな数の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	</header>
19	<div class="fullscreenmenu">
20        <ul>  
21            <li>
22                <a href="#">About</a>
23            </li>
24            <li>
25                <a href="#">Blog</a>
26            </li>
27            <li>
28                <a href="#">Contact</a>
29            </li>
30        </ul>
31    </div>
32</header>

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: 100%;
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件

ベストアンサー

以下は、fullscreeenmenuの要素がheader内に入っているという想定です。

①headerのとじタグが途中にあるので、削除する

diff
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-    </header>
19    <div class="fullscreenmenu">
20        <ul>  
21            <li>
22                <a href="#">About</a>
23            </li>
24            <li>
25                <a href="#">Blog</a>
26            </li>
27            <li>
28                <a href="#">Contact</a>
29            </li>
30        </ul>
31    </div>
32</header>

②.fullscreenmenuのスタイルで高さを100%から変更する
100%だとheaderに合わせてしまうので、100vhや、autoなどに変更する。

diff
1.fullscreenmenu{
2    background-color: rgba(52, 152, 219, 0);
3    top: 0;
4    left: 0;
5    width: 100%;
6-    height: 100%;
7+    height: 100vh; // または、autoやinitialなど目的に合わせて変更する
8    position: absolute;
9    opacity: 0;
10    -webkit-transition: background 0.5s ease-in-out, opacity 0.5s;
11    -moz-transition: background 0.5s ease-in-out, opacity 0.5s;
12    -ms-transition: background 0.5s ease-in-out, opacity 0.5s;
13    -o-transition: background 0.5s ease-in-out, opacity 0.5s;
14    transition: background 0.5s ease-in-out, opacity 0.5s;
15    text-align: center;
16}