CSS

Cara membuat Fixed Sidebar CSS + HTML

Untuk merubah suatu data yang berupa tulisan atau gambar pada suatu website bersekala besar, biasanya pemilik suatu website menggunakan CMS (Content management system) untuk mempermudah memperbaharui isi dari website mereka.

Didalam CMS tersebut sudah pasti berisi banyak halaman yang harus di perbaharui dan kolom yang harus di isi. Untuk mempermudah pemilik website untuk memlilih halaman dan kolom, kali ini kita akan membuatkan fixed sidebar (sidebar posisi tetap) dengan CSS dan HTML sederhana.

Langkah 1 – Tambahkan HTML

<!-- sidebar -->
<div class="sidenav">
  <a href="#">Tentang</a>
  <a href="#">Pelayanan</a>
  <a href="#">Pelanggan</a>
  <a href="#">Kontak</a>
</div>

<!-- kontent -->
<div class="main">
  ...
</div>

Langkah 2 – Tambahkan CSS

/* sidebar menu */.sidenav {
  height: 100%; /* tinggi penuh menyesuaikan dengan layar device */  width: 160px; /* lebar sidebar */  position: fixed; /* posisi tetap ketika halaman di scroll */  z-index: 1; /* posisi paling atas dari semua konten */  top: 0; /* posisi paling atas pada layar device */  left: 0;
  background-color: #111;
  overflow-x: hidden; /* tidak bisa scroll kesamping */  padding-top: 20px;
}

/* link sidebar */.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* link sidebar berubah warna ketika mouse melewati text */.sidenav a:hover {
  color: #f1f1f1;
}

/* halaman kiri sidebar */.main {
  margin-left: 160px; /* lebar sama dengan sidebar */  padding: 0px 10px;
}

/* merubah jarak dan ukuran tulisan ketika tinggi layar kurang dari 450px */@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Berikut adalah hasilnya

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px;
  font-size: 28px;
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">
  <a href="#">Tentang</a>
  <a href="#">Pelayanan</a>
  <a href="#">Pelanggan</a>
  <a href="#">Kontak</a>
</div>

<div class="main">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices lorem viverra, pulvinar elit in, feugiat mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis blandit tellus mauris. Aenean ullamcorper tortor tempus justo fringilla, sed maximus purus fermentum. Donec nec neque quis enim elementum facilisis. Morbi tincidunt mauris eu tortor pulvinar commodo. Nunc erat metus, elementum id luctus et, placerat a ligula. Vivamus non efficitur massa. Sed fringilla dictum turpis, et varius nulla elementum id. Integer eget elit dapibus, placerat libero nec, viverra enim. Nullam sed elit in purus dignissim pretium in tempor dolor. Aenean nec suscipit felis.</p>
  <p>Donec finibus bibendum orci quis facilisis. Proin sit amet ullamcorper augue. Duis pharetra urna sed tellus suscipit suscipit. Nullam in odio dictum, placerat justo eu, interdum velit. Sed nec mollis magna. Aliquam dolor dui, mattis volutpat tincidunt ac, sodales in erat. Praesent porttitor blandit mi, id euismod tortor pretium vitae. Proin at porttitor ex, id venenatis enim. Aenean pretium massa ex, eu elementum ligula molestie sed.</p>
  <p>Curabitur commodo mi erat, a finibus nunc sollicitudin ut. Phasellus egestas ipsum non libero scelerisque cursus. Aenean nec accumsan lacus. Fusce mattis accumsan odio nec eleifend. Mauris lobortis leo ut volutpat malesuada. Quisque tempor velit ut molestie maximus. Vestibulum ullamcorper auctor lacinia. Aliquam condimentum vehicula efficitur. Cras auctor tellus felis, sit amet vestibulum diam finibus eu. Curabitur ultricies sollicitudin ultricies. Proin urna mauris, porttitor sit amet feugiat non, gravida at metus. Mauris tempus faucibus purus sit amet tempor. Cras condimentum arcu mauris, eu tempor justo laoreet vel. Nam eget magna ipsum.</p>
  <p>Mauris dapibus ex eu venenatis porta. Cras tempus ante et lectus ullamcorper condimentum. Quisque finibus accumsan placerat. Nam vel purus ac nunc tincidunt condimentum. Mauris nec purus convallis, convallis augue mollis, dictum augue. Etiam nulla ante, faucibus id purus euismod, vehicula tincidunt ante. Phasellus eu est arcu. Proin elementum sed justo id suscipit. Cras vulputate purus velit, consequat bibendum odio ultrices id.</p>
  <p>Cras laoreet interdum massa, eget pretium nisl bibendum a. Mauris facilisis hendrerit mi sed volutpat. Vestibulum efficitur sed ipsum nec convallis. Praesent porttitor quam eget molestie tincidunt. Duis interdum quam et posuere dignissim. Ut vestibulum tortor viverra nisl semper finibus gravida ut dolor. Nunc ornare augue eros, ut venenatis nulla placerat eu. Nunc a eros tempus, ultrices elit nec, sagittis mi. Donec scelerisque ullamcorper commodo. Curabitur eget laoreet metus.</p>
  <p>Mauris dapibus ex eu venenatis porta. Cras tempus ante et lectus ullamcorper condimentum. Quisque finibus accumsan placerat. Nam vel purus ac nunc tincidunt condimentum. Mauris nec purus convallis, convallis augue mollis, dictum augue. Etiam nulla ante, faucibus id purus euismod, vehicula tincidunt ante. Phasellus eu est arcu. Proin elementum sed justo id suscipit. Cras vulputate purus velit, consequat bibendum odio ultrices id.</p>
</div>
   
</body>
</html>

Sekian materi kita untuk kali ini. Sampai ketemu di materi berikutnya.


Angga Rista

Share
Tags: CSSSidebar