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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

Q&A

解決済

1回答

644閲覧

ハンバーガーメニューが表示されているページで、関係ないボタンを押すと一瞬メニューが開いてしまう

yayaya

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

0グッド

3クリップ

投稿2019/09/14 17:12

WordPressでスマホヘッダーにハンバーガーメニューを置いたサイトを作っているのですが、全く関係ないボタン
(例:ヘッダーではない場所に配置されているお問い合わせボタン)を押すだけでハンバーガーメニューが開こうとしてしまい、画面がチラついてしまいます。
ヘッダーのアイコンを押さない限り、開かないようにしたいのですが、原因に当たりがつかずご教示頂けますと大変助かります。
ハンバーガーメニューのイメージ
(灰色の部分は画面を隠しているだけで、実際は黒透明のオーバーレイです)
イメージ説明

HTML

1 <div class="sp"> 2 <div id="nav-drawer"> 3 <input id="nav-input" type="checkbox" class="nav-unshown"> 4 <label id="nav-open" for="nav-input"><span></span></label> 5 <label class="nav-unshown" id="nav-close" for="nav-input"> 6 <div class="icon_cancel"><span class="css-cancel"></span></div></label> 7 <div id="nav-content"> 8 <nav class="sp"> 9 <ul class="headerLink sp"> 10 <li class="navTitle"><a href="/category/news">お知らせ</a></li> 11 <li class="navTitle"><a href="/category/blog">ブログ</a></li> 12 <li class="navTitle"><a href="/archive/casestudy">導入事例</a></li> 13 <li class="navTitle"><a href="/company">会社情報</a></li> 14 <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li> 15 </ul> 16 </nav> 17 </div> 18 </div> 19 </div>

CSS

1#nav-drawer { 2 position: absolute; 3 top: 15px; 4 right: 15px; 5 } 6 7 /*チェックボックス等は非表示に*/ 8 .nav-unshown { 9 display:none; 10 } 11 12 /*アイコンのスペース*/ 13 #nav-open { 14 display: inline-block; 15 width: 30px; 16 height: 22px; 17 vertical-align: middle; 18 } 19 20 /*ハンバーガーアイコンをCSSだけで表現*/ 21 #nav-open span, #nav-open span:before, #nav-open span:after { 22 position: absolute; 23 height: 3px;/*線の太さ*/ 24 width: 25px;/*長さ*/ 25 border-radius: 3px; 26 background: #555; 27 display: block; 28 content: ''; 29 cursor: pointer; 30 } 31 32 #nav-open span:before { 33 bottom: -8px; 34 } 35 #nav-open span:after { 36 bottom: -16px; 37 } 38 39 /*閉じる用の薄黒カバー*/ 40 #nav-close { 41 display: none;/*はじめは隠しておく*/ 42 position: fixed; 43 z-index: 99; 44 top: 0;/*全体に広がるように*/ 45 left: 0; 46 width: 100%; 47 height: 100%; 48 background: black; 49 opacity: 0; 50 transition: .3s ease-in-out; 51 } 52 53 /*中身*/ 54 #nav-content { 55 overflow: auto; 56 position: fixed; 57 top: 0; 58 right: 0; 59 z-index: 9999;/*最前面に*/ 60 width: 60%;/*右側に隙間を作る(閉じるカバーを表示)*/ 61 max-width: 330px;/*最大幅(調整してください)*/ 62 height: 100%; 63 background: #030818;/*背景色*/ 64 transition: .3s ease-in-out;/*滑らかに表示*/ 65 -webkit-transform: translateX(120%); 66 transform: translateX(120%);/*右に隠しておく*/ 67 } 68 69 /*チェックが入ったらもろもろ表示*/ 70 #nav-input:checked ~ #nav-close { 71 display: block;/*カバーを表示*/ 72 opacity: .5; 73 } 74 75 #nav-input:checked ~ #nav-content { 76 -webkit-transform: translateX(0%); 77 transform: translateX(0%);/*中身を表示(左へスライド)*/ 78 box-shadow: 6px 0 25px rgba(0,0,0,.15); 79 } 80 .css-cancel{ 81 display: inline-block; 82 position: relative; 83 margin: 0 20px 0 7px; 84 padding: 0; 85 width: 4px; 86 height: 20px; 87 background: #fff; 88 transform: rotate(45deg); 89 } 90 .css-cancel:before{ 91 display: block; 92 content: ""; 93 position: absolute; 94 top: 50%; 95 left: -8px; 96 width: 20px; 97 height: 4px; 98 margin-top: -2px; 99 background: #fff; 100 } 101 102 .icon_cancel { 103 display: inline-block; 104 position: absolute; 105 right: 60%; 106 top: 10px; 107}

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/09/15 11:21

この情報だけだと再現できないのでjQuery/Javascriptのコードとdiv.spなどのCSSも追加してください。
退会済みユーザー

退会済みユーザー

2019/09/15 16:15

追記されたhtml/cssで再現するとちゃんとハンバーガーメニューとして機能しており、「全く関係ないボタン を押すだけでハンバーガーメニューがが開こうとしてしまい、画面がチラついてしまいます。」は確認できませんでした。 他の部分は記載できますでしょうか?
guest

回答1

0

自己解決

本番環境で再現せずで問題なく閲覧できたのでクローズさせていただきます。

投稿2019/11/05 21:37

yayaya

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問