前提
html, css, javascriptを使用してホームページを作成しています。
メニューバーを作成する際に、こちらのサイトを参考にjavascriptを書きましたが、記載したコードが認識されず、メニューバーをクリックしても反応がない状態です。
また、現段階ではエラーが表示されていません。(なので、本当に何が原因で動作しないのかがわからないです、、)
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3 4<head>5<meta charset="utf-8">6<title>5-2-3 3本線が1本線に</title>7<meta name="description" content="書籍「動くWebデザインアイディア帳」のサンプルサイトです">8 9<meta name="viewport" content="width=device-width,initial-scale=1.0">10<!--==============レイアウトを制御する独自のCSSを読み込み===============-->11<link rel="stylesheet" type="text/css" href="stylesheet1.css">12 13</head>14 15<body>16 <div class="container">17 <header class="header">18 <div class="header__inner">19 <h1 class="header__title header-title">20 <a href="#">ロゴ</a>21 </h1>22 23 <nav class="header__nav nav" id="js-nav">24 <ul class="nav__items nav-items">25 <li class="nav-items__item"><a href="">メニュー</a></li>26 <li class="nav-items__item"><a href="">メニュー</a></li>27 <li class="nav-items__item"><a href="">メニュー</a></li>28 <li class="nav-items__item"><a href="">メニュー</a></li>29 </ul>30 </nav>31 32 <button class="header__hamburger hamburger" id="js-hamburger">33 <span></span>34 <span></span>35 <span></span>36 </button>37 </div>38 </header>39 <main>40 <div class="main">41 メインコンテンツエリア 42 </div>43 </main>44 <footer class="footer">45 <div>46 フッターエリア 47 </div>48 </footer>49 </div>50 <script type="text/javascript" src="5-2-3.js"></script>51 </body>52</html>53
css
1a {2 text-decoration: none;3}4 5ul,6li {7 list-style: none;8}9 10 11main {12 background-color: #f1f1f1;13 height: 800px;14 display: flex;15}16 17 18.main {19 margin: auto;20}21 22.footer {23 background-color: #f6f6f6;24 height: 200px;25 display: flex;26}27 28.footer div {29 margin: auto;30}31 32 33/* ヘッダー */34 35 36.header {37 background-color: white;38 width: 100%;39 height: 50px;40 position: fixed;41 top: 0;42 left: 0;43 right: 0;44 z-index: 999;45}46 47.header__inner {48 padding: 0 20px;49 display: flex;50 align-items: center;51 justify-content: space-between;52 height: inherit;53 position: relative;54}55 56 57/* ヘッダーのロゴ部分 */58.header__title {59 width: 80px;60}61 62 63@media screen and (min-width: 960px) {64 .header__title {65 width: 120px;66 }67}68 69.header__title img {70 display: block;71 width: 100%;72 height: 100%;73}74 75/* ヘッダーのナビ部分 */76 77.header__nav {78 position: absolute;79 right: 0;80 left: 0;81 top: 0;82 width: 100%;83 height: 100vh;84 transform: translateX(100%);85 background-color: #fff;86 transition: ease .4s;87}88 89 90@media screen and (min-width: 960px) {91 .header__nav {92 position: static;93 transform: initial;94 background-color: inherit;95 height: inherit;96 display: flex;97 justify-content: end;98 width: 50%;99 }100}101 102 103@media screen and (min-width: 960px) {104 .nav__items {105 width: 100%;106 display: flex;107 align-items: center;108 height: initial;109 justify-content: space-between;110 }111}112 113.nav-items {114 position: absolute;115 top: 50%;116 left: 50%;117 transform: translate(-50%, -50%);118 padding: 0;119}120 121 122 123@media screen and (min-width: 960px) {124 .nav-items {125 position: inherit;126 top: 0;127 left: 0;128 transform: translate(0, 0);129 130 }131}132 133/* ナビのリンク */134.nav-items__item a {135 color: black;136 width: 100%;137 display: block;138 text-align: center;139 font-size: 20px;140 margin-bottom: 24px;141 color: black;142}143 144.nav-items__item:last-child a {145 margin-bottom: 0;146}147 148@media screen and (min-width: 960px) {149 .nav-items__item a {150 margin-bottom: 0;151 }152}153 154 155/* ハンバーガーメニュー */156 157.header__hamburger {158 width: 48px;159 height: 100%;160 161}162 163.hamburger {164 background-color: transparent;165 border-color: transparent;166 z-index: 9999;167}168 169@media screen and (min-width: 960px) {170 .hamburger {171 display: none;172 }173}174 175/* ハンバーガーメニューの線 */176.hamburger span {177 width: 100%;178 height: 1px;179 background-color: #000;180 position: relative;181 transition: ease .4s;182 display: block;183}184 185.hamburger span:nth-child(1) {186 top: 0;187}188 189.hamburger span:nth-child(2) {190 margin: 8px 0;191}192 193.hamburger span:nth-child(3) {194 top: 0;195}196 197 198/* ハンバーガーメニュークリック後のスタイル */199.header__nav.active {200 transform: translateX(0);201}202 203.hamburger.active span:nth-child(1) {204 top: 5px;205 transform: rotate(45deg);206}207 208.hamburger.active span:nth-child(2) {209 opacity: 0;210 211}212 213.hamburger.active span:nth-child(3) {214 top: -13px;215 transform: rotate(-45deg);216}217
javascript
1const ham = $('#js-hamburger');2const nav = $('#js-nav');3ham.on('click', function () { //ハンバーガーメニューをクリックしたら4 ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し5 nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外し6});7
試したこと
他にも参考にしたサイトのhtml, css, javascriptはあるのですが、それらの時も、クリックしても反応がありませんでした。
特にエラーメッセージが表示されている訳でもないのですが、どうしてもjavascriptが何故反映されないのか知りたいので、どうぞよろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント