Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
上記サイトのハンバーガーメニューを使いたいのですが、うまく反映されません。
発生している問題・エラーメッセージ
１ Js自体はWeb上の検証のConsoleでコードを入力すると作動するのですが、webを開いたときにjs反応しない。 ２ メニューの3つのラインが指定しているBoxの中に表示さえない。（positionを消すと表示される）
該当のソースコード
HTML
1 <div class="header_box"> 2 <div class="header_leftMenu"> 3 <span class="header_nav_ham"> 4 <i></i> 5 <i></i> 6 <i></i> 7 </span> 8 <nav class="sitemap"> 9 <ul class="sitemap_list"> 10 <li class="sitemap_item"> 11 <a class="sitemap_name" href=""> 12 contents</a> 13 </li> 14 <li class="sitemap_item"> 15 <a class="sitemap_name" href=""> 16 contents</a> 17 </li> 18 <li class="sitemap_item"> 19 <a class="sitemap_name" href=""> 20 contents</a> 21 </li> 22 23 </ul> 24 </nav> 25 26 </div> 27</div>
css
1/*ハンバーガーメニュー*/ 2.header_nav_ham{ 3 display:block; 4 position:relative; 5 border: 1px solid black; 6 width:1.75rem; 7 height:1.5rem; 8} 9.header_nav_ham i{ 10 display: block; 11 width 100%; 12 height: 2px; 13 background-color:#333; 14 position: absolute; 15 transition: transform .5s, opacity .5s; 16} 17.header_nav_ham i:nth-child(1){ 18 top:0; 19} 20.header_nav_ham i:nth-child(2){ 21 top:0; 22 bottom:0; 23 margin: auto; 24} 25.header_nav_ham i:nth-child(3){ 26 top:0; 27} 28/* header_nav_ham . show */ 29.header_nav_ham.show i:nth-child(1){ 30 transform: tarnslateY(10px) rotate(-45deg); 31} 32.header_nav_ham.show i:nth-child(2){ 33 opacity:0; 34} 35.header_nav_ham.show i:nth-child(3){ 36 transform: tarnslateY(-12px) rotate(45deg); 37} 38 39.sitemap{ 40 position:fixed; 41 top: 3rem; 42 left:0; 43 right: :0; 44 bottom: 0; 45 padding:1rem; 46 opacity: 0; 47 visibility: hidden; 48 transition: opacity .5s, visibility .5s; 49} 50.sitemap.show{ 51 opacity:1; 52 background-color: yellow; 53 visibility: visible; 54} 55/*お試し*/ 56 57.header_box{ 58 background-color: grey; 59 width:auto; 60 height:100px; 61 display:flex; 62} 63 64.header_leftMenu{ 65 background-color: white; 66 width:50%; 67 height:70px; 68 margin: auto 5px auto 5px; 69} 70
js
1/*global $*/ 2 3$('.header_nav_ham').on('click', function () { 4 "use strict"; 5 $('.header_nav_ham, .sitemap').toggleClass('show'); 6}); 7 8
試したこと
上記サイトのようなハンバーガーメニューの作成。
エラーメッセージはでていません。
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
これでどうでしょう。
js
1$( function () { // ← ADD 2 $('.header_nav_ham').on('click', function () { 3 "use strict"; 4 $('.header_nav_ham, .sitemap').toggleClass('show'); 5 }); 6}); // ← ADD
投稿2020/04/28 14:17
総合スコア69606
1の問題はそちらのコードを入力したところうまく作動したのですが、メニューボックス内の3つのラインが表示されないのですがどうしたらよいでしょうか。
.header_nav_ham i に width: 100%; を設定（コロンが抜けている）して、.header_nav_ham i:nth-child(3) を topからbottomにかえて、「translateY」のつづりが間違っているのを直して、.header_nav_ham のborder: 1px solid black;を削除すればとりあえず表示はされますが、参考にされているページの「０１ ボタンのCSS 【クリック前】」と違う部分が多いので見直してみてはいかがでしょう。
あなたの回答
tips
プレビュー
