Pure CSS Hamburger Menu | Side Bar Menu

Video: 

Source Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="style.css">

    <title>Hamburger Menu</title>

</head>

<body>

    <input type="checkbox" name="" id="check">

    <label class="ham_menu" for="check">&#9776;</label>

    <div class="main">

        <label for="check">&times;</label>

        <h1>Menu</h1>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Service</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Contact</a></li>

            <li><a href="#">Sign Up</a></li>

        </ul>

    </div>

</body>

</html>

CSS

*{

    margin: 0;

    padding: 0;

    font-family: Century Gothic;

    box-sizing: border-box;

}

body{

    background: url("bg.jpg")no-repeat;

    background-size: cover;

}

#check{

    display: none;

}

#check:checked ~ .main{

    position: absolute;

    left: .1%;

    top: .1%;

}

.ham_menu{

    font-size: 30px;

    color: #ffffff;

    margin-left: 20px;

    line-height: 50px;

    cursor: pointer;

}

.main{

    width: 15%;

    background: #2c3e50;

    text-align: center;

    padding: 50px 20px;

    border-radius: 8px;

    position: absolute;

    left: -15%;

    top: .1%;

    transition: .3s;

}

.main h1{

    color: #ffffff;

    padding-bottom: 50px;

}

.main ul{

    list-style: none;

}

.main ul li {

    padding-bottom: 15px;

}

.main ul li a{

    text-decoration: none;

    color: #ffffff;

}

.main label{

    color: #ffffff;

    font-size: 30px;

    position: absolute;

    top: 2%;

    left: 80%;

    cursor: pointer;

}