前提
WEBページのサンプルを作成しているとき、レスポンシブデザインで画面幅が狭くなったとき、JQueryでハンバーガーメニューを表示させる機能を実装しようとしたところうまく起動しなくて困っております。
実現したいこと-
- ハンバーガーメニューを実装する。
該当のソースコード
html
1 <header class="fadein-first fadein-from-up"> 2 <div class="wrap"> 3 <img src="image/logo_green.png" class="link"> 4 <nav class="nav-01"> 5 <ul> 6 <li class="link">News</li> 7 <li class="link">About</li> 8 <li class="link">Service</li> 9 <li class="link">Recruit</li> 10 <li class="link">Contact</li> 11 </ul> 12 </nav> 13 <div class="hamburger"> 14 <span class="bar bar-top"></span> 15 <span class="bar bar-middle"></span> 16 <span class="bar bar-bottom"></span> 17 </div> 18 </div> 19 </header> 20 <nav class="nav-02"> 21 <ul> 22 <li class="link">News</li> 23 <li class="link">About</li> 24 <li class="link">Service</li> 25 <li class="link">Recruit</li> 26 <li class="link">Contact</li> 27 </ul> 28 </nav>
css
1@media (max-width: 768px) { 2 3 .nav-01 { 4 display: none; 5 } 6 7 .nav-02 { 8 display: block; 9 position: fixed; 10 right: -40%; 11 width: 40%; 12 height: 100%; 13 background-color: white; 14 opacity: 0.8; 15 padding: 7.5rem 2.5rem; 16 z-index: 1; 17 transition:0.7s; 18 overflow-x: hidden; 19 } 20 21 .nav-02 ul{ 22 display: flex; 23 flex-direction: column; 24 } 25 26 .nav-02 ul li { 27 margin-bottom: 2.5rem; 28 color: #2da690; 29 } 30 31 .nav-02-active { 32 display: block; 33 right: 0; 34 } 35 36 .hamburger { 37 display: block; 38 position: relative; 39 width: 3rem; 40 height: 3rem; 41 z-index: 3; 42 } 43 44 .hamburger .bar{ 45 position: absolute; 46 width: 2rem; 47 height: 2px; 48 display: block; 49 background: #2da690; 50 transition: 0.1s; 51 box-sizing: border-box; 52 } 53 54 .hamburger .bar-top { 55 top: 10px; 56 } 57 58 .hamburger .bar-middle { 59 line-height: 1.5rem; 60 top: 48%; 61 } 62 63 .hamburger .bar-bottom { 64 bottom: 10px; 65 } 66 67 .hamburger.close .bar-top{ 68 transform: rotate(45deg); 69 top: 48%; 70 } 71 .hamburger.close .bar-middle{ 72 display: none; 73 } 74 .hamburger.close .bar-bottom{ 75 transform: rotate(-45deg); 76 bottom: 48%; 77 } 78
JQuery
1'use strict'; 2 3$(function() { 4 5 var scroll = 0; 6 7 /* メインビジュアルの切り替え */ 8 $('.img-wrap img:nth-child(n+2)').hide(); 9 setInterval(function() { 10 $(".img-wrap img:first-child").fadeOut(2000); 11 $(".img-wrap img:nth-child(2)").fadeIn(2000); 12 $(".img-wrap img:first-child").appendTo(".img-wrap"); 13 }, 4000); 14 15 /* フェードイン */ 16 /* メインビジュアル */ 17 $('.top p').addClass('fadein-active01'); 18 $('header').addClass('fadein-active02'); 19 20 /* メインビジュアル以下 */ 21 $(window).scroll(function () { 22 $('.fadein-scroll').each(function(){ 23 var elemPos = $(this).offset().top, 24 windowHeight = $(window).height(); 25 scroll = $(window).scrollTop(); 26 27 if (scroll > elemPos - windowHeight ) { 28 $(this).addClass('fadein-active01'); 29 } 30 31 if (scroll > elemPos + $(this).height() || scroll < elemPos - windowHeight) { 32 $(this).removeClass('fadein-active01'); 33 } 34 }); 35 }); 36 37 /* ハンバーガーメニュー */ 38 $('.hamburger').on('click',function() { 39 console.log("ok") 40 $('.nav-02').toggleClass('nav-active'); 41 $(this).toggleClass('close'); 42 }); 43 44});
試したこと
まずハンバーガーメニューを動かすために記入したクリックアクションはエラーはでておらず動いているようです。
その後の記述、もしくは表示させる為のCSSに問題があるように思えるが何が間違えているのかわかりません。。
お分かりの方がいらっしゃいましたらご教示いただけたら幸いです。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/08/17 23:40