前提・実現したいこと
ハンバーガーメニューのアイコンをクリックしたとき→上の線と下の線で×を作る
ここに質問の内容を詳しく書いてください。
ハンバーガーメニューのアイコンをクリックしたときに、3本線からバツ印を作る方法を教えてください。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<header class="header"> 2 <h1 class="header-ttl"><a href="index.html">My Work</a></h1> 3 <nav class="header-nav" id="nav"> 4 <ul class="header-list"> 5 <li class="header-item"> 6 <a href="" class="header-link">About</a> 7 </li> 8 <li class="header-item"> 9 <a href="" class="header-link">Works</a> 10 </li> 11 <li class="header-item"><a href="" class="header-link">News</a></li> 12 <li class="header-item"> 13 <a href="" class="header-link">Contact</a> 14 </li> 15 <li class="header-item"> 16 <a href="" class="header-link" 17 ><img src="img/icon-instagram.png" alt="" class="instagram-img" 18 /></a> 19 </li> 20 </ul> 21 </nav> 22 <!-- ハンバーガーメニュー --> 23 <div class="hamburger" id="hamburger"> 24 <!-- 1番上の線 --> 25 <span class="inner_line bar-top" id="line1"></span> 26 <!-- 真ん中の線 --> 27 <span class="inner_line bar-mid" id="line2"></span> 28 <!-- 1番下の線 --> 29 <span class="inner_line bar-bot" id="line3"></span> 30 </div> 31 </header>
css
1/* header */ 2.header { 3 display: flex; 4 justify-content: space-between; 5 align-items: center; 6} 7 8.header-ttl { 9 font-size: 30px; 10} 11 12.header-list { 13 display: flex; 14 justify-content: space-between; 15 align-items: center; 16} 17 18.header-item { 19 margin: 0 15px; 20 font-size: 16px; 21} 22 23.instagram-img { 24 width: 30px; 25} 26 27.active { 28 display: block; 29} 30 31@media (max-width: 480px) { 32 .header { 33 position: relative; 34 } 35 36 .header-nav { 37 display: none; 38 /* width: 200vw; */ 39 /* height: 100vh; */ 40 transform: translateX(100%); 41 transition: 0.5s; 42 } 43 44 .header-nav.slide-in { 45 transform: translateX(0); 46 display: block; 47 position: fixed; 48 text-align: center; 49 background: rgba(255, 255, 255, 0.9); 50 top: 0; 51 left: 0; 52 bottom: 0; 53 right: 0; 54 } 55 56 .header-list { 57 display: block; 58 position: absolute; 59 top: 50%; 60 left: 50%; 61 transform: translate(-50%, -50%); 62 } 63 64 .header-item { 65 margin-bottom: 20px; 66 } 67 68 .hamburger { 69 position: absolute; 70 right: 20px; 71 display: block; 72 width: 40px; 73 height: 50px; 74 cursor: pointer; 75 z-index: 999; 76 } 77 78 .inner_line { 79 display: block; 80 position: absolute; 81 right: 20px; 82 width: 40px; 83 height: 1px; 84 background: #333; 85 transition: 0.3s; 86 } 87 88 .bar-top { 89 top: 10px; 90 } 91 92 .bar-mid { 93 top: 50%; 94 } 95 96 .bar-bot { 97 bottom: 10px; 98 } 99 100 .hamburger.close .bar_top { 101 transform: rotate(45deg); 102 top: 20px; 103 } 104 .hamburger.close .bar_mid { 105 opacity: 0; 106 } 107 .hamburger.close .bar_bottom { 108 transform: rotate(-45deg); 109 top: 20px; 110 } 111} 112
jQuery
1$(function () { 2 $(".hamburger").click(function () { 3 $(".hamburger").toggleClass("close"); 4 $(".header-nav").toggleClass("slide-in"); 5 }); 6});
試したこと
.hamburgerをクリックしたときに、jQueryでcloseクラスをつけてあげて、3本線それぞれにcloseがついた時のcssを指定しました。
補足情報(FW/ツールのバージョンなど)
</body>の直前にjQueryのCDNと自作のjsのファイルの記述はしています。回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/30 11:33