# 054: Ketuk untuk Tunjukkan Navigasi Mudah Alih - Trik CSS

Isi kandungan

Kami mempunyai permulaan yang baik dalam reka bentuk responsif. Menu pada ukuran skrin terkecil dipecah menjadi grid 2 × 4. Ini sesuai dengan baik di layar, tetapi antara itu dan jenama ia memerlukan banyak ruang. Kami membukanya di simulator iOS dan melihat bahawa dalam beberapa kes, anda sama sekali tidak dapat melihat kandungan sebenar.

Kami melihat beberapa sumber mengenai cara menangani corak navigasi, seperti artikel Brad Frost Responsive Navigation Patterns dan Jason Weaver's Off Canvas. Kami juga melihat demo hebat di MDN yang disebut Paperfold.

Kami menambahkan pautan tambahan ke navigasi yang akhirnya kami panggil "Navigation 'n' Search" yang akan bertindak sebagai butang untuk mengungkapkan navigasi mudah alih ketika diketuk. Melalui titik putus pertanyaan media, kami menyembunyikan dan menunjukkan butang ini mengikut keperluan.

Penukaran navigasi yang kebanyakannya kita tangani dengan JavaScript. Sedikit berisiko kerana mengasingkan mereka di skrin kecil dengan JavaScript yang dilumpuhkan - tetapi saya hanya akan menggunakannya. Angka itu sangat kecil (lebih kecil daripada desktop tanpa JavaScript, yang tentunya kurang dari 1%) sehingga saya hanya akan tersentak dan menjalankannya.

Yang benar-benar kita lakukan dengan JavaScript adalah menukar nama kelas. Itulah yang saya fikirkan sebagai pembangunan CSS yang dipacu oleh negara. Semua kawalan mengenai apa yang ditunjukkan dan kapan dan bagaimana dikendalikan dengan CSS. JavaScript hanya menetapkan kelas untuk menyatakan keadaan semasa.

Kami menghabiskan banyak waktu untuk bermain-main dengan menambahkan dalam "kertas lipat" CSS, membuatnya berfungsi dengan betul, dan kemudian meletakkan carian di celah yang kami buat di atas kandungan utama melalui beberapa padding.

Pada akhirnya, ukuran dan kedudukannya disesuaikan agar lebih kemas dan butang tutup kecil ditambahkan. Saya berulang-alik dengan memberi UI untuk menukar keadaan mengenai perkara seperti ini Dengan satu tangan, setelah pengguna mengungkapkan navigasi, mengapa mereka perlu menutupnya? Mereka sudah melihatnya. Sekiranya mereka tidak mahu menggunakannya, mereka hanya boleh melewatinya. Sebaliknya, saya merasa agak menjengkelkan apabila saya tidak dapat menukar keadaan seperti ini pada aplikasi lain (untuk sebab tertentu) jadi saya cenderung untuk menyediakan mekanisme untuk melakukannya.

Artikel menarik...