Document

jQueryの勉強中でハンバーガーメニューを実装したいのですが、画面が真っ白になってしまいました。 consoleをみてもエラーは出ていないのですが、何がいけないのでしょうか？ ```html Document ``` ```css /*　ハンバーガーボタン　*/ .hamburger { display : block; position: fixed; z-index : 3; right : 13px; top : 12px; width : 42px; height: 42px; cursor: pointer; text-align: center; } .hamburger span { display : block; position: absolute; width : 30px; height : 2px ; left : 6px; background : #555; -webkit-transition: 0.3s ease-in-out; -moz-transition : 0.3s ease-in-out; transition : 0.3s ease-in-out; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* ナビ開いてる時のボタン */ .hamburger.active span:nth-child(1) { top : 16px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform : rotate(-45deg); transform : rotate(-45deg); } .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) { top: 16px; -webkit-transform: rotate(45deg); -moz-transform : rotate(45deg); 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%); } ```

	@@ -1 +1 @@
1	- jQueryのハンバーガーメニューを作りたい
1	+ jQueryでハンバーガーメニューを作りたい

質問編集履歴