Meny transiton

jag försöker få det så att om man klickar på menyn på en telefon så får man upp en slide med en massa länkar som ex. Contact osv vet någon vad som kan vara felet har följt en video på Youtube och för han funkar det.  

Youtube länken: https://www.youtube.com/watch?v=oYRda7UtuhA vid ungefär 30 min 

här är koden

HTML ( javaScript) Scripten:

<script>

var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}

</script>

CSS:

 

.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width:200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;