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

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回答

690閲覧

ハンバーガーメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせたい!

tsuk

総合スコア0

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クリップ

投稿2023/02/26 20:56

実現したいこと

  • ハンバーガーメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる

概要

https://kodocode.net/design-css-hamburger/
↑上記より
|メニューが画面中央に移動しメニューに変化!をコピペし使用してます。
しかし、
メニューのページ内リンクをクリックしてもメニューを閉じて対象の箇所まで自動スクロールできません。
そこで、https://labo.webis.co.jp/2021/08/jquery-hamburger-button/ 
↑をデザインはそのままに上記のような動きを取り入れたいです。

該当のソースコード

HTML <a href="https://front.codes/" class="logo" target="_blank"> <img src="https://assets.codepen.io/1462889/fcy.png" alt=""> </a> <input class="menu-icon" type="checkbox" id="menu-icon" name="menu-icon"/> <label for="menu-icon"></label> <nav class="nav"> <ul class="pt-5"> <li><a href="#">Work</a></li> <li><a href="#">Studio</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="section-center"> <h1 class="mb-0">Pure CSS Menu</h1> </div>
CSS @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap'); body{ font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; color: #ececee; background-color: #1f2029; overflow: hidden; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg'); background-position: center; background-repeat: repeat; background-size: 4%; height: 100vh; width: 100%; } .section-center{ position: absolute; top: 50%; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 6; text-align: center; transform: translateY(-50%); } h1{ font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 7vw; line-height: 1; color: #ffeba7; text-align: center; -webkit-text-stroke: 2px #ffeba7; text-stroke: 2px #ffeba7; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; } [type="checkbox"]:checked, [type="checkbox"]:not(:checked){ position: absolute; left: -9999px; } .menu-icon:checked + label, .menu-icon:not(:checked) + label{ position: fixed; top: 63px; right: 75px; display: block; width: 30px; height: 30px; padding: 0; margin: 0; cursor: pointer; z-index: 10; } .menu-icon:checked + label:before, .menu-icon:not(:checked) + label:before{ position: absolute; content: ''; display: block; width: 30px; height: 20px; z-index: 20; top: 0; left: 0; border-top: 2px solid #ececee; border-bottom: 2px solid #ececee; transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after, .menu-icon:not(:checked) + label:after{ position: absolute; content: ''; display: block; width: 22px; height: 2px; z-index: 20; top: 10px; right: 4px; background-color: #ececee; margin-top: -1px; transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:before{ top: 10px; transform: rotate(45deg); height: 2px; background-color: #ececee; border-width: 0; transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after{ width: 30px; margin-top: 0; right: 0; transform: rotate(-45deg); transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .nav{ position: fixed; top: 33px; right: 50px; display: block; width: 80px; height: 80px; padding: 0; margin: 0; z-index: 9; overflow: hidden; box-shadow: 0 8px 30px 0 rgba(0,0,0,0.3); background-color: #353746; animation: border-transform 7s linear infinite; transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1); } @keyframes border-transform{ 0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .menu-icon:checked ~ .nav { animation-play-state: paused; top: 50%; right: 50%; transform: translate(50%, -50%); width: 200%; height: 200%; transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1); } .nav ul{ position: absolute; top: 50%; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 6; text-align: center; transform: translateY(-50%); list-style: none; } .nav ul li{ position: relative; display: block; width: 100%; padding: 0; margin: 10px 0; text-align: center; list-style: none; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(30px); transition: all 250ms linear; } .nav ul li:nth-child(1){ transition-delay: 200ms; } .nav ul li:nth-child(2){ transition-delay: 150ms; } .nav ul li:nth-child(3){ transition-delay: 100ms; } .nav ul li:nth-child(4){ transition-delay: 50ms; } .nav ul li a{ font-family: 'Montserrat', sans-serif; font-size: 9vh; text-transform: uppercase; line-height: 1.2; font-weight: 800; display: inline-block; position: relative; color: #ececee; transition: all 250ms linear; } .nav ul li a:hover{ text-decoration: none; color: #ffeba7; } .nav ul li a:after{ display: block; position: absolute; top: 50%; content: ''; height: 2vh; margin-top: -1vh; width: 0; left: 0; background-color: #353746; opacity: 0.8; transition: width 250ms linear; } .nav ul li a:hover:after{ width: 100%; } .menu-icon:checked ~ .nav ul li { pointer-events: auto; visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 350ms ease, transform 250ms ease; } .menu-icon:checked ~ .nav ul li:nth-child(1){ transition-delay: 1400ms; } .menu-icon:checked ~ .nav ul li:nth-child(2){ transition-delay: 1480ms; } .menu-icon:checked ~ .nav ul li:nth-child(3){ transition-delay: 1560ms; } .menu-icon:checked ~ .nav ul li:nth-child(4){ transition-delay: 1640ms; } .logo { position: absolute; top: 60px; left: 50px; display: block; z-index: 11; transition: all 250ms linear; } .logo img { height: 26px; width: auto; display: block; } @media screen and (max-width: 991px) { .menu-icon:checked + label, .menu-icon:not(:checked) + label{ right: 55px; } .logo { left: 30px; } .nav{ right: 30px; } h1{ font-size: 9vw; -webkit-text-stroke: 2px transparent; text-stroke: 2px transparent; -webkit-text-fill-color: #ffeba7; text-fill-color: #ffeba7; color: #ffeba7; } .nav ul li a{ font-size: 8vh; } }

試したこと

jsに以下コードを追加

$('#page-link a[href]').on('click', function (event) { $('.menu-icon:checked+label').trigger('click'); });

最後に

すみません。私の力では到底辿り着けそうにないのでどなたか答えを教えてください。
何卒よろしくお願いします。

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

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

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

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

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

guest

回答1

0

チェックボックスでメニューの表示・非表示を調整しているならこんな感じで

javascript

1<style> 2body{ 3margin:0; 4} 5#hamburger{ 6position:absolute; 7right:0px; 8} 9#hamburger label{ 10position:absolute; 11right:30px; 12} 13.dummy{ 14height:120%; 15 background-Color:gray; 16} 17#menu-icon{ 18display:none; 19} 20#menu-icon:checked ~ [for="menu-icon"]::before{ 21content:"\0d7"; 22} 23#menu-icon:not(:checked) ~ [for="menu-icon"]::before{ 24content:"\02261"; 25} 26#menu-icon:not(:checked) ~ .nav{ 27display:none; 28} 29</style> 30<script> 31document.addEventListener('click', e=>{ 32 const t=e.target; 33 if(t.matches('a') && t.closest('#hamburger')){ 34 e.preventDefault(); 35 document.querySelector('#menu-icon').checked=false; 36 window.scroll({ 37 top: document.querySelector(t.getAttribute('href')).getBoundingClientRect().top, 38 behavior: "smooth" 39 }); 40 } 41}); 42</script> 43<div id="hamburger"> 44<input class="menu-icon" type="checkbox" id="menu-icon" name="menu-icon"/> 45<label for="menu-icon"></label> 46<nav class="nav"> 47<ul class="pt-5"> 48<li><a href="#work">Work</a></li> 49<li><a href="#studio">Studio</a></li> 50<li><a href="#news">News</a></li> 51<li><a href="#contact">Contact</a></li> 52</ul> 53</nav> 54</div> 55<div id="top">top</div> 56<div class="dummy"></div> 57<div id="work">work [ <a href="#top">top</a> ]</div> 58<div class="dummy"></div> 59<div id="studio">studio [ <a href="#top">top</a> ]</div> 60<div class="dummy"></div> 61<div id="news">news [ <a href="#top">top</a> ]</div> 62<div class="dummy"></div> 63<div id="contact">contact [ <a href="#top">top</a> ]</div> 64<div class="dummy"></div>

投稿2023/02/27 03:49

yambejp

総合スコア114585

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

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

tsuk

2023/02/27 08:00

申し訳ございません。できませんでした。。。。
yambejp

2023/02/27 08:14

「できない」の意味がわからないのですが? ソースを単純にコピペすれば動作すると思いますが。 一部調整して以下codepenにもアップしておきます https://codepen.io/yambejp/pen/BaOQmOg
tsuk

2023/02/27 08:31

すみません、こんなに丁寧にしてくださっているのに。 HTML CSS JSそれぞれコピーさせていただいて、そのまま追加していますが、ハンバーガーメニューが表示しなくなったり、リンクをクリックしても閉じません。 僕の質問の仕方が間違っているのかも知れません。すみません。
yambejp

2023/02/27 08:40 編集

codepenの方は確認していただきましたか? ちなみに想定する動作環境はどうなっていますか?
tsuk

2023/02/27 09:09

はい、確認しました。ありがとうございます。 質問の「概要」にございます。2つのURL先のサイトはご覧いただけてますでしょうか? お手数ですがご確認いただいて、前記のハンバーメニューのデザインなどを変更せずに後記の動きをしたいと考えております。(あくまで動きとしてのイメージです。) ですので、クラスなどの変更を極力せずに実装できないものでしょうか? 例えば、今ですとCSSのみでハンバーガーメニューがアニメーションで閉じたり開いたりしております。 それをリンクをクリックしたら、スクロール移動&閉じるというふうにしたいです。 ハンバーガーの開閉アニメーションを大切にしたいです。 すみません。理解力もまだなく、人に説明をする力もございません。不快な思いをされていたら本当に申し訳ございません。
yambejp

2023/02/27 09:16

https://labo.webis.co.jp/ は別ページにとばしているのでスクロールで移動は当てはまらないように見えるのですが?
tsuk

2023/02/27 10:42

リンク先、なぜか表示されていないですね。。。 |【jQuery】グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法 お手数ですが上記で検索していただくと、私の伝えたかったものがみられます。 よろしくお願いします。
tsuk

2023/02/27 11:34

違います、 あの・・・失礼ですが、私の質問の前提にある以下サイトはご覧いただいてますでしょうか? 【メニューが画面中央に移動しメニューに変化!】 【【jQuery】グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法】
tsuk

2023/02/27 11:35

上記各サイトはご覧いただいてますか?
yambejp

2023/02/27 11:36

ごめんなさい、認識のズレが多すぎてこれ以上フォローできそうにありません。 例示しているのは参考にしないでと言われるともうお手上げです。 なんとか他の人の助言でがんばってください あしからず
tsuk

2023/02/27 11:38

お付き合いいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問