Pembuatan bottom navbar sangat mudah untuk kamu ikuti disini, pastikan kamu mengikuti artikel ini sampai akhir. Show Oh iya, navbar bottom yang saya buat sudah responsive untuk semua device. Sebelumnya, saya sudah membagikan cara membuat navbar responsive dengan html,css dan javascript. Kali ini, saya akan membuat navbar bottom dengan html dan css. Penggunaan bottom navbar memang sedang trend untuk design website modern terutama untuk versi mobilenya. Agar kamu bisa mengikuti trend design saat ini, pembuatan bottom navbar ini wajib kamu ikuti. Memang tampilan bottom navbar yang saya buat biasa - biasa saja. Namun, saya fokus ke cara pembuatan bottom navbar yang responsive. Daripada penasaran, langsung aja kuy masuk ke pembuatan bottom navbar dengan html dan css versi infokuy. Persiapan Untuk Membuat Bottom NavbarSebelum mulai membuat bottom navbarnya, ada beberapa persiapan yang harus kamu lakukan, diantaranya berikut ini :
Jika semua persiapan sudah dilakukan, kamu bisa mengikuti langkah selanjutnya. Baca Juga : Cara Membuat Form Login Menarik Dengan HTML & CSS Cara Membuat Bottom NavbarSudah siap ? Kamu bisa mengikuti pembuatan bottom navbar responsive dibawah ini, saya pastikan pembuatan bottom navbar ini sangat mudah untuk kamu ikuti. Langsung aja kuy, ikuti pembuatan bottom navbar dibawah ini. Deklarasikan Tag HTMLSetelah kamu menyiapkan semua keperluan untuk membuat bottom navbarnya, silahkan deklarasikan tag HTML dengan menekan tombol ! kemudian tekan tombol TAB. Untuk lebih jelasnya, bisa kamu lihat gambar dibawah ini. Cara ini bisa kamu lakukan ketika kamu sudah menginstall package Emmet di Sublime Text dan Extensions Elm Emmet di Visual Studio Code. Untuk text editor lainnya, kamu bisa mencari cara untuk menggunakan plugin Emmet. Baca Juga : Cara Membuat Card Responsive Dengan HTML & CSS Koneksikan File CSSSetelah berhasil membuat Tag HTML secara otomatis, langkah selanjutnya kamu bisa menghubungkan file CSS ke file index.html. Saya sendiri membuat file cssnya dengan nama style.css. Kemudian tuliskan tag <link rel="stylesheet" href="style.css"> atau menyesuikan dengan nama file css kamu dibagian hrefnya. Pastikan kamu menyimpan file koneksi css tersebut di dalam tag <head>. Baca Juga : Cara Membuat Web Responsive Dengan HTML dan CSS Buat Kerangka Bottom NavbarSetelah semua file terhubung, langkah selanjutnya kamu bisa membuat kerangka bottom navbar. Silahkan copy tag html dibawah ini dan simpan di dalam tag <body>.
Baca Juga : 10 Hosting Web Statis Terbaik dan Gratis 2022 Menambahkan Styling Untuk Bottom NavbarAgar tampilan bottom navbarnya terlihat lebih bagus dan responsive, kamu bisa menambahkan styling untuk bottom navbar. Design bottom navbar saya memang terlihat simple, saya sengaja membuat bottom navbar yang simple dan fokus ke pembuatan bottom navbarnya saja.
Baca Juga : Cara Hosting Ke Netlify, Gak Pake Lama Lihat HasilnyaSetelah berhasil menambahkan styling untuk bottom navbarnya, kamu bisa melihat hasil bottom navbarnya. Berikut tampilan bottom navbar yang saya buat sebelumnya. Versi DesktopVersi Mobile PenutupBerikut pembahasan mengenai cara membuat bottom navbar dengan html dan css versi infokuy. Bagaimana menurut kamu artikel mengenai bottom navbar diatas, apakah mudah untuk kamu ikuti ? Silahkan berikan tanggapannya di kolom komentar jika kamu kurang mengerti. |