Membuat Announcement Bar Dengan Header Sticky

Hallo Sahabat ilmuwan-muda.my.id, kali ini saya akan membagikan tips & tricks seputar website, yuk langsung baca artikel berikut ini.

Announcement bar dan header sticky adalah dua fitur yang sering digunakan pada website untuk memperkenalkan suatu informasi penting atau memperbaiki pengalaman pengguna. Dalam artikel ini, saya akan membahas tentang bagaimana cara membuat announcement bar dengan header sticky pada website.

gambar: script

Pertama, mari kita bahas tentang apa itu announcement bar dan header sticky. Announcement bar adalah sebuah area pada website yang berada di atas header atau di bawah navigasi utama yang bertujuan untuk menampilkan pesan atau informasi penting kepada pengguna. Sedangkan header sticky adalah header yang tetap menempel di bagian atas layar ketika pengguna menggulir halaman website.

Untuk membuat announcement bar dengan header sticky, langkah pertama yang harus dilakukan adalah menentukan pesan atau informasi penting yang ingin ditampilkan. Pesan atau informasi ini harus singkat, jelas, dan mudah dipahami oleh pengguna.

Setelah menentukan pesan atau informasi, langkah selanjutnya adalah menambahkan kode HTML untuk membuat announcement bar dan header sticky. Berikut adalah contoh kode HTML yang dapat digunakan:

<div class="announcement-bar"> <div class="container"> <p>Ini adalah pesan atau informasi penting</p> </div> </div> <header class="header-sticky"> <div class="container"> <h1>Ini adalah judul website</h1> <nav> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </nav> </div> </header>

Kode HTML di atas terdiri dari dua bagian, yaitu announcement bar dan header sticky. Announcement bar memiliki kelas CSS "announcement-bar" yang berguna untuk memformat tampilan bar. Sedangkan header sticky memiliki kelas CSS "header-sticky" yang membuat header tetap menempel di bagian atas layar saat pengguna menggulir halaman website.

Setelah menambahkan kode HTML, langkah selanjutnya adalah menambahkan kode CSS untuk memformat tampilan announcement bar dan header sticky. Berikut adalah contoh kode CSS yang dapat digunakan:

.announcement-bar { background-color: #F8D7DA; color: #721C24; padding: 10px; text-align: center; } .header-sticky { background-color: #FFFFFF; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 999; } .container { max-width: 1200px; margin: 0 auto; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 10px; } nav ul li a { color: #333333; text-decoration: none; }

Kode CSS di atas terdiri dari beberapa properti yang berguna untuk memformat tampilan announcement bar dan header sticky. Properti "background-color" dan "color" digunakan untuk mengatur warna latar belakang dan teks pada announcement bar. Sedangkan properti "position" dan "top" digunakan untuk membuat header tetap menempel di bagian atas layar, sedangkan properti "z-index" digunakan untuk mengatur kedalaman lapisan elemen HTML sehingga header tetap terlihat di atas elemen lain.

Selain properti tersebut, terdapat juga beberapa properti lainnya yang digunakan untuk memformat tampilan seperti "padding" dan "margin" untuk memberikan jarak antar elemen, serta "box-shadow" untuk memberikan efek bayangan pada header.

Setelah menambahkan kode CSS, announcement bar dengan header sticky sudah siap untuk digunakan pada website. Namun, agar lebih optimal, kita bisa menambahkan beberapa fitur tambahan seperti membuat announcement bar dan header sticky responsif sehingga tampilan tetap baik pada berbagai ukuran layar, serta menambahkan efek animasi untuk memberikan kesan yang lebih menarik.

Untuk membuat announcement bar dan header sticky responsif, kita bisa menambahkan media query pada kode CSS yang digunakan. Media query berguna untuk menentukan aturan tampilan yang berbeda pada berbagai ukuran layar. Berikut adalah contoh kode CSS media query yang dapat digunakan:

@media (max-width: 768px) { .container { padding: 0; } nav { display: none; } .header-sticky { height: 60px; } .header-sticky h1 { font-size: 24px; } .announcement-bar { display: none; } }

Kode CSS media query di atas digunakan untuk mengatur tampilan pada ukuran layar kurang dari atau sama dengan 768 piksel. Pada ukuran layar ini, navigasi diubah menjadi tersembunyi dan tinggi header diatur ulang menjadi 60 piksel. Selain itu, announcement bar juga diubah menjadi tersembunyi dan ukuran font pada judul header diatur ulang menjadi 24 piksel.

Untuk menambahkan efek animasi pada announcement bar dan header sticky, kita bisa menggunakan CSS animation. Berikut adalah contoh kode CSS animation yang dapat digunakan:

@keyframes slideIn { from { transform: translateY(-100%); } to { transform: translateY(0%); } } .announcement-bar { animation: slideIn 0.5s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .header-sticky { animation: fadeIn 0.5s forwards; }

Kode CSS animation di atas digunakan untuk memberikan efek slide in pada announcement bar dan efek fade in pada header sticky. Efek animasi ini akan memberikan kesan yang lebih menarik dan membuat pengguna lebih tertarik untuk melihat pesan atau informasi yang ditampilkan pada announcement bar.

Dengan demikian, itulah cara membuat announcement bar dengan header sticky pada website. Dengan menggunakan fitur-fitur ini, website akan terlihat lebih menarik dan pengguna akan lebih mudah mendapatkan informasi penting yang ditampilkan pada announcement bar.