Трансформация: TranslateY с Javascript

Question

Так что я знаю, что это очень легко для большинства людей здесь, но я учусь, и я действительно надеюсь, что кто-то может мне помочь;

Я создаю отзывчивый навигатор для своего веб-сайта, поэтому я хочу щелкнуть меню buttom, чтобы меню выпало из верхней части экрана. Итак, я сделал преобразование: translateY (-100%), но у меня есть функция, чтобы мое меню (классические 3 строки) превратилось в «X», так что я могу добавить к этой функции, чтобы одновременно создать меню появляется ?. И я не знаю, почему, но переход от 3-х горизонтальных линий к X работает хорошо, но от X до 3-х строк работает не так.

DOM

<div id="mobile_menu"> 
    <div class="mobile_menu_lines1"></div> 
    <div class="mobile_menu_lines2"></div> 
    <div class="mobile_menu_lines3"></div> 
    </div> 
    <nav id="mobile_nav"> 
     <ul id="mobile_links"> 
     <li><a href="">INICIO</a></li> 
     <li><a href="">PORTAFOLIO</a></li> 
     <li><a href="">NOSOTROS</a></li> 
     <li><a href="">CONTACTO</a></li> 
     </ul> 
     <ul id="mobile_links_social"> 
      <li><a href=""><img src="assets/img/svgs/facebook_icon.svg" alt="Facebook logo"/></a></li> 
      <li><a href=""><img src="assets/img/svgs/twitter_icon.svg" alt="Twitter Logo"/></a></li> 
      <li><a href=""><img src="assets/img/svgs/instagram_icon.svg" alt="Instagram logo"/></a></li> 
     </ul> 
    </nav> 

CSS

#mobile_menu{ 
    position: absolute; 
    display: block; 
    width: 50px; 
    height: 60px; 
    float: right; 
    right: 5px; 
    cursor: pointer; 
    transition: all 0.3s ease-in-out; 
    } 

    .mobile_menu_lines1{ 
    max-width: 70%; 
    align-items: center; 
    height: 2px; 
    background-color: white; 
    margin-top: 18px; 
    border-radius: 2px; 
    } 

    .mobile_menu_lines2, .mobile_menu_lines3{ 
    max-width: 70%; 
    align-items: center; 
    height: 2px; 
    background-color: white; 
    margin-top: 9px; 
    border-radius: 2px; 
    } 

    .show .mobile_menu_lines1 { 
    transform: rotate(45deg) translate(11px, 5px); 
    transition: all 0.3s ease-in-out; 
    } 

    .show .mobile_menu_lines2 { 
    opacity: 0; 
    transition: all 0.3s ease-in-out; 
    } 

    .show .mobile_menu_lines3 { 
    transform: rotate(-45deg) translate(10px, -5px); 
    transition: all 0.3s ease-in-out; 
    } 

    #mobile_nav{ 
    display: block; 
    text-align: center; 
    padding-top:60px; 
    background-color: rgba(0, 0, 0, 0.7); 
    width: 100%; 
    transform: translateY(-100%); 
    transition: all 0.3s ease-in-out; 
    } 

    #mobile_nav #mobile_links li{ 
    padding: 15px 0; 
    } 

    #mobile_nav #mobile_links li a{ 
    list-style: none; 
    text-decoration: none; 
    color: white; 
    font-family: "josefin sans"; 
    font-size: 12px; 
    letter-spacing: 7px; 
    align-items: center; 
    text-align: center; 
    padding: 15px 0; 
    width:600px; 
    max-width: 100% 
    } 

    #mobile_nav #mobile_links_social li{ 
    padding: 10px 20px; 
    } 

JS

var mobileNavMostrar = document.getElementById('mobile_menu'); 
mobileNavMostrar.addEventListener('click',function(){ 
    mobileNavMostrar.classList.toggle('show'); 
}) 

Спасибо заранее.

Answer 1

Я пробовал свой код, и я думаю, что вам не хватает двух вещей - css, чтобы определить, как mobile_nav должен измениться, когда он будет показан, и javascript, чтобы применить этот CSS.