質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

988閲覧

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

mupo

総合スコア37

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/10 05:54

前提・実現したいこと

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

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

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

試したこと

フルスクリーンメニューの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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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}

あと、固定ヘッダーとコンテンツが重ならないように、body に上部余白を設定しておくいいと思います。

css

1body { 2 padding-top: 90px; 3}

投稿2020/11/10 06:29

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mupo

2020/11/10 07:52

pointer-eventsを知らなかったので勉強になりました。ありがとうございます。うまくいきました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問