# 054: Mobil Navigasyonu Göstermek İçin Dokun - CSS Hileleri

Anonim

Duyarlı tasarıma iyi bir başlangıç ​​yaptık. En küçük ekran boyutlarındaki menü 2 × 4 ızgaraya bölünür. Ekrana güzelce uyuyor, ancak bununla markalama arasında çok fazla yer kaplıyor. Onu iOS simülatöründe açıyoruz ve bazı durumlarda hiçbir gerçek içeriği göremediğinizi görüyoruz.

Brad Frost'un Responsive Navigation Patterns ve Jason Weaver'ın Off Canvas makalesi gibi navigasyon modellerinin nasıl kullanılacağına dair birkaç kaynağa göz atıyoruz. Ayrıca, MDN'de Paperfold adlı harika bir demoya da bakıyoruz.

Gezinmeye, nihayetinde "Gezinme 'n' Arama" adını verdiğimiz ve dokunulduğunda mobil gezinmeyi gösteren düğme görevi görecek ek bir bağlantı ekliyoruz. Medya sorgusu kesme noktaları aracılığıyla, gerektiğinde bu düğmeyi gizler ve gösteririz.

Gezinmenin değiştirilmesini çoğunlukla JavaScript ile ele alacağız. JavaScript'in devre dışı bırakıldığı küçük ekranlardakileri yabancılaştırdığı için biraz riskli - ama ben sadece onunla gidiyorum. Bu sayı o kadar küçük ki (JavaScript içermeyen masaüstünden daha küçük, ki bu kesinlikle% 1'den az) sadece bir aptal olacağım ve onunla koşacağım.

JavaScript ile gerçekten yaptığımız tek şey bir sınıf adını değiştirmektir. Devlet güdümlü CSS geliştirme olarak düşünmeyi sevdiğim şey bu. CSS ile neyin, ne zaman ve nasıl ele alınacağının tüm kontrolü. JavaScript sadece mevcut durumu bildirmek için bir sınıf ayarlar.

"Kağıt katlama" CSS'yi eklemek, doğru çalışmasını sağlamak ve ardından aramayı bir miktar dolgu ile ana içeriğin üzerinde oluşturduğumuz bir boşluğa yerleştirmekle uğraşmak için çok zaman harcıyoruz.

Sonuçta, boyutlandırma ve konum daha da güzel olacak şekilde ayarlandı ve küçük bir kapatma düğmesi eklendi. Bunun gibi şeylerde durumları değiştirmek için UI sağlayarak kafamda ileri geri gidiyorum. Bir yandan, kullanıcı navigasyonu açıkladığına göre, neden kapatmaları gereksin? Onu zaten görmüşler. Kullanmak istemiyorlarsa, geçip geçebilirler. Öte yandan, diğer uygulamalarda bu gibi durumları değiştiremediğimde (bazı nedenlerden dolayı) bunu biraz can sıkıcı buluyorum, bu yüzden bunu yapmak için bir mekanizma sağlama eğilimindeyim.