Ada beberapa header web yang pernah saya buat, kali ini header HTML paling keren yang berhasil saya buat, setidaknya menurut selera pribadi. Desain header HTML ini termasuk yang sangat saya idam-idamkan. Selain desain yang simple dan sangat fungsional sekali di tampilan mobile view, menu horizontal scroll. Model header HTML keren dengan menu scroll di samping logo ini sekarang banyak di implementasi oleh web-web populer. Dalam satu balok header diisi tiga item, icon burger, logo dan jejeran nav menu. Hasil akhir tampilan di desktop seperti biasa saja dan sangat umum sekali, sebelah kiri logo dan sebelah kanan jejeran beberapa menu wajib. Begitu di tampilan layar smartphone, menu ini tidak tidak berubah posisi apalagi tersembunyi di icon burger. Contohnya seperti menu website InsertApps.com. Responsive menu navigation scroll tetap berada di samping kanan logo, headernya tidak berantakan, menu-menunya bisa digeser kiri dan kanan, istilah kerennya navbar scrolling. Tutorial singkat ini dibuat dengan bantuan CSSS framework Basscss. Berikut cara membuat header HTML dengan menu scroll paling keren ini:
Secara keseluruhan, style CSS yang digunakan semuanya sudah tersedia secara lengkap bawaan CSS Framework Basscss. Hanya sedikit saja penambahan kode CSS tambahannya. Berikut kode CSS tambahan yang tidak tersedia dalam framework Basscss:
Berikut penjelasan kode HTML dan CSS:
Tag Baris kode Style CSS dari class 0 akan merender satu baris balok di bagian atas layar, mulai dari kiri hingga full ke sisi kanan layar.Class 1 adalah CSS style dari 2 akan menghasilkan balok header berwarna biru.Class 3 adalah CSS style dari 4 berfungsi untuk menambah spasi 1rem (16 pixel) di dalam ruang balok header.
Baris kode 5 untuk membungkus isi dari item-item header (icon, logo dan jejeran item navbar menu).Bungkusan tersebut diberi style 6 yang berfungsi untuk menghasilkan display flexible layout (flexbox). Dengan fitur flexbox ini, desain layout HTML jadi lebih mudah dan sintak kodenya yang dihasilkan jadi lebih sederhana.Class 7 adalah style CSS dari 8 yang akan memposisikan isi dalam balok ini akan berada di tengah secara vertical.Berikutnya…
Baris kode 9 sampai pada 0 div penutup adalah item pertama yang berisi icon burger menu.Kode 1 ini boleh dipakai atau tidak tidak apa. Pada kasus ini, tujuan dari 1 kode variabel penanda pada javascript untuk fungsi mengaktifkan side menu. Icon burger ini juga di insert style css tambahan 3 untuk efek ganti pointer mouse menjadi pointer icon tangan.Sintak class 4 style CSS dari 5 untuk menambah jarak ke item berikut di sebelah icon burger.Tiga baris 6 yang diulang sebanyak tiga kali untuk mencetak tiga baris icon burger. Hasil dari tiga baris yang berjejer tersebut dihasilkan berdasarkan kode style CSS 7.Kode berikutnya…
Baris kode 8 hingga div penutup 0 adalah item kedua untuk menampilkan logo brand website, baik itu logo grafik maupun title text. Item kedua ini masih disebelah kiri.Sintak 0 adalah tag heading untuk mencetak title atau logo.Penambahan 1 untuk mereset margin heading ke nilai 0, sehingga posisi logo fix ditengah-tengah balok header. Biasanya margin bawah tag H1 mempengaruhi tata letak web sedikit kurang rapi.Sedangkan 2 untuk menghasil title logo berwarna putih, dan dekorasi efek hover teks link default browser di nonaktifkan.Kode berikutnya…
Baris kode 3 hingga tag div penutup 0 adalah pembungkus item ketiga navbar yang akan berisi jejeran menu.Di bagian 5 ini adalah class CSS tambahan yang tidak ada dalam CSS framework Basscss. Class 5 berisi style CSS 7.Kode CSS 8 akan memposisikan blok pembungkus item ketiga navbar jejer di sisi kanan layar. Style 9 memberi efek auto scroll secara sumbu x bila blok navbar. Style 0 menyembunyikan efek scrol secara sumbu y.Baris kode dari…
Adalah untuk menampung item-item menu secara listing. Kode dari 1 adalah style reset dari class dari framework Basscss yang akan menghilangkan item bullet listing, margin ke posisi 0. Ukuran huruf sebesar 12 pixel diambil dari class 2.Dan class 3 untuk memaksakan isi dari blok pembukus item navbar bersifat berjejeran.Baris kode listing 4 dan seterusnya, di-insert class-class dari framerwork Basscsss.Secar default, tag 5 akan menciptakan listing secara berurutan ke bawah. Untuk memaksa berurutan menyamping di tambah 6 untuk meratakan listing secara horizontal dengan jarak margin ke kanan 2rem 7.Terakhir, tag 8 untuk mencetak item-item menu dengan fungsi text link. Class 9 adalah class bawaan framework Basscss untuk warna text putih, dan efek teks dekorasi hover link secara default browser di nonaktifkan.Demikian akhir dari tutorial singkat ini, walau penjelasannya lumayan panjang. Namun kode yang dihasilkan lumayan pendek–bahkan masih bisa disederhanakan lagi–untuk hasil akhir yang cukup keren. Hasil akhir demo dari tutorial singkat coding header HTML keren dengan navbar menu auto scroll pada layar smartphone ini adalah header website InsertApps itu sendiri. Bila ada yang kurang jelas, jangan sungkan untuk bertanya di kolom komentar dibawah posting ini. Saya dengan senang hati akan menjawabnya. Untuk mengikuti tutorial coding dasar HTML dan CSS silahkan daftar email di kolom Newsletter di bagian footer dan ikuti sosial media InsertApps untuk mendapatkan notifikasi update tutorial. |