SOURCE CODE:
HTML CODE:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Side Navbar</title> </head> <body> <nav> <input type="checkbox" name="open" id="open"> <label for="open" class="open"> <i class="fas fa-bars"></i> </label> <div class="menu"> <div class="logo"> <a href="#"> <img src="logo.png" alt=""> </a> </div> <ul> <li> <a href="#"> <span><i class="fas fa-home"></i></span> Home </a> </li> <li> <a href="#"> <span><i class="fas fa-address-card"></i></span> About </a> </li> <li> <a href="#"> <span><i class="fas fa-cog"></i></span> Settings </a> </li> <li> <a href="#"> <span><i class="fas fa-address-book"></i></span> Contact </a> </li> <li> <a href="#"> <span><i class="fas fa-comments-alt-dollar"></i></span> Feedback </a> </li> </ul> </div> </nav> </body> </html>
CSS CODE:
*{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body{ overflow: hidden; font-family: sans-serif; background-color: #387b6a; height: 100vh; } .menu{ height: 100%; position: fixed; left: 0; top: 0; width: 250px; padding-top: 60px; background-color: #212121; transition: 0.5s; transform: translateX(-250px); } .logo a{ padding: 15px 25px; font-size: 40px; text-transform: uppercase; color: white; /*margin-left: 5px*/ } .logo a img{ max-width:140px; border-radius: 50%; margin-bottom: 10px; } ul li{ border-bottom: 1px solid rgba(255, 255, 255, 0.10); transition: 0.3s; /*text-align: center;*/ padding-left: 25px; } ul li:hover{ padding-left: 35px; background-color: #445665; } ul li a{ display: block; color: #fff; padding: 20px; text-transform: uppercase; font-weight: bold; } #open{ display: none; } .open{ height: 80px width: 80px; /*position: absolute;*/ /*background-color: #000;*/ } .open i{ font-size: 25px; cursor: pointer; margin-left: 25px; margin-top: 25px; background-color: #000; padding: 15px 15px; color: white; z-index: 99; } #open:checked ~ .menu{ transition: 0.5s; transform: translateX(0); } #open:checked ~ .open i{ transition: 0.5s; margin-left: 190px; position: absolute; }
Find Me On:
Facebook
Youtube
Github
Top comments (1)
Great work dude 🔥🔥