Kita buka lagi source code dari pelajaran sebelumnya. Pada video ini kita akan mempelajari mengenai properti position dengan nilai fixed, beserta beberapa contoh implementasinya. Yang pertama adalah untuk membuat kotak Chat yang selalu berada di bagian bawah browser. Fitur seperti ini sudah banyak digunakan ya, sering kita jumpai pada situs social media dan e-commerse.

Pertama kita buka dahulu kode HTML kita. Kita tambahkan tag div, dengan kelas chat. Di dalamnya kita tulis Mulai Chat.

Lalu kita buka kode CSS. Kita tambahkan selector kelas chat. Lalu kita beri border dengan nilai 2px solid black. Background-color: lightgreen. Padding: 10px dan display: inline-block;

Kita lihat hasilnya pada browser. Sekarang kita sudah memiliki satu buah kotak berwarna hijau dengan tulisan Mulai Chat. Kalau kita ingin agar ujung dari kotak kita berbentuk bulat, maka kita bisa menambahkan properti border-radius. Misalkan kita isi dengan nilai 50px.

Nah sekarang kita sudah memiliki sebuah kotak dengan ujung bulat, yang berada di bagian paling atas dokumen kita. Berhubung kita belum mengatur position dari kotak ini, maka kotak diletakan sesuai dengan flow dokumen kita. Kalau kita scroll kebawah, maka kotak chat akan hilang. Apabila kita ingin agar kotak chat ini selalu muncul walaupun kita scroll ke bagian mana saja, maka kita bisa menambahkan properti position dengan nilai fixed.

Kita simpan dan refresh browser. Sekarang kotak chat kita sudah dikeluarkan dari flow dokumen. Lalu judul utama akan naik keatas untuk mengisi posisi lama dari kotak chat. Sebagian dari judul utama berada dibelakang kotak chat, sehingga tidak terbaca. Dan perhatikan bahwa pada saat kita menggeser scroll ke bawah, kotak chat tetap berada di tempat yang sama.

Sifat dari position fixed ini mirip dengan position absolute. Namun pada position absolute, posisi kotak akan dibandingkan dengan posisi dari parentnya. Sedangkan pada position fixed, posisi kotak akan dibandingkan dengan ukuran browser.

Untuk memindahkan kotak chat ke bawah, kita bisa menambahkan properti bottom. Misalkan kita tambahkan properti bottom dengan nilai 0. Sekarang kotak chat sudah berada di bagian bawah browser.

Sedangkan untuk memindahkan kotak chat ke kanan, kita bisa menambahkan properti right. Misalkan kita tambahkan properti right dengan nilai 0. Sekarang kotak chat sudah berada di bagian kanan browser. Dan misalkan kita ingin menambahkan jarak pada bagian kanan, kita tinggal tambahkan nilai pada properti right tadi. Misalkan kita beri nilai 20 px. Maka browser akan menambahkan jarak antara kotak chat dengan sisi paling kanan browser.

Perhatikan bawah kotak chat akan selalu berada di bagian bawah kanan browser, walaupun kita menggeser scroll ke mana pun. Dan kotak chat juga tetap di bagian bawah kanan walaupun kita mengubah ukuran browser.

Dan berhubung kotak chat ini berada di luar dari flow dokumen, maka perhatikan kembali ke kode HTML kita. Kotak chat akan tetap berada di posisi yang sama, walaupun kode div chat saya pindahkan ke bagian paling bawah HTML. Jadi kode div chat ini bisa kita taruh pada bagian manapun di dalam body, dan hasilnya tetap sama.

Selanjutnya kita akan masuk ke contoh kedua dari penggunaan position fixed, yaitu untuk membuat navigasi yang selalu berada di bagian paling atas browser. Navigasi seperti ini bisa kita temukan di Facebook.

Pertama kita tambahkan dahulu kode HTML nav. Lalu di dalamnya kita tambahkan ul. Ingat ya, untuk membuat menu navigasi, kita menggunakan elemen li, bukan div. Selanjutnya kita tambahkan masing-masing tag li untuk bagian-bagian dalam dokumen kita, yaitu Judul Utama, Judul Pertama, Judul Kedua, Daftar Menu dan Form Pendaftaran.

Kita simpan dan refresh browser, sekarang kita sudah memiliki list navigasi. Selanjutnya kita akan membuat navigasi ini menjadi lebih menarik dengan menggunakan kode CSS.

Pertama kita tambahkan dahulu selector nav. Dan di dalamnya kita isikan dengan background-color untuk memberikan warna lightblue. Lalu kita tambahkan border-bottom untuk memberikan garis namun hanya pada bagian bawah saja. Kita beri nilai 1px dashed grey. Dan kita tambahkan properti height: 16 px. Kita simpan dan lihat hasilnya pada browser.

Elemen list item pada navigasi masih memanjang ke bawah ya. Untuk mengubahnya menjadi ke samping, kita bisa menambahkan selector nav li. Nah sekarang apakah teman-teman masih ingat, untuk mengubah baris agar memanjang ke samping, kita menggunakan properti apa? Kita menggunakan properti display dengan nilai inline-block ya.

Nah sekarang menu navigasi kita sudah memanjang ke samping. Dan untuk mengubah posisi navigasi agar selalu berada di bagian atas layar, maka kita bisa menambahkan properti position: fixed pada selector nav.

Sekarang navigasi kita sudah keluar dari flow dokumen, dan selalu berada pada bagian atas browser. Namun tulisan pada navigasi masih berada diluar background-nya ya. Hal ini disebabkan karena secara default elemen ul memiliki margin-top. Kita harus reset dahulu dengan cara menambahkan selector nav ul. Lalu kita beri properti margin-top dengan nilai 0.

Dan kita lihat lagi masalah berikutnya, bagian atas dari browser dengan bagian navigasi masih ada jarak. Hal ini bisa kita atur kembali dengan menambahkan properti top dengan nilai 0 pada selector nav. Sekarang navigasi sudah menempel di bagian atas browser ya.

Dan kalau kita perhatikan lagi, bagian kiri dan kanan dari navigasi juga masih ada jarak ya. Mungkin di video kurang kelihatan jelas, kalau diperhatikan pada bagian kiri dan kanan dari navigasi masih ada bagian yang menggunakan warna background putih. Hal ini bisa diatasi dengan cara menambahkan properti left dengan nilai 0. Perhatikan bagian kiri navigasi akan ditarik hingga menempel ke bagian paling kiri browser.

Selanjutnya kita juga bisa menarik bagian kanan navigasi agar menempel di bagian paling kanan browser, dengan cara menambahkan properti right dengan nilai 0. Sekarang kita sudah memiliki navigasi yang selalu berada di bagian paling atas browser, walaupun kita sedang scroll ke bagian manapun dari dokumen.

Untuk membuat agar navigasi menjadi link yang dapat diklik dan dapat menuju ke konten yang sesuai, kita kembali ke kode HTML. Untuk setiap tag li pada navigasi, kita tambahkan tag anchor, dan kita isikan dengan attribute href. Nilai dari href kita berikan tanda hashtag, yang berarti link akan menuju ke halaman yang sama. Dan setelah hashtag kita berikan nama ID tujuan kita. Sebagai contoh, kita buat link menuju hashtag utama. Dan selanjutnya kita buat link untuk menu navigasi lainnya, dengan tujuan hashtag pertama, kedua, menu, dan daftar. Jangan lupa tag penutup untuk masing-masing tag anchor.

Selanjutnya kita akan menambahkan attribute id pada masing-masing section. Nilai pada attribute ID harus sesuai dengan nilai pada href, setelah itu barulah link dapat diklik.

Sebagai contoh kita ke section judul_utama. Dan kita tambahkan attribute id dengan nilai utama. Ingat, tanpa hashtag ya. Setelah itu kita tambahkan ID pada section lainnya.

Setelah selesai, kita simpan dan refresh browser. Sekarang kita sudah memiliki menu navigasi yang kalau diklik akan berpindah ke judul konten yang sesuai.

Namun disini masih ada dua buah masalah ya. Yang pertama adalah pada saat kita klik, ternyata judul masih tertutup oleh navigasi kita. Oleh karena itu kita mesti menambahkan jarak pada bagian atas section. Kita tambahkan selector section, dan untuk menambahkan jarak pada bagian atas, kita gunakan properti padding-top dengan nilai 10px. Dan sekarang link pada navigasi kita dapat memperlihatkan judul dari konten yang kita tuju.

Masalah kedua adalah masalah responsive. Kita bisa melihat bahwa pada saat kita memperkecil lebar browser, apabila menu navigasi tidak mencukupi, maka menu akan turun ke baris berikutnya. Untuk masalah seperti ini, pada saat ini masih belum bisa kita atasi karena sampai saat ini kita belum mempelajari mengenai kode CSS yang responsive. Nantinya akan bisa kita atasi setelah kita belajar CSS lebih lanjut pada video-video berikutnya.

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.