Advertisement
  1. Web Design
  2. Flexbox

Bagaimana Membuat Navigasi Berbaris Dengan Flexbox

by
Read Time:5 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Terima kasih kepada flexbox, sekarang kita dapat membangun layout yang sangat atraktif dan modern dengan relatif mudah. Dalam tutorial ini kita akan melihat sebuah tampilan yang baru-baru ini digunakan untuk Google National Parks, dan melihat bagaimana flexbox dapat membantu kita meningkatkannya.

Seperti biasa, sebelum melanjutkan lebih jauh, mari kita lihat apa yang akan kita buat (kamu mungkin perlu untuk mengecek versi yang lebih besar dimana efek lengkap tampil pada viewport lebih dari 800px):

Pastikan untuk mengarahkan pada link untuk memicu efek yang bersangkutan.

Markup

Pertama-tama, mari kita periksa markup yang akan digunakan untuk membangun layout ini. Kita mendefinisikan elemen div dengan lima tautan di dalamnya (kamu dapat menggunakan elemen manapun yang kamu rasa pantas) Tiap tautan mengandung sebuah div dengan class overlay. Di bawah kamu dapat melihat rangka kode kita:

Initial CSS Styles

Dengan markup yang sudah siap, kita mulai mendefinisikan beberapa Initial CSS Style, khususnya:

  • Tentukan div terluar sebagai flex container dan tentukan nilai height setara dengan viewport dengan height: 100vh.
  • Tentukan nilai width yang sama untuk semua tautan (flex item). Untuk mencapai itu, kita memberikan masing-masing flex: 1. Sebagai tambahan, semua tautan kita akan memiliki gambar background (sumber dari unsplash.com) yang mengcover nilai height viewport. Sebagai sebuah fallback (dalam hal gambar tidak tersedia), kita juga menentukan warna background unik untuk masing-masing.
  • Ketika kita mengarahkan pada sebuah tautan, ukurannya menjadi tiga kali lebih besar dibandingkan dengan ukuran tautan lainnya. Kita melakukan ini dengan mengganti nilai property flex tautan target. Cukup menyenangkan bahwa property ini milik properti animated CSS, jadi kita dapat membentuk efek transisi yang lancar (paling tidak dalam kebanyakan browser terbaru).

Berikut bagian kode CSS mendemonstrasikan apa yang kita jelaskan di atas:

Sejauh ini, jika kita melihat preview demo dalam sebuah browser yang mendukung flexbox, kita akan melihat hasil ini:

Memberi Style Pada Overlay

Langkah kita berikutnya adalah menempatkan beberapa style pada overlay. Inilah apa yang akan kita lakukan:

  • Berikan overlay dimensi yang sama dengan tautan induk. Kita dapat mencapai perilaku ini dengan memposisikannya secara mutlak (relatif terhadap induk langsung) dan kemudian menentukan nilai nol untuk semua properti offset.
  • Definisikan overlay sebagai sebuah flex container. Dengan cara ini, kita dapat menempatkan pada posisi pusat untuk turunan langsungnya (yaitu elemen .overlay-inner) secara vertikal dan horizonal.
  • Tambahkan sebuah background abu-abu semi transparan ke overlay ketika kita mengarahkan pada tautan induk.

Berikut merupakan CSS styles:

Inner Overlay

Sekarang, waktunya untuk menerapkan style pada bagian dalam overlay kita. Secara default ini tersembunyi dan akan tampil hanya ketika kita mengarahkan pada tautan induk yang bersangkutan. Bukan tidak secara langsung, kita akan menampilkannya setelah jeda pendek. Jeda ini penting; jika kita tidak menentukannya secara khusus, efek transisi akan tampak sedikit jelek. Hilangkan itu dan tes pada demo untuk mengerti apa yang saya maksud.

Jadi untuk merekap, pertama-tama tautan menjadi lebih besar, kemudian elemen overlay menjadi kelihatan. Juga, kita menggunakan translate3d() untuk membuat beberapa efek slide masuk. Terakhir tapi tidak sedikit, kita menggunakan hack transform-style: preserve-3d (atau yang sejenis) untuk mencegah kemungkinan efek berkedip di sepanjang browser yang berbeda.

Dan berikut adalah CSS styles terkait:

Mari kita lihat apa yang diberikan.


Menjadi Responsif

Halaman itu tampak bagus pada layar yang besar, namun barangkali pada layar kecil, atau bahkan ukuran medium kita harus membuat beberapa penyesuaian. Sebagai contoh, berikut beberapa hal yang dapat kita lakukan:

  • Balikkan sumbu utama flex container dengan menambahkan flex-direction: column ke situ. Dalam melakukan itu flex akan mengalir dari atas ke bawah.
  • Batalkan semua efek transisi dan tunjukkan hanya elemen overlay secara default.

Media query pertama desktop kita tampak seperti di bawah (saya menggunakan 800px hanya karena itu cocok dengan demo yang ditonjolkan pada post ini-kamu dapat memilih apapun yang kamu rasa terbaik):

Berikut tampilan akhir navigasi kita:

Dukungan Browser

Demo ini berkerja dengan baik dalam semua browser terbaru yang mendukung flexbox.

Dalam beberapa browser kamu mungkin menyadari bahwa animasi property flex tidak semulus seharusnya, atau barangkali tidak berkerja sama sekali Sebagai contoh, IE11 tidak menampilkan animasi ini dengan benar, sementara Edge melakukannya. Ini cukup beralasan, dengan mempertimbangkan fakta bahwa flexbox merupakan sebuah mode layout baru yang masih menerima daya tarik.

Kesimpulan

Dalam tutorial ini, kita meningkatkan pengetahuan flexbox dengan mempelajari bagaimana membuat layout navigasi yang stylish. Saya harap kamu menikmati apa yang kita buat di sini dan mendapatkan beberapa inspirasi untuk proyek mendatangmu!

Jika kamu membuat layout yang mirip, juga lupa untuk menunjukkan kepada kami pendekatan yang kamu gunakan (CSS murni atau berbasis JavaScript)

Di Alam Liar

Sebelum menutup, saya ingin membagikan beberapa situs yang menggunakan layout mirip dengan apa yang baru saja kita kerjakan:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.