Skip to content

CSS Side Menu

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;
}

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: