How to make animation when text is hidden on button click?

Question

css

In general, the essence is this ... there is a menu, but I would like it to appear when you click on the button and also disappear when you click it. how to do it.

The idea is that the text would fly under the logo and also appear from under it, i.e. the lines of the horizontal menu flew to the right (the menu appears), fly away to the left (the menu is hidden).

Answer 1

$(".класс кнопки").click(function(){
    $(".класс меню").toggleClass("visible");
})

.класс меню{
   overflow:hidden;
   width:0; 
   transition:all 0.2s ease;
}
.класс меню.visible{
   width:700px; //например   
}

example here
You can not change the width, but the position left / right, it all depends on your layout)

Answer 2

It is possible through jquery, with the help of toggleClass, to assign a class .visible {
//values ​​that you need
}