Q&A
デモサイトを参考に自身でコーディングしています。
質問は表題の通りで、メニュークリック後に左からメニュー一覧がスライドででてくるアニメーションを実装したいのですが、クリックした瞬間に切り替わってしまいます。
デモサイトを参考にしてもうまくいきませんでした。
ご教授していただける方いらっしゃいますでしょうか？よろしくお願いします。
下記はデモサイトurlです。
https://code-step.com/demo/html/corporate3/
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>test 明るいハウス</title> 8 <link rel="stylesheet" href="t.css"> 9</head> 10<body> 11 <header> 12 13 <div class="header-img"><img src="https://code-step.com/demo/html/corporate3/img/logo.svg" alt=""></div> 14 <div id="hanbargar-menu" class="hanbargar-menu"> 15 <span></span> 16 <span></span> 17 <span></span> 18 </div> 19 20 <div class="mask"> 21 <ul> 22 <li><a href="#">私たちについて</a></li> 23 <li><a href="#">サービス</a></li> 24 <li><a href="#">商品情報</a></li> 25 <li><a href="#">展示会</a></li> 26 <li><a href="#">暮らしの日記</a></li> 27 <li><a href="#">会社概要</a></li> 28 <li><a href="#">Twitter</a></li> 29 <li><a href="#">facebook</a></li> 30 <li><a href="#">instagram</a></li> 31 </ul> 32 33 34 </div> 35 <script src="t.js"></script> 36 </header>
css
1* { 2 margin: 0; 3 padding: 0; 4 5} 6 7 8header { 9 position: fixed; 10 width: 100vw; 11 background: white; 12 13 height: 72px; 14 display: flex; 15 justify-content: space-between; 16 box-sizing: border-box; 17 padding: 27px 18px; 18 align-items: center; 19 z-index: 99; 20} 21 22 23.header-img { 24 width: 180px; 25 height: 54px; 26} 27 28.header-img > img { 29 width: 100%; 30 vertical-align: bottom; 31} 32 33.hanbargar-menu { 34 width: 30px; 35 height: 20px; 36 position: relative; 37 38} 39 40.hanbargar-menu span { 41 position: absolute; 42 background: black; 43 width: 30px; 44 height: 2px; 45} 46 47.hanbargar-menu span:nth-last-of-type(1) { 48 top: 0; 49 left: 0; 50 51} 52 53.hanbargar-menu span:nth-last-of-type(2) { 54 top: 10px; 55 left: 0; 56} 57 58.hanbargar-menu span:nth-last-of-type(3) { 59 top: 20px; 60 left: 0; 61} 62 63main { 64 padding-top: 72px; 65} 66 67.mask { 68 display: none; 69 transition: 0.5s; 70} 71 72.mask.active { 73 display: block; 74 position: fixed; 75 background-color: rgba(0, 0, 0, 0.679); 76 top: 0; 77 left: 0; 78 bottom: 0; 79 right: 0; 80 z-index: 99; 81 82} 83 84.mask ul { 85 width: 300px; 86 background: #fff; 87 padding: 25px; 88 position: fixed; 89 top: 0; 90 left: -300px; 91 bottom: 0; 92 opacity: 0; 93 overflow-y: auto; 94 transition: 0.5s; 95 z-index: 99; 96 list-style: none; 97} 98 99.mask.active ul { 100 opacity: 1; 101 left: 0; 102 103} 104 105.mask.active ul li { 106 padding-bottom: 16px; 107} 108 109.mask.active ul li:nth-of-type(6) { 110 padding-bottom: 70px; 111} 112 113.mask.active ul li a { 114 text-decoration: none; 115 color: black; 116 font-size: 14px; 117 line-height: 1.71; 118} 119 120#hanbargar-menu { 121 position: relative; 122 z-index: 999; 123} 124 125.hanbargar-menu.close span:nth-of-type(1), 126.hanbargar-menu.close span:nth-of-type(3) { 127 transition: transform .4s , background-color .4s; 128 background: white; 129} 130 131.hanbargar-menu.close span:nth-of-type(1) { 132 transform: translateY(-10px) rotate(-315deg); 133} 134 135.hanbargar-menu.close span:nth-of-type(3) { 136 transform: translateY(10px) rotate(315deg); 137} 138 139.hanbargar-menu.close span:nth-of-type(2) { 140 opacity: 0; 141 transition: opacity .2s; 142} 143
js
1 2{ 3 4 const menu = document.querySelector('.hanbargar-menu'); 5 const mask = document.querySelector('.mask'); 6 7 menu.addEventListener('click', function() { 8 mask.classList.toggle('active'); 9 menu.classList.toggle('close'); 10 }); 11}
回答1件
0
ベストアンサー
こうするとどうでしょうか。
css
1 2 .mask { 3 display: none; 4 transition: 0.5s; 5 display: block; 6 position: fixed; 7 }
投稿2022/04/21 09:10
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/21 10:58