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

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

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

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

PHP

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

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

1回答

1623閲覧

Wordpress上のカスタムjsで.fadeToggleが効かず、モバイルメニューが閉じない

sakiii

総合スコア0

WordPress

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

PHP

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

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2020/05/29 14:44

編集2020/05/30 12:14

前提・実現したいこと

PHPとjQuery初心者です。

現在WordpressのStockholmというテーマを使っているのですが、
モバイル用のハンバーガーメニューがあまり好きな形でないので、
カスタム仕様のフルスクリーンオーバーレイメニューを入れたいです。
そして、こちら(https://webdesignday.jp/inspiration/technique/html/4746/)の
コードを参考に、カスタムCSSとカスタムJSに追記したりPHPにHTMLタグを入れ込んだりして
トグルを開くところまでは来たのですが、
メニューをクリックしてバックグラウンドがリンク先にとんでも、
オーバーレイのメニュー画面が閉じません。
また、ハンバーガーメニューのアイコン部分をクリックしても、
一瞬オーバーレイメニューが消えますがすぐにまたオーバーレイごと再表示されます。

テーマ内の他のjsなどが影響しているのでしょうか。
参考元のサイトのデモでは問題なくtoggleがオンオフ作動しているようですし、
色々試すものの原因がわからずに立ち往生しています。
どなたかご教示いただけると嬉しいです。よろしくお願いいたします。

何か必要な情報が不足しておりましたら、追記可能ですのでおしらせください。

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

エラーメッセージ

該当のソースコード

HTMLのコードはPHPファイル(header-area.php)の元のメニュー該当部分に上書きして入れています。

HTML

1<?php } else { ?> 2 3<div> 4 <a class="menu"> 5 <span class="menu__line menu__line--top"></span> 6 <span class="menu__line menu__line--center"></span> 7 <span class="menu__line menu__line--bottom"></span> 8 </a> 9 <nav class="gnav"> 10 <div class="gnav__wrap"> 11 <ul class="gnav__menu"> 12 <li class="gnav__menu__item"><a href="###">Home</a></li> 13 <li class="gnav__menu__item"><a href="###">About</a></li> 14 <li class="gnav__menu__item"><a href="###">Portfolio</a></li> 15 <li class="gnav__menu__item"><a href="###">Photo</a></li> 16 <li class="gnav__menu__item"><a href="###">Shop</a></li> 17 <li class="gnav__menu__item"><a href="###">Contact</a></li> 18 </ul> 19 </div><!--gnav-wrap--> 20 </nav> 21</div> 22<?php } ?>

CSSとJSはカスタムCSSに追記する形です。

CSS

1/*menu*/ 2.menu{ 3 height: 20px; 4 position: absolute; 5 left: 26px; 6 top: 26px; 7 width: 30px; 8 z-index: 299; 9} 10.menu__line{ 11 background: #666666; 12 display: block; 13 height: 2px; 14 position: absolute; 15 transition:transform .3s; 16 width: 100%; 17} 18.menu__line--center{ 19 top: 9px; 20} 21.menu__line--bottom{ 22 bottom: 0; 23} 24.menu__line--top.active{ 25 top: 8px; 26 transform: rotate(45deg); 27} 28.menu__line--center.active{ 29 transform:scaleX(0); 30} 31.menu__line--bottom.active{ 32 bottom: 10px; 33 transform: rotate(135deg); 34} 35/*gnav*/ 36.gnav{ 37 background: rgba(200, 200, 23, 0.7); 38 display: none; 39 height: 100%; 40 position: fixed; 41 width: 100%; 42 z-index: 298; 43left: 0; 44} 45.gnav__wrap{ 46 align-items:center; 47 display: flex; 48 height: 100%; 49 justify-content: center; 50 position: absolute; 51 width: 100%; 52} 53.gnav__menu__item{ 54 margin: 40px 0; 55} 56.gnav__menu__item a{ 57 color: #fff; 58 font-size: 2em; 59 font-weight: bold; 60 padding: 40px; 61 text-decoration: none; 62 transition: .5s; 63} 64.gnav__menu__item a:hover{ 65 color: #666; 66} 67.gnav ul { 68list-style: none; 69}

また、jQueryのセレクタ($)がコンフリクトで使えないので、
以下のようにjQueryに変更して使っています。

jQuery

1jQuery('.menu').on('click',function(){ 2 jQuery('.menu__line').toggleClass('active'); 3 jQuery('.gnav').fadeToggle(); 4}); 5

試したこと

jQuery

1jQuery(function() { 2 jQuery('.menu').on('click', function() { 3 if (jQuery(this).hasClass('active')){ 4 jQuery(this).removeClass('active'); 5 jQuery('.gnav').fadeOut( 1000 ); 6 } else { 7 jQuery(this).addClass('active'); 8 jQuery('.gnav').fadeIn( 1000 ); 9 } 10 }); 11});

→結果変わらず

その他、こちらで似たような状況のもので試せるものは試しましたが思うような結果が得られずにいます。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

色々試行錯誤した結果、若干強引ですが以下で解決しました。

jQuery

1jQuery('.menu').on('click',function(){ 2 jQuery('.menu__line').addClass('active'); 3 jQuery('.gnav').fadeIn(); 4}); 5 6jQuery('.gnav__menu__item a').on('click', function(){ 7 jQuery('.menu__line').removeClass('active'); 8 jQuery('.gnav').fadeOut(); 9});

投稿2020/05/30 10:27

編集2020/05/30 10:58
sakiii

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問