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

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

新規登録して質問してみよう
ただいま回答率
85.53%
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回答

1521閲覧

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

negiremi

総合スコア13

CSS3

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

HTML5

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

JavaScript

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

1グッド

0クリップ

投稿2022/11/24 14:05

ハンバーガーメニューをページ内リンクで
リンクを押した瞬間に自動で閉じるようにしたいです。

検索して上から順にやってみましたがどうしてもうまくいきません。
そしてこちらのサイトを参考にそっくりそのままコピペしてみましたがそれでも上手くいきません。

何かおかしいところはありますでしょうか?
ご教授お願い致します。

html

1<!doctype html> 2<html> 3<head> 4<link rel="stylesheet" href="test.css"/> 5<meta charset="UTF-8"> 6<title>無題ドキュメント</title> 7</head> 8 9<body> 10<header> 11 <div class="header-logo-menu"> 12 <div id="nav-drawer"> 13 <input id="nav-input" type="checkbox" class="nav-unshown"> 14 <label id="nav-open" for="nav-input"><span></span></label> 15 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 16 <div id="nav-content">ここに中身を入れる 17 <ul> 18 <li><a href="#01">コンテンツ01</a></li> 19 <li><a href="#02">コンテンツ02</a></li> 20 </ul> 21</div> 22 <div class="logo-area">LOGO</div> 23 </div> 24</header> 25<h2 id="01">コンテンツ01</h2> 26<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 27 2829303132 33<h2 id="02">コンテンツ02</h2> 34<script> 35$(function() { 36 $('#nav-content li a').on('click', function(event) { 37 $('#nav-input').prop('checked', false); 38 }); 39}); 40</script> 41</body> 42</html> 43

css

1header { 2 padding:10px; 3 background: #ccc; 4} 5 6#nav-drawer { 7 position: relative; 8} 9 10/*チェックボックス等は非表示に*/ 11.nav-unshown { 12 display:none; 13} 14 15/*アイコンのスペース*/ 16#nav-open { 17 display: inline-block; 18 width: 30px; 19 height: 22px; 20 vertical-align: middle; 21} 22 23/*ハンバーガーの形をCSSで表現*/ 24#nav-open span, #nav-open span:before, #nav-open span:after { 25 position: absolute; 26 height: 3px;/*線の太さ*/ 27 width: 25px;/*長さ*/ 28 border-radius: 3px; 29 background: #555; 30 display: block; 31 content: ''; 32 cursor: pointer; 33} 34#nav-open span:before { 35 bottom: -8px; 36} 37#nav-open span:after { 38 bottom: -16px; 39} 40 41/*閉じる用の薄黒箇所*/ 42#nav-close { 43 display: none; 44 position: fixed; 45 z-index: 99; 46 top: 0; 47 left: 0; 48 width: 100%; 49 height: 100%; 50 background: black; 51 opacity: 0; 52 transition: .3s ease-in-out; 53} 54 55/*メニューの中身*/ 56#nav-content { 57 overflow: auto; 58 position: fixed; 59 top: 0; 60 left: 0; 61 z-index: 9999; 62 width: 90%; 63 max-width: 330px;/*最大幅(お好みで調整を)*/ 64 height: 100%; 65 background: #fff; 66 transition: .3s ease-in-out; 67 -webkit-transform: translateX(-105%); 68 transform: translateX(-105%); 69} 70 71/*チェックがついたら表示させる*/ 72#nav-input:checked ~ #nav-close { 73 display: block; 74 opacity: .5; 75} 76 77#nav-input:checked ~ #nav-content { 78 -webkit-transform: translateX(0%); 79 transform: translateX(0%); 80 box-shadow: 6px 0 25px rgba(0,0,0,.15); 81} 82 83.header-logo-menu{ 84 display: flex; 85 display: -moz-flex; 86 display: -o-flex; 87 display: -webkit-flex; 88 display: -ms-flex; 89 flex-direction: row; 90 -moz-flex-direction: row; 91 -o-flex-direction: row; 92 -webkit-flex-direction: row; 93 -ms-flex-direction: row; 94} 95 96/*ロゴやサイトタイトルをセンタリング*/ 97.logo-area{text-align:center;margin:auto;}
Cocode👏を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQueryのコードは、jQueryファイルを事前に読み込んでおかないと動きません。
下記のように、jQueryファイルを読み込んでください。

html

1<head> 2 <link rel="stylesheet" href="test.css"/> 3 <meta charset="UTF-8"> 4 <title>無題ドキュメント</title> 5 <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> 6</head>

「jQueryとは?」の解説を別の質問で回答させていただいております。
よければご覧ください。

Uncaught ReferenceError: $ is not defined atのエラーをどう修正すればよい?

投稿2022/11/24 18:45

編集2022/11/24 18:51
Cocode

総合スコア2314

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

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

negiremi

2022/11/25 04:52

できました。 javascriptとjQueryの違いがよく分かりました。 本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問