Q&A
前提・実現したいこと
https://www.aiship.jp/knowhow/archives/31639
上記のページを参考にハンバーガーメニューを作成したい
発生している問題・エラーメッセージ
何も表示されない
該当のソースコード
HTML
1<html> 2<head> 3 <title></title> 4 <link href="css/style.css" rel="stylesheet" type="text/css"> 5 6 <script> 7 $(function(){ 8 $(".btn-gnavi").on("click", function(){ 9 // ハンバーガーメニューの位置を設定 10 var rightVal = 0; 11 if($(this).hasClass("open")) { 12 // 位置を移動させメニューを開いた状態にする 13 rightVal = -300; 14 // メニューを開いたら次回クリック時は閉じた状態になるよう設定 15 $(this).removeClass("open"); 16 } else { 17 // メニューを開いたら次回クリック時は閉じた状態になるよう設定 18 $(this).addClass("open"); 19 } 20 $("#global-navi").stop().animate({ 21 right: rightVal 22 }, 200); 23 }); 24}); 25</script> 26 27</head> 28<body> 29<script 30src="https://code.jquery.com/jquery-3.3.1.min.js" 31integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 32crossorigin="anonymous"></script> 33 34<div id="wrapper"> 35 <span></span> 36 <span></span> 37 <span></span> 38 39<nav id="global-navi"> 40 41<ul class="menu"> 42 43<li><a href="">トップ</a></li> 44<li><a href="">概要</a></li> 45<li><a href="">特集</a></li> 46<li><a href="">アクセス</a></li> 47<li><a href="">お問い合わせ</a></li> 48</ul> 49</nav> 50</div> 51</body> 52</html>
css
1#global-navi { 2 background:#333; 3 position: fixed; 4 top: 0; 5 right: 0px; 6 width: 100%; 7} 8#wrapper nav ul li{ 9display:inline-block; 10font-size: 16px; 11padding: 30px 20px 25px 28px; 12} 13#wrapper nav ul li a{ 14color: #ddd 15} 16/*スマホ画面で例１のハンバーガーメニューの形にする*/ 17@media screen and (max-width: 600px) { 18#wrapper nav { 19 position: fixed; 20 top: 0; 21 right: -300px; 22 width: 300px; 23 height: 100%; 24 padding-top: 50px; 25 background:#333; 26 font-size: 16px; 27 box-sizing: border-box; 28 z-index: 2 29} 30#wrapper nav ul li { 31 display:block; 32 padding: 20px 28px 33} 34 35#wrapper nav ul li a { 36 text-decoration: none; 37 color: #ddd 38} 39 40#wrapper .btn-gnavi { 41 position: fixed; 42 top: 20px; 43 right: 20px; 44 width: 30px; 45 height: 24px; 46 z-index: 3; 47 box-sizing: border-box; 48 cursor: pointer; 49 -webkit-transition: all 400ms; 50 transition: all 400ms 51} 52 53#wrapper .btn-gnavi span { 54 position: absolute; 55 width: 30px; 56 height: 4px; 57 background: #666; 58 border-radius: 10px; 59 -webkit-transition: all 400ms; 60 transition: all 400ms 61} 62 63#wrapper .btn-gnavi span:nth-child(1) { 64 top: 0 65} 66 67#wrapper .btn-gnavi span:nth-child(2) { 68 top: 10px 69} 70 71#wrapper .btn-gnavi span:nth-child(3) { 72 top: 20px 73} 74 75#wrapper .btn-gnavi.open { 76 -webkit-transform: rotate(180deg); 77 transform: rotate(180deg) 78} 79 80#wrapper .btn-gnavi.open span { 81 background: #fff 82} 83 84#wrapper .btn-gnavi.open span { 85 width: 24px; 86} 87#wrapper .contents section p { 88 position: absolute; 89 top: 50%; 90 width: 30%; 91 line-height: 1.4; 92 font-size: 20px; 93 color: #fff; 94 text-shadow: 0 0 6px #666 95} 96 97#wrapper .contents section:nth-child(odd) p { 98 left: 10% 99} 100 101#wrapper .contents section:nth-child(even) p { 102 right: 10% 103} 104}
試したこと
スクリプトを読み込ませる位置がいけないのかと思い
</body>の前で読み込ませてみたのですが反映されませんでした。
回答1件
0
ベストアンサー
上記サイトの例がJQueryを理解している人前提で、ずいぶん端折られている部分がありますね。
ピンポイントで重要な部分のコードだけを例示して、あとはサンプルをみてねって感じだと思います。
で、問題は
javascript
1$(".btn-gnavi").on("click", function(){
これは本来calss="btn-gnavi"といクラス名が付与されたタグがないと動きません。
それがハンバーガーメニューのアイコン（三本線のやつ）になり、そのアイコンをクリックするとメニューが表示される仕組みです。
で、肝心のハンバーガーメニューのアイコンが例示のコードにはないので何も表示されない状態です。
まず、上記サイトの「例１ 基本的なハンバーガーメニューを作成する」のリンクでサンプルを見てください。ブラウザならソースもみれるので完成形を見てから解説を読むのをおススメします。
投稿2020/04/16 07:26
編集2020/04/16 07:30
総合スコア330
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。