Q&A
前提・実現したいこと
jsでハンバーガーメニュー表示を実装しています。
ハンバーガーメニュー内のメニューをクリックするとアコーディオンメニューのように新たにカテゴリーが表示されるようにcssで書いていますが、下にスライドして空間はできますが、文字が表示されません。
<現状>
ハンバーガーメニュー内のメニューをクリックすると隠れているメニューが下に出てくる動きです。
フルスクリーンで展開するアニメーションエフェクトになってます。
html,scss,jsで作成しております。
＜実現したい事＞
●メニューCをクリック（他メニューD,メニューF）すると、下に隠れているメニューを表示させるようにしたい
●メニュー内を縦スクロールにしたい
発生している問題・エラーメッセージ
●メニューCをクリックして下に隠れているメニューを表示 途中まではできましたが、メニューCが中央寄せにならない。しかし、クリックすると中央寄せになる。 また、メニューCをクリックすると、隠れているメニューの文字は表示されないが、空間はできる
該当のソースコード
<!--ナビSP--> <button class="menu-toggle"></button> <nav> <ul class="menu Serif"> <li data-text="Home"><a href="./">メニューA</a></li> <li data-text="About"><a href="#">メニューB</a></li> <div class="accordion-wrap"> <li data-text="Salon menu" class="accordion-header"> <a href="#">メニューC<i class="fa fa-angle-down" aria-hidden="true"></i></a></li> <ul class="menu__second-level accordion-text"> <li>メニューC-1</li> <li>メニューC-2</li> <li>メニューC-3</li> </ul> </div> <div class="accordion-wrap"> <li data-text="School" class="accordion-header"> <a href="#">メニューD<i class="fa fa-angle-down" aria-hidden="true"></i></a></li> <ul class="menu__second-level accordion-text"> <li>メニューD-1</li> <li>メニューD-2</li> <li>メニューD-3</li> </ul> </div> <li data-text="Campeign"><a href="campeign/index.html">メニューE</a></li> <div class="accordion-wrap"> <li data-text="School" class="accordion-header"> <a href="#">メニューF<i class="fa fa-angle-down" aria-hidden="true"></i></a></li> <ul class="menu__second-level accordion-text"> <li>メニューF-1</li> <li>メニューF-2</li> <li>メニューF-3</li> </ul> </div> </ul> </nav> <!--scss--> html, body { margin: 0; padding: 0; height: 100%; width: 100%; } button { /* opacity: 0.6;*/ background-color: transparent; position: fixed; z-index: 2; top: 35px; right: 30px; border: none; width: 36px; height: 30px; outline: none; transition: opacity 0.2s ease-out; } @media only screen and (max-width: 425px){ button { top: 14px; } } button:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; right: auto; width: 100%; background: linear-gradient(to bottom, #c5a368, #c5a368 20%, transparent 20%, transparent 40%, #c5a368 40%, #c5a368 60%, transparent 60%, transparent 80%, #c5a368 80%, #c5a368 100%); /* background: linear-gradient(to bottom, #98B296, #98B296 20%, transparent 20%, transparent 40%, #98B296 40%, #98B296 60%, transparent 60%, transparent 80%, #98B296 80%, #98B296 100%);*/ transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out; } button:after { opacity: 0; content: '×'; color: white; position: absolute; top: 16px; left: -4px; font-family: Arial, sans-serif; font-size: 76px; line-height: 0; transition: opacity 0.4s ease-out; } button:active { transform: translateY(2px); } button:hover { opacity: 1; } .open button { opacity: 1; } .open button:before { opacity: 0; width: 0; } .open button:after { opacity: 1; transform: translate3d(0, 0, 0) rotate(360deg); transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; } /*下層*/ button.menu-toggle-kaso { background-color: transparent; position: fixed; z-index: 2; top: 30px; right: 30px; border: none; width: 36px; height: 30px; outline: none; transition: opacity 0.2s ease-out; } @media only screen and (max-width: 991px){ button.menu-toggle-kaso { top: 22px; } } @media only screen and (max-width: 425px){ button.menu-toggle-kaso { top: 20px; } } button.menu-toggle-kaso:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; right: auto; width: 100%; background: linear-gradient(to bottom, #000000, #000000 20%, transparent 20%, transparent 40%, #000000 40%, #000000 60%, transparent 60%, transparent 80%, #000000 80%, #000000 100%); transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out; } button:after { opacity: 0; content: '×'; color: white; position: absolute; top: 16px; left: -4px; font-family: Arial, sans-serif; font-size: 76px; line-height: 0; transition: opacity 0.4s ease-out; } button:active { transform: translateY(2px); } button:hover { opacity: 1; } .open button { opacity: 1; } .open button:before { opacity: 0; width: 0; } .open button:after { opacity: 1; transform: translate3d(0, 0, 0) rotate(360deg); transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; } nav { z-index: 1; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; transform: translate3d(0, 0, 0); backface-visibility: hidden; overflow: hidden; } nav:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgb(197, 163, 104, 0.98); /* background: rgba(123, 156, 121, 0.98);*/ width: 100%; height: 0; padding-bottom: 100%; border-radius: 100%; transform: scale(0.04), translateY(9999px); overflow: hidden; } .open nav { top: 0; } .open nav:before { animation: menu-animation 0.8s ease-out forwards; } ul.menu { position: fixed; top: 25%; left: 48%; transform: translate3d(-50%, -50%, 0); backface-visibility: hidden; perspective: 1000; color: white; } ul.menu li { opacity: 0; text-align: center; transform: translate3d(0, 36px, 0); } ul.menu li:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; left: auto; background-color: white; height: 100%; width: 0; overflow: hidden; transition: width 0.14s ease-out; } ul.menu li:after { opacity: 0; content: attr(data-text); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; color: #c5a368; /* color: #98B296;*/ overflow: hidden; transform: translate(-24px, 6px); transition: transform 0.1s ease-out, opacity 0.1s ease-out; } ul.menu li:hover:before { left: 0; right: auto; width: 100%; } ul.menu li:hover:after { opacity: 1; padding: 0 20px; transform: translate(0px, 6px); transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out; } .open ul.menu li { opacity: 1; transform: translate3d(0, 0, 0); transition: transform 0.2s ease-out, opacity 0.2s ease-out; } /*クリックしてから、順番に出てくる 数字を入力する事*/ .open ul.menu li:nth-child(1) { transition-delay: 0.75s; } .open ul.menu li:nth-child(2) { transition-delay: 0.85s; } .open ul.menu li:nth-child(3) { transition-delay: 0.95s; } .open ul.menu li:nth-child(4) { transition-delay: 1.05s; } .open ul.menu li:nth-child(5) { transition-delay: 1.15s; } .open ul.menu li:nth-child(6) { transition-delay: 1.25s; } article { padding: 24px; max-width: 600px; margin: 60px auto; transition: 0.2s ease-out; } .open article { transform: scale(0.92); transition: transform 0.2s 0.41s ease-out; } @keyframes menu-animation { 0% { opacity: 0; transform: scale(0.04) translateY(300%); } 40% { transform: scale(0.04) translateY(0); transition: ease-out; } 40% { transform: scale(0.04) translateY(0); } 60% { opacity: 1; transform: scale(0.02) translateY(0px); } 61% { transform: scale(0.04); } 99.9% { height: 0; padding-bottom: 100%; border-radius: 100%; } 100% { transform: scale(2); height: 100%; padding-bottom: 0; border-radius: 0; } } /* Scss Document */ <script> $('button').on('click', function(){ $('body').toggleClass('open'); }); </script>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
アドビ ドリームウィーバー2019を使用しています。
あなたの回答
tips
プレビュー
