HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="animation21.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<nav class="side-menu">
<ul>
<li><a href="#">What to do?<span><i class="fas fa-map-marker"></i></span></a></li>
<li><a href="#">Where to go?<span><i class="fas fa-compass"></i></span></a></li>
<li><a href="#">Services<span><i class="fas fa-bicycle"></i></span></a></li>
<li><a href="#">Accomodation<span><i class="fas fa-bed"></i></span></a></li>
<li><a href="#">Free Time<span><i class="fas fa-book"></i></span></a></li>
<li><a href="#">Food & Drink<span><i class="fas fa-beer"></i></span></a></li>
</ul>
</nav>
</body>
</html>
CSS CODE:
body{
font-size: 1em;
background: url(https://images.unsplash.com/photo-1511297968426-a869b61af3da?ixlib=rb-0.3.5&s=3193fd953f4249aa5b54dd98b246daba&auto=format&fit=crop&w=1050&q=80);
background-size:cover;
background-repeat: no-repeat;
font-family: tahoma
}
.side-menu{
width: 14em;
height: auto;
margin: 4em auto 0;
font-weight: 1em;
line-height: 2em;
color: white;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top: 0;
bottom: 0;
left: -10em;
}
.side-menu ul{
list-style: none;
margin: 0;
padding: 0;
}
.side-menu ul li{
display: block;
background-color: #333;
height: 2em;
padding: 1em 1.5em;
position: relative;
transition: transform .5s,background-color .5s, color .5s;
}
.side-menu ul li:nth-child(1){
background-color: #00aced;
}
.side-menu ul li:nth-child(2){
background-color: #3b5998;
}
.side-menu ul li:nth-child(3){
background-color: #00a300;
}
.side-menu ul li:nth-child(4){
background-color: #cb2027;
}
.side-menu ul li:nth-child(5){
background-color: #1e7145;
}
.side-menu ul li:nth-child(6){
background-color: #ffc40d;
}
.side-menu ul li:hover{
background:-color:#339966;
transform: translateX(10em);
}
.side-menu ul li a{
display: block;
color: #fff;
text-decoration: none;
}
.side-menu ul li span{
display: block;
position: absolute;
font-size: 1em;
line-height: 2em;
height: 2em;
top: 0;
bottom: 0;
margin: 0 auto;
padding: 1em 1.5em;
right: 0.1666667em;
color: #f8f6ff;
}
TrueCodes 
Leave a comment