Q&A
ハンバーガーメニューを作成しています。
ここに質問の内容を詳しく書いてください。
レスポンシブ対応で７６７px以下でハンバーガーメニューになるヘッダーを作成しています。
クリックをすると上からメニューが出てくるようにしたいのですが、三本線の時は、クリックが効いて
メニューが出てくるのですが、メニューが出てきて✖️ボタンになるとクリックが効かなくなり、メニューが閉じなくなります。
色々検索したりハンバーガーメニューについて再度調べましたが、出てきませんでした。お教えいただけないでしょうか。
コードは以下の通りです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>温泉旅館HP</title> 8 <link rel="stylesheet" href="css/style.css"> 9 <link href="slick-theme.css" rel="stylesheet" type="text/css"> 10 <link href="slick.css" rel="stylesheet" type="text/css"> 11</head> 12<body> 13 <header class="header"> 14 <div class="header-fixed"> 15 <img class="header-logo" src="image/logo.png"> 16 <button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false"> 17 <span class="p-hamburger__line"> 18 </span> 19 </button> 20 </div> 21 <div class="nav header-nav" id="nav"> 22 <ul class="nav-list"> 23 <li class="nav-item"><a href="#">宿泊予約</a></li> 24 <li class="nav-item"><a href="#">観光情報</a></li> 25 <li class="nav-item"><a href="#">よくあるご質問</a></li> 26 <li class="nav-item"><a href="#">お問い合わせ</a></li> 27 </ul> 28 </div> 29 </header>
css
1コード@media screen and (max-width:767px) { 2 .c-button { 3 position: relative; 4 display: inline-block; 5 text-decoration: none; 6 -webkit-appearance: none; 7 -moz-appearance: none; 8 appearance: none; 9 border: none; 10 background-color: transparent; 11 12 } 13 .p-hamburger { 14 position: absolute; 15 top: 0; 16 bottom: 0; 17 right: 20px; 18 width: 80px; 19 height: 80px; 20 margin: auto; 21 outline: none; 22 padding: 0 1em; 23 -webkit-transition: all .3s ease-in-out; 24 transition: all .3s ease-in-out; 25 } 26 .p-hamburger__line { 27 position: absolute; 28 top: 0; 29 right: 0; 30 bottom: 0; 31 left: 0; 32 margin: auto; 33 width: 80%; 34 height:3px; 35 background-color: white; 36 -webkit-transition: inherit; 37 transition: inherit; 38 } 39 .p-hamburger__line::before, 40 .p-hamburger__line::after { 41 position: absolute; 42 display: block; 43 width: 100%; 44 height: 100%; 45 background-color: inherit; 46 content: ''; 47 -webkit-transition: inherit; 48 transition: inherit; 49 } 50 .p-hamburger__line::before { 51 top: -5px; 52 } 53 .p-hamburger__line::after { 54 top: 5px; 55 } 56 .p-hamburger[aria-expanded="true"] .p-hamburger__line { 57 background-color: transparent; 58 } 59 .p-hamburger[aria-expanded="true"] .p-hamburger__line::before, 60 .p-hamburger[aria-expanded="true"] .p-hamburger__line::after { 61 top: 0; 62 background-color: white; 63 } 64 65 .p-hamburger[aria-expanded="true"] .p-hamburger__line::before { 66 -webkit-transform: rotate(45deg); 67 transform: rotate(45deg); 68 } 69 .p-hamburger[aria-expanded="true"] .p-hamburger__line::after { 70 -webkit-transform: rotate(-45deg); 71 transform: rotate(-45deg); 72 } 73 .header-fixed{ 74 z-index: 1; 75 } 76 .header-nav{ 77 position: fixed; 78 top: -100%; 79 width: 100%; 80 height: 50%; 81 font-size: 16px; 82 box-sizing: border-box; 83 z-index: 2; 84 padding-top: 50px; 85 transition: .3s; 86 } 87 .header-nav.open{ 88 top: 0px; 89 } 90 .nav-list{ 91 width: 100%; 92 height:100%; 93 display: flex; 94 flex-direction: column; 95 text-align: center; 96 margin: 0; 97 margin-top: 40px; 98 background-color: #000000CC; 99 /*justify-content: center;*/ 100 } 101 .nav-item{ 102 display: block; 103 padding : 20px; 104 } 105 .nav-item a{ 106 color: #ddd; 107 text-decoration: none; 108 } 109}
jquery
1コード$(function(){ 2 $('#js-buttonHamburger').click(function () { 3 $('#nav').toggleClass('open'); 4 $("#global-nav").slideToggle(); 5 if ($('#js-buttonHamburger').attr('aria-expanded') == 'false') { 6 $('#js-buttonHamburger').attr('aria-expanded', true); 7 } else { 8 $('#js-buttonHamburger').attr('aria-expanded', false); 9 } 10 }); 11 });
回答1件
0
ベストアンサー
z-index の設定でハンバーガボタン(✖️ボタン)よりメニューの方が前面にきているのでクリックできない状態になってますね。
ハンバーガボタンがメニューより前面に来るように設定すればいいでしょう。
ただし、z-index は親要素を超えることはできまくせんので、ハンバーガボタンの親要素が前面にくるように設定する必要があります。
例えば、下記のように設定すればクリックできる様になります。
css
1 .header-fixed{ 2 position:relative; /* 追加 */ 3 z-index: 3; /* 修正 */ 4 }
position:relative;の設定は z-index を有効にするには必須ですが、そのためにボタンのレイアウトが変わる可能性があるので、それにあわせて他の設定を変更する必要があるかもしれません。
（CSSの全体、希望のレアイアウトが不明なので具体的なコードは提示できませんが。）
投稿2021/04/24 01:32
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/24 11:17