実現したいこと
・横幅の狭い画面になるとハンバーガーメニューになるようヘッダーにメニューを表示させたいです。
HPを作成するため、配布されているHTMLのHPテンプレートをWordpressで使えるよう弄っているのですが、いろいろと調べてみても自分一人では解決策が分からなかったので、ご教授いただけると幸いです。
発生している問題・エラーメッセージ
・パソコンではウィンドウをどれだけ狭めてもハンバーガーメニューが正常に表示されません。出来損ないのような小さいボタンは出るのですがCSSの問題でしょうか？
・スマホから確認するとハンバーガーメニューのアイコンは表示されるのですが開きません。タップしたときボタン自体は反応しているようです。
・調べている段階でjsのファイルも確認したところ2行目にエラーが出ているようなのですがこれも関係しているのでしょうか？
JSLint(2)
Expected an identifier and instead saw"const"
Stopping.(5%scanned)
ESLint(1)
ERROR: Parsing error: The keyword "const" is reserved
該当のソースコード
php
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <meta charset="UTF-8">6 <meta http-equiv="X-UA-Compatible" content="IE=edge">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <title>サイト名</title>9 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">10 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">11 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/each.css">12 <link rel="stylesheet"13 href="<?php echo get_template_directory_uri(); ?>/https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">14 <?php wp_head(); ?>15</head>16 17<body>18 <header>19 <!-- サイト名 -->20 <h1 class="pagetitle top">サイト名</h1>21 22 <!-- ハンバーガーメニュー -->23 <button id="js-hamburger" class="hamburger"><span class="hamburger__line"></span></button>24 <!-- メニュー -->25 <nav id="js-globalnav" class="globalnav">26 <ul class="globalnav__main">27 <li class="globalnav__item"><a href="サイトURL">Top</a></li>28 <li class="globalnav__item"><a href="サイトURL">Info</a></li>29 <li class="globalnav__item _has-child">PROJECT 30 <ul class="globalnav__child">31 <li><a href="サイトURL">Novel</a></li>32 <li><a href="サイトURL">Illust</a></li>33 <li><a href="サイトURL">Comic</a></li>34 </ul>35 </li>36 <li class="globalnav__item _has-child">SECRET 37 <ul class="globalnav__child">38 <li><a href="novel.html">Novel</a></li>39 <li><a href="illust.html">Illust</a></li>40 <li><a href="comic.html">Comic</a></li>41 </ul>42 </li>43 </ul>44 </nav><!-- メニューここまで -->45 </header>
CSS
12.hamburger {3 position: fixed;4 top: 0;5 right: 0;6 display: flex;7 justify-content: center;8 align-items: center;9 width: 50px;10 height: 50px;11 background-color: #ACCFD1;12 border: none;13 cursor: pointer;14 z-index: 999;15}16.hamburger .hamburger__line {17 position: relative;18 width: 25px;19 height: 2px;20 background-color: #fff;21}22.hamburger .hamburger__line::before, .hamburger .hamburger__line::after {23 position: absolute;24 content: "";25 display: block;26 width: 25px;27 height: 2px;28 background-color: #fff;29}30.hamburger .hamburger__line::before {31 top: -8px;32}33.hamburger .hamburger__line::after {34 bottom: -8px;35}36 37/*閉じる*/38.hamburger._active .hamburger__line {39 background: transparent;40}41.hamburger._active .hamburger__line::before {42 top: 0;43 transform: rotate(45deg);44}45.hamburger._active .hamburger__line::after {46 bottom: 0;47 transform: rotate(-45deg);48}49 50/* PCで非表示 */51@media screen and (min-width: 1025px), print {52 .hamburger {53 display: none;54 }55}56
Javascript
1// スマホ用メニュー クラス追加2const ham = document.querySelector("#js-hamburger");3const nav = document.querySelector("#js-globalnav");4 5ham.addEventListener("click", function () {6 ham.classList.toggle("_active");7 nav.classList.toggle("_active");8});9 10 11 // COMIC用メニュー クラス追加12 const comicbtn = document.querySelector("#js-comicnav-btn");13 const comicnav = document.querySelector("#js-comicnav");14 15 comicbtn?.addEventListener("click", function () {16 comicbtn.classList.toggle("_active");17 comicnav.classList.toggle("_active");18 });19 20 21 // スムーススクロール22 const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');23 for (let i = 0; i < smoothScrollTrigger.length; i++){24 smoothScrollTrigger[i].addEventListener('click', (e) => {25 e.preventDefault();26 let href = smoothScrollTrigger[i].getAttribute('href');27 let targetElement = document.getElementById(href.replace('#', ''));28 const rect = targetElement?.getBoundingClientRect().top;29 const offset = window.pageYOffset;30 const gap = 0;31 const target = rect + offset - gap;32 window.scrollTo({33 top: target,34 behavior: 'smooth',35 });36 });37 }38
0 コメント