Dengan menggunakan Flexbox dan Media Query, kita sudah bisa membuat navigasi yang bersifat responsive. Sebagai contoh, bisa dilihat pada layar. Ini adalah navigasi yang hendak kita buat pada video ini. Apabila lebar browser kita perkecil, maka secara otomatis browser menyesuaikan jarak antar menu di dalam navigasi. Dan pada saat ukuran browser terlalu kecil, maka browser mengubah navigasi dari tadinya horizontal, menjadi vertikal. Sehingga navigasi tetap nyaman untuk dibaca walaupun pengunjung menggunakan device berukuran kecil.

Kita mulai coding dari nol ya. Saya sudah menyiapkan 2 buah file, yaitu portfolio.html dan portfolio.css. Keduanya masih berupa file kosong. Kita mulai coding dari HTML terlebih dahulu.

Pertama kita buat dahulu HTML Boilerplate. Kita beri judul Portfolio. Kemudian kita tambahkan tag link dan kita arahkan ke portfolio.css. Nantinya kode ini akan kita teruskan ke beberapa video kedepan, hingga menjadi satu halaman portfolio yang responsive. Namun di video ini kita akan fokus ke bagian navigasinya terlebih dahulu.

Kita masuk ke bagian body. Kita tambahkan tag nav dengan class Container. Lalu di dalamnya kita akan tambahkan unorder list yang isinya 5 buah item dengan link. Dengan menggunakan package emmet, maka kita bisa menuliskan ul>li>a. Artinya kita membuat tag ul yang di dalamnya ada tag li dan di dalamnya ada tag a. Kita bisa tekan Ctrl+E untuk melihat hasilnya.

Kita undo dulu. Berhubung kita ingin ada 5 buah item, maka kita tambahkan tanda kurung dari sebelum li hingga sesudah a. Setelah itu kita berikan *5. Kita tekan Ctrl+E, maka Emmet akan menuliskan kode HTML untuk kita. Kita tinggal mengisikan item yang kita mau, yaitu Skysen, Pendidikan, Pengalaman, Keahlian, dan Masuk/Daftar. Kita simpan dan refresh browser. Ini adalah hasil dari kode HTML kita sebelum kita atur CSS-nya.

Selanjutnya kita masuk ke kode CSS. Pertama kita masuk dahulu ke selector body. Kita berikan warna background-color dengan nilai silver. Kemudian kita tambahkan selector kelas container. Kita berikan width dengan nilai 95% dan background-color dengan nilai white. Kita berikan max-width dengan nilai 1000px, sehingga ukuran container kita tidak bisa lebih besar dari 1000 pixel. Dan agar container kita berada di tengah, maka kita tambahkan properti margin dengan nilai 0 auto.

Lalu kita tambahkan selector nav spasi li. Artinya kita memilih tag li yang berada di dalam tag nav. Kita beri properti display dengan nilai inline-block. Maka bullet-nya akan menghilang dan navigasi disusun menyamping.

Kita tambahkan lagi selector nav spasi ul. Artinya kita memilih tag ul yang berada di dalam tag nav. Kita berikan properti display dengan nilai flex. Dan kemudian kita tambahkan properti justify-content dengan nilai space-between. Nah sekarang semua item navigasi sudah menyebar. Perhatikan bahwa seharusnya tulisan Skysen nempel ke bagian kiri navigasi, namun ternyata masih ada sedikit jarak ya. Hal ini disebabkan karena secara default tag ul memiliki padding kiri. Kita ubah dengan cara menambahkan properti padding dengan nilai 0. Atau kalau kita ingin menambahkan sedikit jarak, maka kita bisa mengganti nilai padding dengan 10px. Kemudian kita besarkan ukuran font dengan menggunakan properti font-size dengan nilai 1.2rem.

Oke, navigasi kita sudah jadi untuk browser berukuran besar. Selanjutnya kita akan mengatur beberapa properti tampilan navigasi agar kelihatan lebih menarik. Pertama kita tambahkan dahulu selector nav a untuk memilih anchor tag di dalam tag nav. Kita berikan properti color dengan nilai blue. Kemudian kita hapus garis bawahnya dengan menambahkan properti text-decoration dengan nilai none.

Selanjutnya kita tambahkan lagi selector nav a:hover, untuk mengatur tampilan dari link pada saat kita meletakkan kursor di atas link tersebut. Kita berikan properti text-decoration dengan nilai underline. Jadi sekarang pada saat kita menaruh kursor diatas link, maka tulisan pada link akan diberikan garis bawah.

Lalu kita akan memberikan efek button pada tulisan Masuk/Daftar. Pertama kita ke kode HTML terlebih dahulu, pada anchor tag Masuk kita tambahkan class dengan nama button. Kita kembali ke CSS. Kita tambahkan selector .button. Pertama kita tambahkan dahulu border dengan nilai 1px solid grey. Agar kota menjadi lebih besar, maka kita bisa tambahkan padding dengan nilai 5px 10px. Kemudian kita ingin mengubah ujung kotak agar sedikit membulat, kita tambahkan properti border-radius dengan nilai 10px.

Dan yang terakhir, kita ingin agar pada saat kita mengarahkan kursor ke atas button, maka warnanya akan sedikit berubah. Kita tambahkan selector .button:hover, .button:focus. Kita berikan properti background-color: whitesmoke. Nah sekarang pada saat kita mengarahkan kursor ke atas tombol, maka warna tombol akan sedikit berubah ke abu-abu.

Sekarang perhatikan pada saat saya mengecilkan ukuran browser. Maka tulisan-tulisan pada navigasi akan menjadi mepet satu sama lain. Bahkan tombol Masuk berada diluar container. Untuk itu kita perlu menuliskan kode CSS tambahan, agar navigasi kita bisa merespon ukuran browser yang terlalu kecil. Caranya? Kita bisa menggunakan Media Query. Kita kembali ke kode CSS. Kita tambahkan kode @media(max-width:600px). Artinya semua kode CSS yang berada di dalam media ini, hanya dijalankan apabila ukuran browser lebih kecil atau sama dengan 600 pixel.

Di dalam media, kita tambahkan selector nav ul. Dan didalamnya kita tambahkan properti flex-direction: column. Kita simpan dan refresh browser. Sekarang perhatikan bahwa pada saat ukuran browser besar, maka navigasi disusun ke samping kanan. Sedangkan pada saat ukuran browser lebih kecil atau sama dengan 600 pixel, maka navigasi disusun ke bawah. Agar navigasi berada di tengah browser, kita bisa menambahkan properti align-items dengan nilai center.

Dan perhatikan tombol Masuk terlalu mepet dengan tulisan Keahlian. Kita mesti menambahkan jarak pada tombol Masuk dengan konten pada bagian atas maupun bawahnya. Untuk itu kita bisa menambahkan selector nav li:last-child untuk memilih item paling akhir dari navigasi. Kemudian kita tambahkan properti margin dengan nilai 10px 0. Dan bagian navigasi responsive kita pun sudah selesai.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.