Header Ads

Cara Membuat Layout Header Diam di Tempat (Fix Header)

AsDzuli April 09, 2020
Cara Membuat Layout Header Diam di Tempat (Fix Header)

Cara Membuat Layout Header Diam di Tempat (Fix Header)

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..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>Layout Fix Header</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<div id="wrapper">
    <div id="header">
        <a href="" class="title">Judul Website</a>
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</div>
</body>
</html>


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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{
margin:0px auto; /*supaya layer otomatis mengisi dan ke tengah*/
}
body{font-family:calibri, verdana, sans-serif;}
#wrapper{<br>width:100%;<br>}
#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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*TAMBAHAN POSITION RELATIVE UNTUK WRAPPER, CONTENT, DAN FOOTER*/<br>#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;
1
2
3
4
5
#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).
1
2
3
4
5
6
7
#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.


Buka juga :
Tags:
AsDzuli

Posted by: AsDzuli

Welcome to asdzuli.blogspot.com. ASDZULI is a blog that contains everything. This blog aims to share information that might be useful for you / us all. Because being useful is better than making use. I thank the visitors who have taken a moment to open and read this blog article.

Post a Comment

0 Comments