İçerik
- Bilgi gerekli: Temel HTML, orta düzey CSS
- Gerektirir: İsteğinize bağlı olarak metin düzenleyici, cihazlar ve / veya emülatörler
- Proje zamanı: 30 dakika
- Destek dosyası
Mobil cihazlar için navigasyonu optimize etmenin en iyi yolunu bulmak düpedüz zordur. Topluluğumuz, bu sorunu ele almak için her biri kendi artıları ve eksileri olan bir dizi farklı yaklaşım geliştirdi.
Geçmişte, geleneksel liste tabanlı gezinmeyi bir seç mobil için (aşağıdaki örneğe bakın). Bu, uygulanması kolay basit bir kavram ve yaklaşımın zarafetini seviyorum, ancak onu kullanılabilir hale getirmek için JavaScript'e güvenmeniz gerektiği gerçeği hiçbir zaman bana pek iyi gelmedi. İlerleyen güçlenmenin ateşli bir savunucusu olarak, daha iyi bir yol olması gerektiğini biliyordum.
Her zaman saf CSS açılır menülerine hayran kalmışımdır, ancak geleneksel olarak : fareyle üzerine gelme. Ve bildiğiniz gibi, dokunma tabanlı senaryolarda fareyle üzerine gelme alakasız, bu yüzden bu bir çıkmaz sokak gibi görünüyordu. Ama sonra aklıma geldi: :hedef dualarımın cevabıydı.
Muhtemelen bildiğiniz gibi, hedef sözde sınıf seçici (:hedef), bir URL'nin parça tanımlayıcısında referans verilen öğelere stil uygulamanıza olanak tanır. Örneğin:
http: //website.tld/my-page/#content
Bu URL’de, parça tanımlayıcı "içerik" dir ve tarayıcının kaydırarak bir öğeyi getirmesini sağlar. İD "içerik" görünümüne. Basit. Daha sonra, hedeflendiğinde bu öğeye stiller uygulayabiliriz. :hedef:
: hedef {
arkaplan: # F6FD86;
}
Nichols College, potansiyel öğrenci mikro sitesini yeniden tasarlamak için şirketime başvurduğunda, proje hakkındaki teorimi test etmek için mükemmel bir fırsat sundu. :hedef.
01. Tasarım
Mikro site gerçekten sadece iki sayfadır - potansiyel bir öğrenci hakkında bilgi toplamak için bir form ve onun yanıtlarına göre Nichols College'ın programları hakkında ilgili bilgileri bir araya getiren bir teşekkür sayfası - ancak program gibi şeyler yapmasına yardımcı olmak için bolca gezinme bağlantısı içerir. bir ziyaret edin, başvuru sürecini başlatın veya okula yol tarifi alın. Sitede, bu kritik gezinme parçalarına ek olarak, okul hakkında "lezzet" dediğim şeylerden daha fazlasına erişim sağlayan bir gezinme bağlantıları koleksiyonu da bulunuyor.
Hokkabazlık yapmak çok şeydi, ancak içeriğe, doğal olarak sayfayı düzenleyerek başladık, böylece kullanıcılar herhangi bir gezinme sunmadan önce okumak ve / veya etkileşim kurmak için orada bulundukları şeylere anında erişebilirlerdi:
- Site Başlığı
- İçerik
- Harekete geçirici mesajlar
- İletişim mekanizmaları
- Belirli okul sayfalarına bağlantılar
- Sosyal ağlar
- Arama
- Telif hakkı vb.
Bu yaklaşım, Luke Wroblewski’nin "önce mobil" mantrasına ve içeriği önceden sunma ve ardından bir kullanıcının oradan dönmesine izin verme fikrine mükemmel bir şekilde uyuyor. Bu içerik öncelikli yaklaşım, özellikli telefonlara yönelik medya sorgusuz temel düzenimize yol açtı.
Hepimizin çok farkında olduğumuz için, küçük ekranlı cihazlarda gayrimenkulün önemli bir değerde olduğunu, bu nedenle kullanıcılarımızın deneyimini kolaylaştırmak için sürekli fırsatlar arıyorduk. Akıllı telefonların özellikli telefonlardan daha iyi CSS desteğine sahip olma eğiliminde olduklarından, daha az önemli olan bağlantıları bir menü simgesinin arkasına sıkıştırmaya karar verdik, onları yalnızca tıklandığında açığa çıkardık, tıpkı eski CSS açılır menüleri gibi. Bu, mobil web'de yaygın bir tasarım modelidir, ancak şimdiye kadar gördüğüm her uygulama JavaScript gerektiriyordu. Yalnızca CSS kullanarak (ve gizli bir form kontrolü içeren bilgisayar korsanlarına başvurmadan) eşdeğer bir deneyim oluşturup oluşturamayacağımı görmek istedim.
CSS'yi inceleyeceğim, ancak önce aşağıdaki stillerin 19.375 metreden başlayarak orta genişlikteki cihazları hedefleyen bir stil sayfasına yerleştirildiğini not etmeliyim. Bu kuralların çoğu, uygulamalarını 46 metreden daha az genişliklerle sınırlayan (bu belirli nav için alternatif bir düzeni destekleyecek kadar geniş olan) bu stil sayfasının içine ek bir medya sorgusu içine sıkıştırıldı. Bu izolasyon tekniği, kuralların gereksiz yere alternatif düzenlere "akmamasını" sağlar.
link rel = "stylesheet" href = "/ c / medium.css" media = "ekran ve (min-genişlik: 19.375em)" />
@media ekranı ve (maks. genişlik: 46em) {
/ * Kurallar buraya gider * /
}
02. Hemen araştıralım
İlk adım, gezinmeyi sayfanın en üstüne yeniden konumlandırmak için stilleri uygulamaktı:
#nav {
kenar boşluğu: 0;
konum: mutlak;
üst: 0;
sağ: 0;
sol: 0;
z-endeksi: 1000;
}
Not: Önemli parçalara odaklanabilmeniz için alakasız stilleri kaldırdım.
Daha sonra, navigasyonun mevcut hedef olması durumu dışında, bağlantıları daraltılmış görünecek şekilde ayarladım:
#nav a {
border-bottom-width: 0;
taşma: gizli;
yükseklik: 0;
satır yüksekliği: 0;
dolgu: 0 1em;
}
#nav: hedef bir {
border-bottom-width: 1px;
satır yüksekliği: 3em;
yükseklik: 3em;
}
Bu kurallar yürürlükteyken, menüyü açıp kapatmak için URL'yi manuel olarak değiştirebilirdim, ancak bu gerçek dünya senaryosunda makul bir gereklilik değil. Gezinme listesini hedefleyecek bir bağlantı oluşturmam gerekiyordu, ancak bunu belgeye fazladan engel eklemeden yapmak istedim. Sonuçta, yalnızca bir senaryoda yararlıysa, bir öğenin sayfada bulunmasının bir anlamı yoktur. Neyse ki, eski bir yedek görev için mükemmel bir şekilde uygundu.
03. kurtarmaya "atla"
Web’in ilk günlerinde, kullanıcılarımızın site gezintisini atlayıp sayfanın etine ulaşmasını sağlamak için sık sık "içeriğe atla" bağlantılarını kullanırdık. İçerik öncelikli yaklaşımla, bir "navigasyona atla" bağlantısı, kullanıcılara hepsini sayfanın en üstüne koymak zorunda kalmadan navigasyona doğrudan erişim sağlamak için eşit derecede kullanışlıdır. "Atlama" bağlantılarının en güzel yanı, URL'nin parça tanımlayıcısını değiştirerek çalışmaları ve bu nedenle :hedef. Voila!
İlk olarak, sayfanın üst kısmına bir "atla" bağlantısı ekledim:
başlık>
- Logo ->
a id = "jump" href = "# nav"> Sitede Gezinme / a>
/ başlık>
Sonra tasarımımızın sağ üst köşesindeki küçük menü düğmesi gibi görünecek şekilde tasarladım:
#jump {
arkaplan: # 000 url (/c/i/nav.png)% 50% 50 tekrar yok;
kenarlık: 1px katı # 8b8b8b;
border-width: 0 0 1px 1px;
imleç: işaretçi;
Ekran bloğu;
dolgu: 0;
yükseklik: 53px;
genişlik: 53px;
metin girintisi: -999em;
konum: mutlak;
sağ: 0;
üst: 0;
}
Bu bağlantının, doğrudan navigasyona atlamalarına olanak sağladığından, özellikli telefonlar için bile yararlı olduğunu belirtmek gerekir. (Contents Magazine ve Bagcheck tarafından kullanılan bu basit yaklaşımı görebilirsiniz. Artıları ve eksileri için Brad Frost’un mobil gezinme şemasına bakın.)
Açma / kapatma düğmesi yerinde olduğunda, gezinmeyi göstermenin şık bir yolunu buldum, ancak onu tekrar ortadan kaldırmanın bir yolu yoktu.
Bu sorunu bir süre düşündükten sonra gülünç derecede basit bir çözüm aklıma geldi: gezinme listesinin sonuna bir "içeriğe geri dön" bağlantısı ekleyin. Bu bağlantıya tıklamak #nav artık hedef değildir ve liste çöker.
ul id = "nav" tabindex = "0">
! - Gezinme öğeleri ->
li id = "back"> a href = "# top"> Başa dön / a> / li>
/ ul>
Yeterince kolay, ama bu sorunun yalnızca bir kısmını çözdü. Bir kullanıcının, açılır menüyü kapatmasına olanak tanıyan bir bağlantı bulmak için bir listeyi araştırmasına gerek kalmasını istemiyoruz; bunun yerine, bir kullanıcının beklediği gibi davranmasını istiyoruz: açılır menü alanının dışına dokunmak veya tıklamak, nav'ı yeniden daraltmalıdır. Neyse ki biraz z-endeksi hokkabazlık ve akıllı konumlandırma dokunuşu, bağlantıyı diğer gezinme öğelerinin altına yerleştirmek ve ekranın geri kalanını dolduracak şekilde genişletmek (tabii ki görünmez bir şekilde) mümkündür. Aşağıda, alakalı stil kurallarının bir örneği verilmiştir:
#jump {
/ * menü düğmesinin üstte olduğundan emin olun * /
z-endeksi: 1001;
}
#nav {
/ * gezinme, menü düğmesinin arkasında bulunur * /
z-endeksi: 1000;
}
#nav: hedef {
/ * gösterilmediği sürece * /
z-endeksi: 1001;
}
#nav: hedef a {
/ * nav bağlantılarını bir seviyeye oturtun * /
konum: göreceli;
z-endeksi: 1;
}
#geri {
/ * daha yakın için bir konumlandırma bağlamı oluşturun * /
konum: göreceli;
}
#back a {
/ * bağlantıyı hayalete çevir * /
arka plan: şeffaf;
sınır: 0;
metin girintisi: -999em;
/ * ekranı doldurmasını sağla * /
konum: mutlak;
üst: -101em;
alt: -101em;
sol: 0;
sağ: 0;
/ * diğer bağlantıların arkasında olduğundan emin olun * /
z-endeksi: 0;
}
Bununla birlikte, menü tamamen işlevseldi. Sadece biraz iyileştirmeye ihtiyacı vardı.
04. Kat Hizmetleri
Arayüzün görünümünü güzelleştirmek için, bağlantılara basit bir geçiş eklemeyi seçtim, böylece nav hedeflendiğinde dikey olarak büyümelerine izin verdim:
#nav: hedef bir {
-moz geçişi: yükseklik 0,25s, satır yüksekliği 0,25s;
-ms geçişi: yükseklik .25s, satır yüksekliği .25s;
-o-geçiş: yükseklik 0,25s, satır yüksekliği 0,25s;
-webkit geçişi: yükseklik 0,25s, satır yüksekliği 0,25s;
geçiş: yükseklik 0,25s, satır yüksekliği 0,25s;
}
Bu küçük geçişin eklenmesiyle birlikte, gezinme güzel bir performans gösterdi, ancak yine de potansiyel stil kanaması konusunda biraz endişeliydim. Elbette, bir tarayıcı medya sorgularını destekliyorsa, muhtemelen :hedef, ancak her ihtimale karşı, ilgili tüm stil kurallarının önsözünü şu şekilde yapmayı seçtim: gövde: değil (: hedef) (yalnızca tarayıcı hedef seçimi destekliyorsa eşleşir). İşte bir örnek:
body: not (: target) #nav {
/ * bu stiller yalnızca şu durumlarda uygulanır: target ve: not
anlaşıldı (ve vücut hedeflenmedi elbette) * /
}
Ve işte karşınızda: Duyarlı bir tasarımın parçası olarak harika bir şekilde çalışan, aşamalı olarak geliştirilmiş basit bir CSS açılır menüsü. Umarım bu yaklaşımı benim kadar kullanışlı bulursunuz.
Aaron Gustafson, Easy'nin kurucusu ve baş danışmanıdır! Tasarımlar, bir web geliştirme danışmanlığı. Aynı zamanda Web Standartları Projesi'nin (WaSP) grup yöneticisi, W3C’nin Açık Web Eğitim İttifakına davet edilen bir uzman, bir konuşmacı ve bir yazardır.
Böyle? Bunları oku!
- Illustrator eğitimleri: bugün denemek için harika fikirler!
- Doodle sanatının harika örnekleri
- Mükemmel Wordpress öğretici seçimi
Açılır menüler hakkında ne düşünüyorsunuz - iyi fikir mi yoksa gereksiz karmaşa mı? Aşağıdaki yorumlarda bize bildirin!
