Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Menguasai Selectors General Sibling: Navigasi Tab Kustom

by
Difficulty:IntermediateLength:MediumLanguages:

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

Selamat datang di rangkaian tutorial berikutnya di mana kami menggunakan kombinator ~ untuk membuat berbagai komponen untuk web. Tutorial ini akan mencakup elemen navigasi menggunakan tautan dan input radio.

Selain CSS selector, akan-mengubah properti, dan masukan states dari tutorial sebelumnya, kami juga akan mencakup perbatasan hack, Sass loop, calc() dan aksesibilitas!

Apa yang Kita Kerjakan

Berikut demo yang akan kami bangun:

Penafian cepat: efek CSS ini mungkin atau mungkin tidak berfungsi di browser yang lebih lama - saya telah mengujinya di versi terbaru Chrome, Firefox, dan Safari.

Aku akan menggunakan Sass, CSS preprocessor untuk mempercepat proses pengkodean!

Aku akan juga menggunakan AutoPrefixer menakjubkan bukan Penjual awalan. Jika Anda menggunakan CodePen, pastikan untuk pergi ke pengaturan pena Anda, klik pada CSS, dan pilih AutoPrefixer.

1. link tab

Versi pertama kami akan membuat adalah bar terdiri dari link <a> tab. Ini adalah yang paling sederhana dan mudah untuk membuat; ini sangat ideal untuk navigasi umum untuk digunakan pada beberapa halaman web yang berbeda.

Menyiapkan HTML

Kita akan mulai dengan dasar <nav>elemen dengan lima link dan perbatasan. Anda juga dapat menggunakan elemen container yang berbeda, tapi saya lebih suka elemen navigasi karena itulah tujuan dari potongan ini. Perbatasan berfungsi untuk menunjukkan link yang sedang melayang di atas atau selected.

Saya juga membungkus navigasi saya dalam cosnaisel lain, tetapi Anda tidak perlu yang markup dasar!

Menata tab

Langkah berikutnya adalah untuk menciptakan sebuah pangkalan visual untuk tab. container harus diposisikan relatif; kita akan menggunakan flexbox untuk posisi link pada satu baris, tetapi Anda juga dapat menggunakan floats. Link harus mengambil jumlah ruang, mengisi seluruh lebar container yang sama.

Bagian ini bisa rumit, sehingga Anda harus menyesuaikan berdasarkan kasus penggunaan Anda. Aku tahu aku perlu persis lima link untuk demo ini, jadi aku bisa menggunakan 5 sebagai Sass $n variabel untuk menghitung lebar tepat calc (100%/5). Aku melakukan ini karena saya ingin dapat dengan mudah dan cepat mengubah nomor link di bagian atas stylesheet saya, tetapi Anda juga dapat menggunakan yang lurus persentase 20% jika Anda memilih untuk tidak menggunakan calc(), atau 160px tetap lebar jika Anda tidak tahu berapa banyak link Anda akan memiliki.

Perbatasan harus menjadi lebar yang sama sebagai setiap link-kita akan menggunakan lebar yang sama yang kita gunakan untuk link. Akhirnya, kami akan posisi itu benar-benar di sudut kiri bawah container.

Menambahkan fungsi

Bagian selanjutnya menggunakan pemilih Umum! Kami akan styling :hover, :active, dan :focus, serta kelas .active jika Anda ingin menggunakan JavaScript untuk membuat perbatasan "stick" setelah Anda mengklik link.

Setiap kali Anda hover di atas link, border butuh untuk bergerak ke posisi link. Jika setiap link 160px, kemudian melayang di atas link kedua menyebabkan perbatasan untuk memindahkan 160px ke kanan; melayang di atas link ketiga harus menyebabkan perbatasan untuk memindahkan 320px ke kanan.

Dengan menggunakan informasi ini, kita dapat membangun Sass for loop yang menghitung angka secara otomatis. Ini adalah petunjuk yang menghasilkan sekumpulan gaya beberapa kali-dalam hal ini, ia akan menghasilkan gaya transformasi ini $n kali, atau 5, seperti yang telah kita tetapkan sebelumnya.

$i adalah nomor loop saat ini: 1, 2, 3, 4, atau 5. Untuk menggunakan nomor ini di dalam loop, kita harus melarikan diri dengan membungkusnya dengan tanda pound dan kurung kurawal #{}.

Jika kita menggunakan lebar tetap, kami akan mengganti 100%, yang bergerak perbatasan dengan lebar penuh, dengan 160px atau namun lebar link harus. Jika Anda akhirnya menggunakan .active, Anda akan perlu menggunakan menentukan ~.active ~ hr seperti dalam contoh di atas karena sebaliknya perbatasan akan tetap berpegang pada posisi yang aktif.

Anda juga dapat melakukan ini tanpa untuk loop, tapi itu tidak semudah untuk memperbarui atau menyesuaikan. Link kedua (a:nth-child(2)) bergerak translateX(100%), link keempat bergerak translateX(300%), dll. Anda akan perlu untuk menentukan transformasi untuk setiap link dalam navigasi Anda.

Jika Anda membawa lebih dari kode Sass dalam contoh di atas, View Compiled tombol akan muncul di sudut kanan bawah yaitu bisa Anda klik untuk melihat CSS dikompilasi. Hal ini berguna untuk melihat bagaimana untuk loop bekerja dan bagaimana Anda bisa mencapai sama tanpa direktif Sass ini.

Menambahkan Animation dan Transitions

Terakhir, kami akan menambahkan beberapa transisi untuk membuat gerakan border "sliding" dari tautan ke tautan. Kami akan menambahkan transisi yang lebih lambat ke batas itu sendiri saat kembali ke posisi default dan transisi yang lebih cepat ke batas saat melayang sehingga terkunci ke tautan yang benar. Langkah terakhir adalah menambahkan beberapa perubahan warna pada border di hover dan klik!

2. Radio Tab

Versi berikutnya dari navigasi tab khusus terlihat identik dengan yang pertama, tetapi menggunakan input radio sebagai ganti tautan. Ini berfungsi dengan baik ketika menavigasi melalui bagian konten pada halaman yang sama!

Menyiapkan HTML

Perbedaan utama dalam HTML adalah bahwa kita sekarang perlu dua elemen setiap tab: label untuk mewakili visual tab dan radio masukan untuk menambah fungsionalitas.

Setiap input radio memiliki nama yang sama sehingga memilih salah satu akan membatalkan pilihan yang lain. Label sesuai dengan masing-masing ID masukan. Anda juga dapat mengatur masukan radio dan label sehingga sesuai label dan masukan yang saling berdekatan jika struktur yang lebih baik!

Styling

Styling untuk tab radio nav hampir sama persis dengan nav tab tautan. Satu-satunya perbedaan adalah bahwa setiap input radio harus diposisikan secara langsung di atas label yang sesuai. Saya menggunakan Sass untuk loop untuk menghindari pengulangan, dan juga digunakan calc() untuk menghindari persentase desimal seperti 16.6667%.

Menambahkan fungsionalitas dan animasi

Untuk mentransformasi, tanpa kelas .active, kita akan menggunakan :checked. State ini berguna karena sekarang perbatasan akan "tetap" ketika Anda memilih salah satu radio!

3. Arrow Tabs

Arrow tab fungsional yang sama dengan tab radio; mereka hanya berbeda secara visual. Versi ini baik untuk breadcrumb-gaya atau konten langkah demi langkah. Anda juga dapat menggunakan link jika Anda lebih suka!

Pengaturan HTML dan Menata Tab

HTML setup adalah sama dengan tab masukan radio di atas. Jika Anda ingin menggunakan link, itu akan sama dengan tab link.

Perbedaan terbesar di styling berasal dari perbatasan yang bergerak di hover. Bukan sebuah garis tipis di bagian bawah, perbatasan sebaliknya mengambil ketinggian seluruh navigasi. Ini juga akan diposisikan di belakang input dan label.

Untuk membuat ujung runcing, kita akan menggunakan hack perbatasan hr:before dan hr:after. Setiap elemen palsu akan memiliki tinggi dan lebar 0, tetapi perbatasan-lebar yang membuatnya setinggi container parent. Hal ini menciptakan segitiga sehingga kita dapat menyesuaikan secara individual untuk menciptakan berakhir menunjuk kami.

Set kiri segitiga, perbatasan kiri harus putih sementara yang lain berwarna; untuk set kanan segitiga, perbatasan kiri harus berwarna sementara yang lain putih. Kami juga akan menetapkan batas-batas kiri dan kanan kedua set untuk menjadi lebih tipis dari atas dan bawah sehingga tepi tampak lebih pendek. Kemudian kita akan posisi setiap set pada sisi kiri dan kanan hr.

Menambahkan fungsionalitas dan animasi

Fungsi dan animasi yang persis sama sebagai radio input, atau link jika Anda menggunakan mereka sebagai gantinya.

ARIA dan aksesibilitas

Sementara elemen-elemen navigasi ini bekerja baik dari sudut pandang visual, seseorang menggunakan pembaca layar atau yang membutuhkan bentuk-bentuk lain aksesibilitas mungkin memiliki kesulitan membaca atau mengakses setiap pilihan.

Untuk memperbaiki beberapa masalah ini, kita dapat menggunakan kombinasi dari peran, label, elemen tersembunyi dan tabindex atribut sehingga navigasi membaca dengan baik dari sudut pandang aksesibilitas. Saya masih belajar banyak tentang aksesibilitas, tapi kombinasi ini tampaknya berfungsi terbaik dengan gaya ini navigasi.

Saya terutama difokuskan pada unsur-unsur yang tidak diperlukan untuk pembaca layar sementara label elemen yang penting untuk fungsi nav, misalnya input radio yang tidak menyertakan teks secara default seperti link bersembunyi. Cobalah apa yang terbaik untuk kasus penggunaan Anda!

Kesimpulan

Ada banyak cara yang berbeda untuk memanfaatkan pemilih saudara umum yang bersifat visual, fungsional, atau keduanya. Ini menyediakan cara yang ampuh untuk menyesuaikan komponen tanpa harus menggunakan lebih dari sekadar CSS dan HTML. Kami telah mencakup elemen formulir dan navigasi sejauh ini; di yang berikutnya, kita akan belajar cara membuat dropdown kustom. Jangan ragu untuk memberi komentar di bawah jika Anda memiliki pertanyaan atau umpan balik!

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.