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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

Q&A

解決済

1回答

429閲覧

ハンバーガーメニューをページ内リンクでとじるようにしたい

old

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2023/02/24 11:10

実現したいこと

ハンバーガーメニューをページ内リンクしたら閉じるようにしたいのですが、
こちらでいろいろ検索してjsもアレンジしてもよく分からず・・・
申し訳ございませんが、ご教授いただけないでしょうか?

cssのコードは本みながら少しずつ変えながらから引用してます

該当のソースコード

html

1 2<header class="header"> 3 <div class="header-container"> 4 <div class="global-container"> 5 <button class="navbtn" 6 onClick="document.querySelector('html').classList.toggle('open')"> 7 <i class="fa-solid fa-bars"></i> 8 <i class="fa-solid fa-xmark"></i> 9 <span class="sr-only">menu</span> 10 </button> 11 <div class="site"> 12 <span class="title">テスト</span> 13 </div> 14 <nav class="nav"> 15 <ul class="navmenu"> 16 <li><a href="#test2">テスト1</a></li> 17 <li><a href="#test1">テスト2</a></ii> 18 </ul> 19 </nav> 20 </div> 21 </div> 22</header>

css

1.navmenu{ 2 list-style: none; 3} 4a{ 5 text-decoration: none; 6 color: blue; 7} 8.navbtn{ 9 outline: none; 10 border: none; 11 background: transparent; 12 cursor: pointer; 13 color: black; 14 font-size: 40px 15} 16.open .navbtn{ 17 z-index: 110; 18 color: black; 19} 20.navbtn .fa-bars{ 21 display: revert; 22} 23.open .navbtn .fa-bars{ 24 display: none; 25} 26.navbtn .fa-xmark{ 27 display: none; 28} 29.open .navbtn .fa-xmark{ 30 display: revert; 31} 32 33@media(min-width:768px){ 34 .navbtn{ 35 display:none; 36 } 37} 38@media(max-width: 767px){ 39 .nav{ 40 position: fixed; 41 inset: -100% 0 100% 0 ; 42 z-index: 100; 43 background-color: white; 44 transition: transform 0.3s; 45 } 46 .open .nav{ 47 transform: translate(0,100%); 48 } 49 .open body{ 50 position: fixed; 51 overflow: hidden; 52 } 53 .nav ul{ 54 display: flex; 55 flex-direction: column; 56 justify-content: center; 57 text-align: center; 58 } 59} 60 61@media(min-width:768px){ 62 .nav ul{ 63 display: flex; 64 gap: 20px; 65 color: black; 66 } 67}

試したこと

https://teratail.com/questions/173001
こことか参照したのですが申し訳ございません。

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

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

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

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

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

guest

回答1

0

自己解決

https://teratail.com/questions/363135
を参照しました。お手数おかけして申し訳ございませんでした

投稿2023/02/24 18:03

old

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問