Animasi Navigasi Bootstrap
Tutorial bootstrap kali ini adalah Animasi Navigasi Bootstrap dengan memperlihatkan efek ketika layar halaman di scroll ke bawah dan menampilkan menu atas tampil kembali dengan sedikit kode.
Twitter Bootstrap
Twitter Bootstrap adalah framework untuk web design yang memiliki komponen dalam tampilan menu tetap di atas atau fixed on top.
Apabila halaman website yang melebihi tinggi layar / overflow maka menu tersebut akan tetap di atas apabila kita scroll layar kebawah. Tidak ada animasi untuk navigasi tersebut, hanya tampilan yang kurang menarik dan tentunya statis.
Tambah Animasi Bootstrap
Tutorial kali ini akan sedikit tambah animasi agar bisa terlihat bagus. Tentunya perlu cara untuk menjadikan menu tersebut dengan bantuan Animate.css dan jQuery.
Bootstrap Menggunakan Animate.css dan jQuery
Animate.css
Apa itu Animate.css ? untuk lebih jelasnya tentang animate.css bisa di lihat di halaman websitenya atau dengan mencari di Google untuk keterangan lebih lengkap.
jQuery
jQuery adalah Javascript Library yang saat ini banyak di gunakan untuk web design tampilan halaman website. Dengan slogannya “Write Less Do More”, di harapkan penulisan javascript akan lebih singkat dengan penggunaan jQuery.
Update: JQuery pada versi bootstrap 5 sudah tidak dijadikan lagi sebuah depedensi atau kebutuhan utama. Silahkan baca Cara Menggunakan Bootstrap 5 Untuk Membuat Website
Kode Animasi Navigasi pada Bootstrap
Untuk lebih jelasnya, silahkan pelajari kode html di bawah ini :
Selanjutnya, silahkan anda buat halaman HTML sederhana dengan menggunakan format contoh Navigation Fixed On Top. Simpan format dan rubah sesuai dengan yang anda inginkan.
Setelah itu, CSS Style bisa anda gunakan sesuai dengan kode yang tercantum di box CodePen. CSS Style menggunakan preprosessor SCSS, ubah ke dalam CSS jika anda kurang mengerti dengan SCSS.
JavaScript menggunakan format jQuery standar yang sering di gunakan, dan simpan pada bagian bawah halaman html sebelum body penutup agar proses loading tidak terlalu lama.
Pembahasan, Pertanyaan dan Jawaban silahkan layangkan pada kolom komentar di bawah.
Baca juga: Tutorial Bootstrap 5 Cara Menggunakan dalam Membuat Website
Kesimpulan
Tutorial animasi navigasi ini dibuat untuk dipelajari dan diharapkan bisa menjadi bahan referensi untuk lebih baik lagi.
Akhir kata, “Keep Explore”.
Dengan selalu kembangkan ilmu yang anda ketahui untuk lebih di perkaya lagi dan tentunya bisa anda bagikan kepada orang lain yang ingin belajar. Silahkan bagikan jika tutorial sederhana ini terasa bermanfaat bagi anda atau teman anda. 😉
