質問編集履歴

1 <code>でコード別にしました

Rin0123

Rin0123 score 2

2020/04/28 23:12  投稿

js/css ハンバーガーメニュー作成
### 前提・実現したいこと
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-------------------------------------
```HTML
   <div class="header_box">
       <div class="header_leftMenu">
           <span class="header_nav_ham">
               <i></i>
               <i></i>
               <i></i>
           </span>
           <nav class="sitemap">
               <ul class="sitemap_list">   
                   <li class="sitemap_item">
                       <a class="sitemap_name" href="">
                           contents</a>
                   </li>
                   <li class="sitemap_item">
                       <a class="sitemap_name" href="">
                           contents</a>
                   </li>
                   <li class="sitemap_item">
                       <a class="sitemap_name" href="">
                           contents</a>
                   </li>
               </ul>
           </nav>
       </div>
HTML---------------------------------------------
CSS----------------------------------------------
</div>
```
```css
/*ハンバーガーメニュー*/
.header_nav_ham{
   display:block;
   position:relative;
   border: 1px solid black;
   width:1.75rem;
   height:1.5rem;
}
.header_nav_ham i{
   display: block;
   width 100%;
   height: 2px;
   background-color:#333;
   position: absolute;
   transition: transform .5s, opacity .5s;
}
.header_nav_ham i:nth-child(1){
   top:0;
}
.header_nav_ham i:nth-child(2){
   top:0;
   bottom:0;
   margin: auto;
}
.header_nav_ham i:nth-child(3){
   top:0;
}
/* header_nav_ham . show */
.header_nav_ham.show i:nth-child(1){
   transform: tarnslateY(10px) rotate(-45deg);
}
.header_nav_ham.show i:nth-child(2){
   opacity:0;
}
.header_nav_ham.show i:nth-child(3){
   transform: tarnslateY(-12px) rotate(45deg);
}
.sitemap{
   position:fixed;
   top: 3rem;
   left:0;
   right: :0;
   bottom: 0;
   padding:1rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity .5s, visibility .5s;
}
.sitemap.show{
   opacity:1;
   background-color: yellow;
   visibility: visible;
}
/*お試し*/
.header_box{
   background-color: grey;
   width:auto;
   height:100px;
   display:flex;
}
.header_leftMenu{
   background-color: white;
   width:50%;
   height:70px;
   margin: auto 5px auto 5px;
}
CSS-----------------------------------------------
js-------------------------------------------------
```
```js
/*global $*/
$('.header_nav_ham').on('click', function () {
   "use strict";
   $('.header_nav_ham, .sitemap').toggleClass('show');
});
js---------------------------------------------
   </div>
```
### 試したこと
上記サイトのようなハンバーガーメニューの作成。
エラーメッセージはでていません。
### 補足情報(FW/ツールのバージョンなど)
  • CSS

    17524 questions

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

  • jQuery

    13449 questions

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

  • HTML5

    10349 questions

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

  • Webサイト

    3708 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る