Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS

Hallo teman-teman Dumet School. Kembali lagi dengan saya di Kursus Web Design tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang cara Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS. Sebelumnya saya akan menjelaskan sedikit tentang property position pada css.

Property position pada css berfungsi untuk mengatur posisi pada sebuah elemen atau objek. Dimana nilai dari position ada 5, yaitu:

Relative berfungsi membuat suatu elemen dengan posisi relative terhadap posisi normalnya. Dan Menjadikan suatu objek sebagai induk terhadap posisi absolute.
Static berfungsi membuat suatu elemen dengan posisi sesuai dengan aliran normal halaman.
Fixed berfungsi membuat suatu elemen dengan diposisikan relatif terhadap area pandang, yang berarti selalu berada di tempat yang sama meskipun halaman di scroll.
Stiky berfungsi membuat suatu elemen lengket akan beralih antara relatif dan tetap, tergantung pada posisi gulir. Ini diposisikan relatif sampai posisi offset tertentu terpenuhi di area pandang – lalu “menempel” pada tempatnya (seperti posisi: tetap).
Absolute berfungsi membuat suatu elemen yang diposisikan mengikuti elemen dengan posisi relative.

Oke teman-teman, untuk Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS kita buat struktur htmlnya terlebih dahulu ya. Berikut scriptnya ya teman-teman.

<!DOCTYPE html>
<html>
<head> 
  	<title>Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS</title>
</head>
<body>
  <div class="sidenav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#clients">Clients</a>
    <a href="#contact">Contact</a>
  </div>

  <div class="main">
    <h2>Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS</h2>
    <p>Ini Sidebar dengan full height dan posisi tetap</p>
    <p>Jika di scroll ke bawah akan tetap terlihat sidebarnya</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>     
</body>
</html>

Nah Jika sudah selesai kita masuk ke css. Berikut scriptnya ya teman-teman.

<style>  
    body {
        font-family: "Lato", sans-serif;
    }

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

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

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

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

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

Nah jika sudah selesai maka teman-teman bisa buka di browser masing-masing. Tampilannya akan seperti pada gambar di bawah ini. Jika teman-teman scroll maka sidebarnya akan pada posisi tetap.

Demikian Artikel tentang cara Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS. Semoga bermanfaat dan selamt mencoba ya teman-teman.

Membuat Posisi Fixed Pada Sidebar Full Height Menggunakan CSS

Kategori