Q&A
・前提、実現したいこと
javascriptでwebサイトのヘッダーを制作しています。
ヘッダーの左側に名前、右側にハンバーガーメニューを作成していて右側のハンバーガーメニューが動作しません。javascriptでの動きをとり入れたハンバーガーメニューを作成しているので上手くいけば、クリックすればメニューが現れるます！
・発生している問題
ハンバーガーメニューをクリックしても全く反応が無く、検証ツールを使ってクリックした瞬間を見てもjavascriptのコードすら反応が無く実装ができない状態です。
・問題が発生するまでの流れ
①ヘッダーを作る（実装できた）
②ページローダを作成
③コードを整える
③完成したので確認作業（クリックできなくなっていた）
【HTML】
<div id="global-container"> <div id="container"> <div class="mobile-menu__cover"></div> <div class="nav-trigger"></div> <header class="header"> <div class="header__inner"> <h1 class="header-h1"> Ren Yamanaka </h1> <nav class="header__nav"> <ul class="header__ul"> <li class="header__li"><a href="#">Story</a></li> <li class="header__li"><a href="#">Skills</a></li> <li class="header__li"><a href="#">Works</a></li> <li class="header__li"><a href="#">Service</a></li> ・ <li class="header__li"><a href="#">Contact</a></li> </ul> </nav> <button class="mobile-menu__btn"> <span></span> <span></span> <span></span> </button> </div> <nav class="mobile-menu"> <ul class="mobile-menu__main"> <li class="mobile-menu__item"> <a class="mobile-menu__link" href="#m-story"> <span class="main-title">Story</span> <span class="sub-title">山中蓮について</span> </a> </li> <li class="mobile-menu__item"> <a class="mobile-menu__link" href="#m-skills"> <span class="main-title">Skills</span> <span class="sub-title">スキルについて</span> </a> </li> <li class="mobile-menu__item"> <a class="mobile-menu__link" href="#m-works"> <span class="main-title">Works</span> <span class="sub-title">作品について</span> </a> </li> <li class="mobile-menu__item"> <a class="mobile-menu__link" href="#m-service"> <span class="main-title">Service</span> <span class="sub-title">サービスについて</span> </a> </li> <li class="mobile-menu__item"> <a class="mobile-menu__link" href="#m-contact"> <span class="main-title">Contact</span> <span class="sub-title">コンタクト方法</span> </a> </li> </ul> </nav> </header> </div> </div> <scrip src="mobile-menu.js"></scrip>
【javascript】
class MobileMenu { constructor() { this.DOM = {}; this.DOM.btn = document.querySelector('.mobile-menu__btn'); this.DOM.cover = document.querySelector('.mobile-menu__cover'); this.DOM.container = document.querySelector('#global-container'); this.eventType = this._getEventType(); this._addEvent(); } _getEventType() { return window.ontouchstart ? 'touchstart' : 'click'; } _toggle() { this.DOM.container.classList.toggle('menu-open'); } _addEvent() { this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this)); this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this)); } } new MobileMenu();
【CSS】
body{ width: 100%; margin: 0; } #container{ position: relative; background-color: #e0f2f7; } /* ヘッダー */ .header-h1{ font-family: 'Dancing Script', cursive; font-weight: 600; } .header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: transparent; display: flex; align-items: center; z-index: 100; } .header__inner{ display: flex; justify-content: space-between; align-items: center; width: 100%; margin-right: 160px; margin-left: 160px; } /* デスクトップ=nav スマホ＝btn */ .header__nav{ display: flex; justify-content: space-between; align-items: center; text-align: center; } .header__ul{ display: flex; align-items: center; padding: 0; margin: 0; list-style: none; } .header__li{ padding: 0; margin-left: 20px; text-transform: uppercase; } .header__li a{ color: black; text-decoration: none; } /* ヘッダーをクリックした時のコード */ .mobile-menu { position: fixed; right: 0; top: 60px; width: 300px; } .mobile-menu__btn { background-color: unset; border: none; outline: none !important; cursor: pointer; } .mobile-menu__btn > span { background-color: black; width: 35px; height: 2px; display: block; margin-bottom: 9px; -webkit-transition: -webkit-transform 0.7s; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; } .mobile-menu__btn > span:last-child { margin-bottom: 0; } .mobile-menu__cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; -webkit-transition: opacity 1s; transition: opacity 1s; cursor: pointer; z-index: 200; } .mobile-menu__main { padding: 0; -webkit-perspective: 2000px; perspective: 2000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .mobile-menu__item { list-style: none; display: block; -webkit-transform: translate3d(0, 0, -1000px); transform: translate3d(0, 0, -1000px); padding: 0 40px; -webkit-transition: opacity 0.2s, -webkit-transform 0.3s; transition: opacity 0.2s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s; opacity: 0; } .mobile-menu__link { display: block; margin-top: 30px; color: black; text-decoration: none; } /* クリックした時に左下にずれるようにするコード */ .menu-open #container { -webkit-transform: translate(-300px, 60px); transform: translate(-300px, 60px); -webkit-box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8); box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8); } .menu-open .mobile-menu__cover { opacity: 1; visibility: visible; } .menu-open .mobile-menu__item { -webkit-transform: none; transform: none; opacity: 1; } .menu-open .mobile-menu__item:nth-child(1) { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; } .menu-open .mobile-menu__item:nth-child(2) { -webkit-transition-delay: 0.14s; transition-delay: 0.14s; } .menu-open .mobile-menu__item:nth-child(3) { -webkit-transition-delay: 0.21s; transition-delay: 0.21s; } .menu-open .mobile-menu__item:nth-child(4) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; } .menu-open .mobile-menu__item:nth-child(5) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .menu-open .mobile-menu__btn > span { background-color: black; } .menu-open .mobile-menu__btn > span:nth-child(1) { -webkit-transition-delay: 70ms; transition-delay: 70ms; -webkit-transform: translateY(11px) rotate(135deg); transform: translateY(11px) rotate(135deg); } .menu-open .mobile-menu__btn > span:nth-child(2) { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateX(-18px) scaleX(0); transform: translateX(-18px) scaleX(0); } .menu-open .mobile-menu__btn > span:nth-child(3) { -webkit-transition-delay: 140ms; transition-delay: 140ms; -webkit-transform: translateY(-11px) rotate(-135deg); transform: translateY(-11px) rotate(-135deg); } .main-title { font-weight: 600; font-size: 25px; } .sub-title { display: block; font-size: 14px; color: #535353; }
回答1件
0
ベストアンサー
typoでしょう
javascript
1<scrip src="mobile-menu.js"></scrip> 2↓↓↓ 3<script src="mobile-menu.js"></script> 4
投稿2020/12/06 10:10
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/06 11:02