Membuat Layout Header Diam di Tempat (Fix Header)

Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy

Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout ini cukup membantu pengguna mengakses menu navigasi dengan mudah tanpa harus scroll ke atas dulu. Kali ini saya akan share membuat layout ini dengan bantuan CSS.

Salam jagocoding,, kali ini saya mau share lagi sedikit tutorial mengenai layout fix header. Layout fix header ini cukup terkenal dipakai di beberapa website.. contoh yang paling simpelnya ya seperti Facebook. Biarpun kita scroll halaman website kita sampai kebawah sekalipun, header tetap diam di tempat dan membantu user mengklik navigasi didalamnya dengan lebih mudah. Kali ini kita akan belajar teknik pembuatannya. Untuk pertama-tama, kita mulai dulu dengan tag HTML dasar ya.. Layoutnya kita bagi jadi 3 bagian aja dulu, header, content, dan footer. Kalau mau ditambah sidebar juga bisa, tapi biar konsepnya mudah dicerna, saya pakai 3 bagian ini aja ya.. Yang cukup penting, biasakan bagian layout kita diletakkan di sebuah layer utama. Layer utama ini biasanya dinamakan container / wrapper. Tujuannya supaya website lebih terstruktur dan rapi saja.. Nah, seperti yang kita lihat di strukturnya, dimulai dari #wrapper, kemudian diisi #header,

#content, dan #footer. Langkah pertama di CSSnya, kita desain dulu tampilan seperti biasanya : *{ margin:0px auto; /*supaya layer otomatis mengisi dan ke tengah*/ } body{font-family:calibri, verdana, sans-serif;} #wrapper{ width:100%; } #header{ height:60px; background:#252525; } #header a.title{ color:#f0f0f0; font-weight:bold; text-decoration:none; font-size:30px; line-height:60px; /*supaya baris judul terlihat rapi, berikan nilai line-height yg sama dengan height #header.*/ padding:0px 20px; /*padding 20px di kiri dan kanan saja*/ } #content{ background:#eee; min-height:1500px; /*cuma supaya konten terlihat berisi. Kalau sudah diisi teks, baris ini harus dihapus.*/ margin:0px 20px; } #footer{ background:#000; height:40px; } Dari desain awal tadi, hasilnya masih seperti ini:

Sampai disini, desainnya sudah oke. Tinggal langkah terakhir membuat header diam diatas sekalipun kita scroll sampai ke bawah. Disini kita membutuhkan bantuan perintah "position" untuk mengatur posisi layout. Yang perlu diperhatikan disini adalah, semua layer utama yang tampil normal (#wrapper, #content, #footer) diberikan nilai position:relative; /*TAMBAHAN POSITION RELATIVE UNTUK WRAPPER, CONTENT, DAN FOOTER*/ #wrapper{ width:100%; position:relative; /*posisi disarankan*/ } ... ... #content{ position:relative; /*posisi disarankan*/ background:#eee; min-height:1500px; /*kalau website sudah selesai, baris ini dihapus*/ margin:0px 20px;

} #footer{ position:relative; /*posisi disarankan*/ background:#000; height:40px; } Setelah itu, #header yang akan tampil diam di atas diberikan nilai position:fixed; #header{ position:fixed; height:60px; background:#252525; } Hasilnya akan jadi seperti ini :

Sampai disini, header memang sudah benar diam diatas. akan tetapi mengubah position menjadi fixed, membuat lebarnya tidak jadi memenuhi layar seperti awal, dan tertutup konten yang ada di atasnya. Hal ini bisa diakali dengan perintah width:100%, dan z-index yang kita beri nilai angka bebas (lebih besar lebih baik). #header{ width:100%; /*supaya header memenuhi layar*/ z-index:1000; /*z-index dgn nilai besar berfungsi supaya header selalu tampil didepan*/ position:fixed; height:60px; background:#252525; }

Sekarang hasilnya sudah terlihat!

Demikian tutorial membuat layout fix header sederhana. Semoga berguna untuk kita semua. :)

Tentang Penulis Christian Rosandhy Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.