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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

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

CSS

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

Q&A

解決済

1回答

669閲覧

js/css ハンバーガーメニュー作成

Rin0123

総合スコア2

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

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

CSS

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

0グッド

0クリップ

投稿2020/04/28 13:49

編集2020/04/28 14:12

前提・実現したいこと

https://www.kopjapan.com/blog/web/%E3%80%90%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%80%91%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9

上記サイトのハンバーガーメニューを使いたいのですが、うまく反映されません。

発生している問題・エラーメッセージ

1 Js自体はWeb上の検証のConsoleでコードを入力すると作動するのですが、webを開いたときにjs反応しない。 2 メニューの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/ツールのバージョンなど)

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

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

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

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

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

kei344

2020/04/28 14:06

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

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

kei344

総合スコア69364

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

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

Rin0123

2020/04/28 14:22

1の問題はそちらのコードを入力したところうまく作動したのですが、メニューボックス内の3つのラインが表示されないのですがどうしたらよいでしょうか。
kei344

2020/04/28 14:36

.header_nav_ham i に width: 100%; を設定(コロンが抜けている)して、.header_nav_ham i:nth-child(3) を topからbottomにかえて、「translateY」のつづりが間違っているのを直して、.header_nav_ham のborder: 1px solid black;を削除すればとりあえず表示はされますが、参考にされているページの「01 ボタンのCSS 【クリック前】」と違う部分が多いので見直してみてはいかがでしょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問