I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expected. I have attempted placing the animation in various sections of the ul and even tried adding a classlist without success. It's possible that I may be inserting the animation in the incorrect element, but I'm uncertain. You can view an example of the animation effect I desire for the links here: https://codepen.io/Fafnir/pen/mvVyRz. My primary focus is on achieving the FadeInRight animation rather than the underline link style.
var toggleStatus = 1;
if (toggleStatus == 1) {
document.getElementById("menu").style.left = "-5px";
//The Burger Menu icon is called toggleMenu
document.getElementById("toggleMenu").style.left = "200px";
toggleStatus = 0;
//This section will execute another function when clicked again, essentially toggling back to initial state.
} else if (toggleStatus == 0) {
document.getElementById("menu").style.left = "-245px";
document.getElementById("toggleMenu").style.left = "5px";
toggleStatus = 1
}
}* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
background-color: grey;
}
/*Utilizing position methods like left, right, top, and bottom to dictate the menu appearance direction.*/
#menu {
width: 240px;
background-color: orange;
position: fixed;
top: 0;
bottom: 0;
left:-250px;
z-index: 1000;
transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
border-right: 2px solid black;
width: 240px;
height:350px;
overflow:scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#menu::-webkit-scrollbar {
width: 0 !important
}
#menu img {
display: block;
width: 10%;
margin: 0 auto;
padding-top: 50px;
}
#menu ul {
padding-left: 30px;
padding-top: 35px;
}
#menu ul li {
list-style: none;
padding: 4px 0px;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
#menu ul li a {
font-family: Arial;
font-weight: 300;
color: #272727;
text-transform: uppercase;
}
#toggleMenu {
width: 20px;
height: 20px;
background-color: #fff;
background-image: url(https://static.thenounproject.com/png/195031-200.png);
background-size:cover;
position: fixed;
top: 0px;
left: 5px;
z-index: 1050;
cursor: pointer;
border: 10px solid #fff;
border-radius: 2px;
transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
}
#toggleMenu:hover {
opacity: 0.7;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="toggleMenu"></div>
<div id="menu">
<img src="https://cdn3.dualshockers.com/wp-content/uploads/2011/11/Master-Sword-and-Triforce.jpg">
<!--**MAYBE ADD A CLASS TO UL AND CHANGE NAV ID-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cases</a></li>
<li><a href="#">Personal projects</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>