jQueryについて質問させてください。 ハンバーガーメニューを作ろうとしていますが 表示はされるものの意図どおり動作しません。

ベストアンサー

0

ThanksImg質問者からのお礼コメント

ありがとうございます!

お礼日時:4/13 8:14

その他の回答(1件)

0

gom********さん >・・・・ハンバーガーメニューを作ろう・・・・・・ ご参考に↓ https://knoweb.net/html-css/css/responsive-hamburgermenu/ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .navToggle { display : block; position: fixed; z-index : 3; right : 13px; top : 12px; width : 42px; height: 42px; cursor: pointer; text-align: center; } .navToggle span { display : block; position: absolute; width : 30px; height : 2px ; left : 6px; background : #555; transition : 0.3s ease-in-out; } .navToggle span:nth-child(1) { top: 10px; } .navToggle span:nth-child(2) { top: 20px; } .navToggle span:nth-child(3) { top: 30px; } /* ナビ開いてる時のボタン */ .navToggle.active span:nth-child(1) { top : 16px; left: 6px; transform : rotate(-45deg); } .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 16px; transform : rotate(45deg); } nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #000; background: #fff; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 100%; } nav.globalMenuSp ul { background: #ccc; margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; border-bottom: 1px solid #fff; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li:hover{ background :#ddd; } nav.globalMenuSp ul li a { display: block; color: #000; padding: 1em 0; text-decoration :none; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { transform: translateY(0%); } </style> </head> <body> </head> <body> <nav class="globalMenuSp"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> <div class="navToggle"> <span></span> <span></span> <span></span> </div> <script> $(function() { $('.navToggle').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); }); </script> </body> </html>