Skip to main content

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



Comments

Post a Comment