Skip to content

CSS Side Menu


<!DOCTYPE html>
     <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="">
    <nav class="side-menu">
            <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>



    font-size: 1em;
    background: url(;
    background-repeat: no-repeat;
    font-family: tahoma
    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{
    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;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: