SIDENAV'ı çözmenin yolları üzerine düşünme
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bugünkü GUI zorluğunda, CSS ve JS kullanarak duyarlı, erişilebilir ve kayan bir yan gezinme kullanıcı deneyimi oluşturduk. Yan gezinme çubuğu birden çok tarayıcı, ekran boyutu ve giriş cihazında çalışır. Rad, değil mi? Bu kullanıcı deneyimini işlemek için ızgara, dönüştürme, sanal sınıflar ve bir sürü JavaScript kodu kullanıyoruz.
@AdamArgyleInk, bölüm yayınlandıktan sonraki ilk 30 dakika boyunca yorumlarınızı yanıtlayacak. Bizimle buradan iletişime geçebilir, soru sorabilir veya kendi kodunuzu gönderebilirsiniz.
Bölümler:
- 0:00 - Giriş
- 0:30 - Hata Ayıklama Köşesi Özelliğine Genel Bakış
- 2:25 - Izgara += Medya Sorgusu Yığın Düzeni
- 3:42 - Erişilebilir Dönüşüm Geçişi
- 4:22 - :target Sözde Ders
- 5:57 - Escape Anahtarı Kullanıcı Deneyimi
- 6:16 - Odağı Düzenleme
- 6:49 - Ekran Okuyucu Kullanıcı Deneyimi
- 7:56 - Kapanış ve Harekete Geçirici Mesaj
Kaynaklar:
Daha fazla GUI Meydan Okuması'nı izleyin: https://goo.gle/GUIchallenges
Google Chrome Geliştiricileri'ne abone olun → http://goo.gl/LLLNvf
arrow_back Tüm bölümlere dön
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2021-01-21 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"İhtiyacım olan bilgiler yok"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Çok karmaşık / çok fazla adım var"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Güncel değil"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Çeviri sorunu"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Örnek veya kod sorunu"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Diğer"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Anlaması kolay"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Sorunumu çözdü"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Diğer"
}]
{"lastModified": "Son g\u00fcncelleme tarihi: 2021-01-21 UTC."}
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2021-01-21 UTC."],[],[]]