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

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

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

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

PHP

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

jQuery

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

CSS

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

解決済

ドロワーメニューのTOPへボタンを押すとリストのフェードアウトが残る

chinya_pink
chinya_pink

総合スコア0

WordPress

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

PHP

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

jQuery

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

CSS

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

1回答

0評価

0クリップ

33閲覧

投稿2021/09/25 07:13

編集2022/01/12 10:58

前提・実現したいこと

TOPへを押したときにliが残らないようにしたい。
かつ、liの文字が二重にならないようにしたい。

###詳細

WordPressを使用し、ポートフォリオサイトを製作中です。
header.phpのハンバーガーを利用したドロワーメニューにてフェードアウトが表示されてしまう問題が起きています。

試したこと

①まず最初に、実機・検証ともに、一定数のスクロールをするとliの文字が二重になっておりました。
これはPC用navで採用している「一定数スクロールするとnavを表示する」がSP用navにも効いてしまっていることが原因だと思われます。
これを解除するのに、PCとSPでnavを別々にネストすることにしました。

②navを別々にネストすることで文字が二重になることは改善されましたが、ハンバーガーボタンをタップし、表示されるドロワーメニューのTOPへ戻るボタンをタップすると、左上にliフェードアウトで表示されるようになってしまいました。
こちらはファーストビューでnavを表示させない(「一定数スクロールするとnavが表示される」の反対に「TOPではnavが消える」)が効いているものと思われます。

ただ、どちらもPC用navはdisplay:none;をかけていますし、検証してもフェードアウトしてしまうので、どれが悪さをしているのかわかりませんでした…

IDのgnavをclassに変えるとハンバーガーが動作しなくなってしまうため、該当箇所のtransition等変更してみましたが、改善できなかったため質問させていただきます。

該当のソースコード

HTML

<nav id="gnav"> <ul class="gnav_sp"> <li class="li"><a href="#design">Design</a></li> <li class="li"><a href="#skill">Skill</a></li> <li class="li"><a href="#profile">Profile</a></li> <li class="li"><a href="#contact">Contact</a></li> <li class="li"><a href="#">Top</a></li> </ul> <div class="openbtn"></div> <div class="circle-bg"></div> <div class="gnav_pc"> <ul> <li><a href="#design">Design</a></li> <li><a href="#skill">Skill</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#">Top</a></li> </ul> </div> </nav>

css

#gnav ul { opacity: 0; /*はじめは透過0*/ /*ナビゲーション天地中央揃え*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -3 } /*背景が出現後にナビゲーションを表示*/ #gnav.panelactive ul { opacity: 0.9; z-index: 1000; } /* 背景が出現後にナビゲーション li を表示*/ #gnav.panelactive ul li { animation-name: gnaviAnime; animation-duration: 1s; animation-delay: .1s; /*0.2 秒遅らせて出現*/ animation-fill-mode: forwards; opacity: 0; } @keyframes gnaviAnime { 0% { opacity: 0; } 100% { opacity: 1; } } /*丸の拡大*/ .circle-bg { position: fixed; z-index: 3; /*丸の形*/ width: 100px; height: 100px; border-radius: 50%; background: #FFDDEE; /*丸のスタート位置と形状*/ transform: scale(0); /*scaleをはじめは0に*/ right: 20px; top: 20px; transition: all .5s; /*0.6秒かけてアニメーション*/ } .circle-bg.circleactive { transform: scale(50); /*クラスが付与されたらscaleを拡大*/ } /*アクティブになったエリア*/ #gnav.panelactive { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position: fixed; z-index: 999; top: 0; width: 100%; height: 100vh; } /*リストのレイアウト設定*/ #gnav li { text-align: center; list-style: none; width: 100vw; } #gnav ul li a { color: #333; padding: 15px; display: block; font-family: tbcinergothic-std, sans-serif; letter-spacing: 0.1em; font-weight: bold; position: relative; bottom: 30px; } #gnav ul li a:hover { background: rgba(255, 255, 255, 0.8); transition: 0.5s; } }

jQuery

/*ナビゲーション途中から*/ $(function () { var topBtn = $('.gnav_pc'); topBtn.hide(); //スクロールがに達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 450) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); }); ハンバーガー <script> jQuery(".openbtn").click(function () { //ボタンがクリックされたら jQuery(this).toggleClass('active'); //ボタン自身に activeクラスを付与し jQuery("#gnav").toggleClass('panelactive'); //ナビゲーションにpanelactiveクラスを付与 jQuery(".circle-bg").toggleClass('circleactive'); //丸背景にcircleactiveクラスを付与 }); jQuery("#gnav a").click(function () { //ナビゲーションのリンクがクリックされたら jQuery(".openbtn").removeClass('active'); //ボタンの activeクラスを除去し jQuery("#gnav").removeClass('panelactive'); //ナビゲーションのpanelactiveクラスを除去 jQuery(".circle-bg").removeClass('circleactive'); //丸背景のcircleactiveクラスを除去 });</script>

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

DWを使用、WordPressは5.8.1。
スクロールで表示するjQueryはcommons.phpで記述していますが、ハンバーガーは動作しなかったためhome.phpに記述しています。
また、別リンクでのモーダルのcssとの兼ね合いでfunctionsではなくphpでcssを読み込ませています。

初心者のためわかりやすくお伝えできればと思いましたが、足りない情報等あればお答えしますのでよろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

k4a
k4a

2021/09/25 13:49

> ハンバーガーボタンをタップし、表示されるドロワーメニューのTOPへ戻るボタンをタップすると、左上にliフェードアウトで表示されるようになってしまいました。 上記現象が再現(理解)できませんでした。 jsfiddle(https://jsfiddle.net/)等を用いて現象を再現できる環境を共有していただけると、他の方の回答につながるかと思います。 また、スマホ用PC用の要素を用意すること自体はよくあることですが、両方とも同時に表示をさせておくのはあまり得策ではありません。ユーザーエージェント等でアクセス環境を判断するのが良いかと思います。
chinya_pink
chinya_pink

2021/09/25 22:58

コメントありがとうございます。 使ってみたのですが、WordPressで悪さをしているのか、他のコードが干渉しているのかは分かりませんが、こちらでは確認できませんでした。 (https://jsfiddle.net/ndL0y9h1/18/) ユーザーエージェントについては調べて理解ができたのですが、URLを別途用意した方がいいということでしょうか?
k4a
k4a

2021/09/26 03:05

お力にはなれませんでしたが解決したようで何よりです。 ユーザーエージェントですが、URLを別途用意というわけではありません。該当ページにアクセスしたのがPCならPC用のnavを、スマホ(+タブレットも?)ならスマホ用のnavをページ内に表示するようにするということです。 なぜPC用とスマホ用のnavを分けているのかわかりませんが、今回のコードだとnavの構造自体に違いはあまり無い様に見えますので、ユーザーエージェントに応じてjsからクラスを付与するのが良いように思えます。 とはいえ現状で意図通り動いているのであれば特に変更する必要もありません。 また今回の例だと、ユーザーエージェントではなくメディアクエリなどで単純にスクリーンの幅に応じてCSSを切り替える方が適しているかもしれません。
chinya_pink
chinya_pink

2021/09/26 03:41

とんでもないです!ありがとうございました! 今回<nav>の中にclassで別表示で両方ネストすると文字が二重になる謎の現象が起きていたために別でネストをしていました。 jsにメディアクエリをかける、という感覚でいいのでしょうか? そういった発想はなかったのでもしまたjs絡みで変な挙動が起きたら試してみようと思います! また質問することもあると思うので、また目に止まったらよろしくお願いいたします。 ありがとうございました!

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

jQuery

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

CSS

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