How to run a js function when clicking the button/link?

Good afternoon.

Make sliding menu with animation css. Js function changes the style of the block that shows it. Want on button click/link menu is opened (the function was executing), and after second click closed, also change styles.
So far, only block when you click on the link blinks - appears and disappears. Need, I understand something of html. Reverse animation added. Point me in the right direction.

Js just beginning to get acquainted, so Google difficult.

Code
the <body>

 <a onclick="openMenu()" href=""> Menu</a>
 <div id='menu' class="menu slide-in-left">
<nav>
 <a href="">menu 1</a>
 <a href="">menu 2</a>
</nav>
 </div> 
 <script src="script.js"></script> 
</body>


function openMenu() {
 let menu = document.getElementById('menu');
 menu.style.display = 'block';
}


.menu {
 display: flex;
 width: 200px;
 height: 500px;
 border: solid red;
}

#menu {
 display: none;
}
.slide-in-left {
 -webkit-animation: slide-in-left 1.2 s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1 s ;
 animation: slide-in-left 1.2 s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1 s ;
}

@-webkit-keyframes slide-in-left {
 0% {
 -webkit-transform: translateX(-1000px);
 transform: translateX(-1000px);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}
}
@keyframes slide-in-left {
 0% {
 -webkit-transform: translateX(-1000px);
 transform: translateX(-1000px);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}
}
April 7th 20 at 10:43
1 answer
April 7th 20 at 10:45
Solution
He flashes You that reloads the page and restarts it as the links have a "href" attribute when the href="" - link leads to the same page where the browser is now.

Animation there probably is not needed, sufficient "transition", will look like this:


PS the Idea I think You understand, then it can be developed by yourself :)

Find more questions by tags JavaScriptHTML