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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

解決済

javascriptでのハンバーガメニューが動作しない

renyama
renyama

総合スコア0

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

1回答

0評価

0クリップ

682閲覧

投稿2020/12/06 08:05

編集2022/01/12 10:58

・前提、実現したいこと

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;
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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