Q&A
前提・実現したいこと
ハンバーガーメニューを表示したい。
発生している問題・エラーメッセージ
https://www.aiship.jp/knowhow/archives/31639 上記のサイトのコードを丸々コピーして、その後少し手を加えましたが、ハンバーガーメニューが表示されません。
該当のソースコード
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<title>無題ドキュメント</title> 7 <link rel="stylesheet" href="css/humbarger.css"> 8</head> 9 10<body> 11 <script 12src="https://code.jquery.com/jquery-3.3.1.min.js" 13integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 14crossorigin="anonymous"></script> 15<div id="wrapper"> 16 <span></span> 17 <span></span> 18 <span></span> 19 20<nav id="global-navi"> 21 22<ul class="menu"> 23 24<li><a href="">トップ</a></li> 25 26 27<li><a href="">概要</a></li> 28 29 30<li><a href="">特集</a></li> 31 32 33<li><a href="">アクセス</a></li> 34 35 36<li><a href="">お問い合わせ</a></li> 37 38 </ul> 39 40 </nav> 41 42</div> 43 44 <script type="text/javascript" src="js/humbarger.js"></script> 45 46</body> 47</html> 48
css
1@charset "utf-8"; 2/* CSS Document */ 3 4#global-navi { 5 background:#333; 6 position: fixed; 7 top: 0; 8 right: 0px; 9 width: 100%; 10} 11#wrapper nav ul li{ 12display:inline-block; 13font-size: 16px; 14padding: 30px 20px 25px 28px; 15} 16#wrapper nav ul li a{ 17color: #ddd 18} 19/*スマホ画面で例１のハンバーガーメニューの形にする*/ 20@media screen and (max-width: 600px) { 21#wrapper nav { 22 position: fixed; 23 top: 0; 24 right: -300px; 25 width: 300px; 26 height: 100%; 27 padding-top: 50px; 28 background:#333; 29 font-size: 16px; 30 box-sizing: border-box; 31 z-index: 2 32} 33#wrapper nav ul li { 34 display:block; 35 padding: 20px 28px 36} 37 38#wrapper nav ul li a { 39 text-decoration: none; 40 color: #ddd 41} 42 43#wrapper .btn-gnavi { 44 position: fixed; 45 top: 20px; 46 right: 20px; 47 width: 30px; 48 height: 24px; 49 z-index: 3; 50 box-sizing: border-box; 51 cursor: pointer; 52 -webkit-transition: all 400ms; 53 transition: all 400ms 54} 55 56#wrapper .btn-gnavi span { 57 position: absolute; 58 width: 30px; 59 height: 4px; 60 background: #666; 61 border-radius: 10px; 62 -webkit-transition: all 400ms; 63 transition: all 400ms 64} 65 66#wrapper .btn-gnavi span:nth-child(1) { 67 top: 0 68} 69 70#wrapper .btn-gnavi span:nth-child(2) { 71 top: 10px 72} 73 74#wrapper .btn-gnavi span:nth-child(3) { 75 top: 20px 76} 77 78#wrapper .btn-gnavi.open { 79 -webkit-transform: rotate(180deg); 80 transform: rotate(180deg) 81} 82 83#wrapper .btn-gnavi.open span { 84 background: #fff 85} 86 87#wrapper .btn-gnavi.open span { 88 width: 24px; 89} 90#wrapper .contents section p { 91 position: absolute; 92 top: 50%; 93 width: 30%; 94 line-height: 1.4; 95 font-size: 20px; 96 color: #fff; 97 text-shadow: 0 0 6px #666 98} 99 100#wrapper .contents section:nth-child(odd) p { 101 left: 10% 102} 103 104#wrapper .contents section:nth-child(even) p { 105 right: 10% 106} 107}
javascript
1// JavaScript Document 2 3$(function(){ 4 $(".btn-gnavi").on("click", function(){ 5 // ハンバーガーメニューの位置を設定 6 var rightVal = 0; 7 if($(this).hasClass("open")) { 8 // 位置を移動させメニューを開いた状態にする 9 rightVal = -300; 10 // メニューを開いたら次回クリック時は閉じた状態になるよう設定 11 $(this).removeClass("open"); 12 } else { 13 // メニューを開いたら次回クリック時は閉じた状態になるよう設定 14 $(this).addClass("open"); 15 } 16 17 $("#global-navi").stop().animate({ 18 right: rightVal 19 }, 200); 20 }); 21});
回答1件
0
ベストアンサー
ハンバーガーメニュを開くためのボタンをこのサイトが書き忘れていますよ。
html
1<div id="wrapper"> 2 3<p class = "btn-gnavi"> /* 追記 */ 4 <span></span> 5 <span></span> 6 <span></span> 7</p> /* 追記 */ 8 9
投稿2020/04/19 08:02
総合スコア757
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/19 09:11