Q&A
htmlに.hamburgerが見当たりませんが。
jQueryの勉強中でハンバーガーメニューを実装したいのですが、
画面が真っ白になってしまいました。
consoleをみてもエラーは出ていないのですが、
何がいけないのでしょうか？
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8 <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> 9<script> 10 $(function() { 11 $('.hamburger').click(function() { 12 $(this).toggleClass('active'); 13 14 if ($(this).hasClass('active')) { 15 $('.globalMenuSp').addClass('active'); 16 } else { 17 $('.globalMenuSp').removeClass('active'); 18 } 19 }); 20}); 21 </script> 22 23</head> 24<body> 25 <nav class="globalMenuSp"> 26 <ul> 27 <li><a href="#">Menu1</a></li> 28 <li><a href="#">Menu2</a></li> 29 <li><a href="#">Menu3</a></li> 30 <li><a href="#">Menu4</a></li> 31 <li><a href="#">Menu5</a></li> 32 </ul> 33 </nav> 34 35</body> 36</html>
css
1/* ハンバーガーボタン */ 2.hamburger { 3 display : block; 4 position: fixed; 5 z-index : 3; 6 right : 13px; 7 top : 12px; 8 width : 42px; 9 height: 42px; 10 cursor: pointer; 11 text-align: center; 12 } 13 .hamburger span { 14 display : block; 15 position: absolute; 16 width : 30px; 17 height : 2px ; 18 left : 6px; 19 background : #555; 20 -webkit-transition: 0.3s ease-in-out; 21 -moz-transition : 0.3s ease-in-out; 22 transition : 0.3s ease-in-out; 23 } 24 .hamburger span:nth-child(1) { 25 top: 10px; 26 } 27 .hamburger span:nth-child(2) { 28 top: 20px; 29 } 30 .hamburger span:nth-child(3) { 31 top: 30px; 32 } 33 34 /* ナビ開いてる時のボタン */ 35 .hamburger.active span:nth-child(1) { 36 top : 16px; 37 left: 6px; 38 -webkit-transform: rotate(-45deg); 39 -moz-transform : rotate(-45deg); 40 transform : rotate(-45deg); 41 } 42 43 .hamburger.active span:nth-child(2), 44 .hamburger.active span:nth-child(3) { 45 top: 16px; 46 -webkit-transform: rotate(45deg); 47 -moz-transform : rotate(45deg); 48 transform : rotate(45deg); 49 } 50 51 nav.globalMenuSp { 52 position: fixed; 53 z-index : 2; 54 top : 0; 55 left : 0; 56 color: #000; 57 background: #fff; 58 text-align: center; 59 transform: translateY(-100%); 60 transition: all 0.6s; 61 width: 100%; 62 } 63 64 nav.globalMenuSp ul { 65 background: #ccc; 66 margin: 0 auto; 67 padding: 0; 68 width: 100%; 69 } 70 71 nav.globalMenuSp ul li { 72 list-style-type: none; 73 padding: 0; 74 width: 100%; 75 border-bottom: 1px solid #fff; 76 } 77 nav.globalMenuSp ul li:last-child { 78 padding-bottom: 0; 79 border-bottom: none; 80 } 81 nav.globalMenuSp ul li:hover{ 82 background :#ddd; 83 } 84 85 nav.globalMenuSp ul li a { 86 display: block; 87 color: #000; 88 padding: 1em 0; 89 text-decoration :none; 90 } 91 92 /* このクラスを、jQueryで付与・削除する */ 93 nav.globalMenuSp.active { 94 transform: translateY(0%); 95 }
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
をつけたしたら直りました。
回答1件
0
自己解決
html
1<div class="hamburger"> 2 <span></span> 3 <span></span> 4 <span></span> 5</div>
追加したらOKでした。
投稿2021/01/02 08:46
総合スコア120
あなたの回答
tips
プレビュー
