Tutorial membuat sidebar dengan HTML dan CSS
Ditulis oleh Mangandaralam Sakti 19 oktober 2022
Hallo semua!!
Pada blog kali ini, saya akan memberikan Tutorial cara membuat Menu side bar pada HTML dan CSS
Langkah langkah :
1. Siapkan code editor bebas apa saja, disini saya menggunakan Visual Studio code.
2. Buat folder baru dan isi dengan file index.html dan style.css
3. Lalu masukan Source code berikut :
index.html
<!DOCTYPE html>
<html>
<head>
<title>membuat sidebar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>See detail</header>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.sidebar {
position: fixed;
left: 0px;
width: 250px;
height: 100%;
background-color: #000000;
transition: all .5s ease;
}
.sidebar header {
font-size: 25px;
line-height: 50px;
padding: 10px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
color: white;
background-image: linear-gradient(to right, #b91531, #37b657);
}
.sidebar ul a {
display: block;
height: 100%;
width: 100%;
font-size: 20px;
padding-left: 20px;
line-height: 70px;
color:#BBBCBD;
box-sizing: border-box;
border-bottom: 1.5px solid rgb(101, 101, 102);
border-top: 1px solid rgba(182, 22, 22, 0.1);
transition: .4s;
}
ul a:hover {
padding-left: 5px;
}
.sidebar ul a i {
margin-right: 16px;
}
#check {
display: none;
}
label #btn,label #cancel {
position: absolute;
border-radius: 3px;
cursor: pointer;
}
label #btn {
left: 250px;
top: 20px;
font-size: 25px;
color: #BBBCBD;
padding: 6px 12px;
opacity: 0;
pointer-events: none;
transition: all .5s;
}
label #cancel{
z-index: 1111;
left: 195px;
top: 17px;
font-size: 30px;
color: #BBBCBD;
padding: 4px 9px;
transition: all .5s ease;
}
#check:checked ~ .sidebar {
left: -250px;
}
#check:checked ~ label #btn {
left: 5px;
opacity: 1;
pointer-events: auto;
}
#check:checked ~ label #cancel {
left: -195px;
}
#check:checked ~ section {
margin-left: 0px;
}
Hasil :
Ini tampilan jika tombol sidebar belum di klik.
Jika tombol tersebut di klik maka tampilannya akan seperti ini :
Untuk lebih jelasnya lihat pada codingan di bawah:
Baiklah sekian tutorial kali ini, kalian bisa memodifikasi tampilan sidebar tersebut sesuai keinginan kalian, selamat mencoba!
Komentar
Posting Komentar