Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
イベントの解除かクラスの解除方法がわからないです。
ハンバーガーボタンをクリックして、横からナビメニューが出てきた後、
そのメニューをクリックすると、スクロールでコンテンツに移動して、ナビメニューは自動的に閉じるようにしたいです。
スクロールで移動するのと、クリックした後ナビメニューを閉じるのまではできたのですが、
その後ナビメニューが開かなくなります。
下記を見ていただきたいのですが、閉じるために加えた'nav-close'というクラスが、
メニューを閉じた後でもずっとついたままになっているのが原因だと思われます。
やりたいこととしては、ナビメニューが閉じた後には'nav-close'というクラスを削除したいです。
ちなみにレスポンシたときにハンバーガボタンが出てくるのでmatchMediaをつけています。
どなたか教えていただけますと幸いです。
（javascript）
function eventRemove (){
closeNavMenu.classList.toggle('nav-close');
}
if (matchMedia('only screen and (max-width:780px').matches){
for (let i = 0; i < closeBtn.length; i++){
closeBtn[i].addEventListener('click', eventRemove);
}
}
（CSS）
.nav{
position: fixed;
top: 0;
right: 0;
width: 35%;
height: 100vh;
padding: 73px 0;
background-color: #4d5269;
z-index: 20;
transform: translateX(100%);
transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 0 4px #333;
}
.nav.nav-close{
transform: translateX(100%);
}
（HTML）
<ul class="nav"> <li class="nav-list"><a href="#menu1" class="close">Service</a></li> <li class="nav-list"><a href="#menu2" class="close">Works</a></li> <li class="nav-list"><a href="#menu3" class="close">Skills</a></li> <li class="nav-list"><a href="#menu4" class="close">Profile</a></li> <li class="nav-list"><a href="#menu5" class="close">Q&A</a></li> <li class="nav-list"><a href="#menu6" class="close">Contact</a></li> </ul>
回答1件
0
toggle()は切替をするのでadd()とremove()の二つを使う必要は無いですよ？
かなりコードが足らないような気がしますが…
通常時のnavにtransform: translateX(100%);がついていてこれで閉じてますよね？（画面外）
css
1.nav.nav-close{ 2 transform: translateX(100%); 3}
.nav-closeを付与した後も同じtransform: translateX(100%);なので閉じたままになりますよね？
.nav-closeを外しても通常時に戻るだけなのでやはり閉じたままですよね？
ご提示されているコードだとたぶん誰も答えられないかと…
.nav-openを付与してtransform: translateX(0%);とすると、
classがついているときは開いている。※100%→0％（画面内）
クリックして切り替えると.nav-openが外れてtransform: translateX(100%);が効き画面外へ。
※0%→100％
こんな感じでしょうか。
足らないコードを補って試してみましたが動きました。
以下サンプルです。
参考になりますでしょうか。
sample
1<style media="screen"> 2 .nav{ 3 position: fixed; 4 top: 0; 5 right: 0; 6 width: 35%; 7 height: 100vh; 8 padding: 73px 0; 9 background-color: #4d5269; 10 z-index: 20; 11 transform: translateX(100%); 12 transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 13 box-shadow: 0 0 4px #333; 14 } 15 16 .nav.nav-close{ 17 transform: translateX(0%); 18 } 19</style> 20 21<button type="button" name="button" onclick="eventRemove();">maru</button> 22<ul class="nav"> 23<li class="nav-list"><a href="#menu1" class="close">Service</a></li> 24<li class="nav-list"><a href="#menu2" class="close">Works</a></li> 25<li class="nav-list"><a href="#menu3" class="close">Skills</a></li> 26<li class="nav-list"><a href="#menu4" class="close">Profile</a></li> 27<li class="nav-list"><a href="#menu5" class="close">Q&A</a></li> 28<li class="nav-list"><a href="#menu6" class="close">Contact</a></li> 29</ul> 30 31<script type="text/javascript"> 32 function eventRemove (){ 33 document.getElementsByClassName('nav')[0].classList.toggle('nav-close'); 34 } 35 36 if (matchMedia('only screen and (max-width:780px').matches){ 37 for (let i = 0; i < closeBtn.length; i++){ 38 closeBtn[i].addEventListener('click', eventRemove); 39 } 40 } 41</script>
投稿2021/02/23 16:32
編集2021/02/23 16:34
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
