16 ŞUBAT 2015, PAZARTESİ

Bir Basit, Duyarlı Damla-Aşağı Yemek Listesi Yapma

Hey, bu Ralph. Bu videoda bir yanıt versiyonunu yapmak istiyorum Bu yatay navigasyon menüsü. [intro müziği] Tamam. Bir önceki video Yani ve biz bu küçük yatay menü yaptım ve ben sadece bir çift diğer yaptı Bir şey tüm üç kategori için alt menüler vardır ve video açıklaması bakarsanız bunu bulabilirsiniz ama ben uğraşmak istiyorum Bunun için olan Benim editöre üzerinde kafamda öylesine duyarlı düzeni ve burada sonraki menü ile bir çalışmada Bu yüzden iyi şimdi olacak benim şimdi iki tane olmak Benim CSS dosyasına Aslında zaten zaten ve sadece kurmak temelleri için CSS kurallarını var Gerçe

kten benim ilk navigasyon hizmeti yeni bir şey bir kopyalama ve yapıştırma İşte ne o onları odaklanmak gerek mobil versiyonu bu yüzden Seni medya ekranında yapmak ve maksimum genişlik 600 piksel do kişisel Annika ba

zı oda çalışmak şimdi ben bu aslında birkaç yıl önce kötü ama geri vermedi başka bir şey Bu HTML dosyası Ben eşittir onların göbek adı viewport içeriği medoff size port var Cihaz ve ben ilk ölçek dedi biri olacak Öze

“Demo dosyası: http://www.sixminutessmarter.com/demofiles/webdev/navigation-menus2.html...”
Ralph Phillips

llikle Eagles cihazla birlikte oldukça önemli bir adım olduğunu, hücre ama CSS olacak ben bakmak istiyorum gibi ben gerçekten istiyorum ne oldukça kolay olacak tüm kuralları oluşturmak için kullanılır Şekilde dışarı bu navigasyon menüsünde geniş ekran versiyonu ben istediğim değişiklik yani bir çift size büyük çalışabilir biliyorum var yaklaşımları var bir duyarlı tasarımı ile büyük küçük küçük Ben çok küçük, büyük gidiyorum İstediğim şeylerin her ikisi için de aynı olacak

Bir Basit, Duyarlı Damla-Aşağı Yemek Listesi Yapma Resim 1 Bir Basit, Duyarlı Damla-Aşağı Yemek Listesi Yapma Resim 2 Bir Basit, Duyarlı Damla-Aşağı Yemek Listesi Yapma Resim 3 Bir Basit, Duyarlı Damla-Aşağı Yemek Listesi Yapma Resim 4

şekilde Ben yok ekran o endişelenecek geniş ekran hatası Tamam Kendi sıralı liste hala bir liste sahip oluyor mesela ben 9 tip olacak mobil versiyonu yani gerek yok bile aşağı bu kural getirmek ama şimdi denemek zorunda içinde getireceğim, bu burada kural ve aslında aşağı gidelim Burada hepsini getirmek Kurşun türlerin gördüğümüz bir kez ve sadece silebilir ve ne ima do değiştirmeniz gerekir şeyler bakmak olduğunu Mobil düzeni mesela ben artık bu istiyorum Bu menü öğeleri onları üst üste biri olmak istiyorum yanyana

olmak şimdi sadece çıkış sol silebilirsiniz yan yana olabilmesi için muhtemelen oda olmaz Ben yaparsam çünkü hala özelliklerine götüremez var geniş ekran sürümü aslında dışarı iptal etmek zorunda yan bu yüzden benim liste öğeleri artık flüt yan şamandıra 9 yaparak flüt bu yüzden bu kaydettiğinizde Tarayıcı görüntü üzerinde taze Elbette hayır burada bir değişiklik ama bana gidelim kafa rulo şimdi bu liste öğeleri üst üste şimdi bir olduğunu görebilirsiniz Ben istiyorum pozisyon göreli zarar vermez o tamam olur kendisi tarafından hiçbir şey yerine margin-sağ: 10 piksel dört tarafı bir marj koymak var ve edeceğiz margin-top geçersiz kılmak için bir: yani orada hayır büyük dağıtmak ben hala onları olmak istiyorum bu çapa aşağı almak diyelim Ben mutlaka istemiyorum ama bloklar sadece 220 piksel olmak yüzde yüz benim çapa benim liste öğelerinin içerde hatırlıyorum gider yüzen yapmadınız veya set ile bir yok liste öğeleri doğal olarak bu yüzden yapacak olabilir kadar geniş olacak mıyız benim Oldukça geniş çapa ve ben önde gitmek biraz Biti kendi yüksekliği 230 piksel yıkmak edeceğiz Birisi haber çapa çok daha geniş olduğunu görebilirsiniz şimdi bu tarayıcı yenileme tasarruf Daha iyi bir mükemmel ve um çok yakında orada yeterince alamadım şimdi benim çapa daha ben ve ben olacak gibi bakmasını istediğim şey gibi arıyoruz Burada biraz esnek olması ve ders ay önce büyük onların yatay düzen geri arasında background-color gibi bir şey için geç: Ben bu yüzden bile adım kuralı başvuru gerekmez değişen değilim Liman background-color benim cep stilleri: İlgili olsun olmadan bir şey değişen değilim çünkü o kadar para cezası şimdi 100 listesinde artık alacağım Onları konumlandırma konusunda endişe kesinlikle bu daha kritik olduğu zaman ben Bu yatay menü düzen vardı bu yüzden ben bir pozisyonda olacak koymak olduğumu yapmak için pozisyon iptal etmek gerek kendinden geçmiş tamam üst ve sol I can so gerçekten benim için bir endişe sanat Sadece iki litre şimdi bu tasarruf ne olur izle ve tarayıcı biz gitmek orada yenilemek yani şimdi ana menü öğeleri hover Benim alt menü öğeleri streç yukarı altında şimdi bu aslında Burada çünkü benim masaüstü tarayıcı kulağıma bakmak için biraz garip O IAF Diyelim ki Harbor'a olamaz olamaz bir mobil uygulaması üzerinde ama bu web sayfalarına giderseniz bağlantıya tıklayın Orada açıklama Mobil cihazınızda birkaç goad içinde bu aktive olmadığını fark edeceksiniz tıklama kadar böylece mobil cihaz için oldukça iyi durumda aslında ana menü öğesi tıkladığınızda bu yüzden genişletmek olacak vurgulu bir çağrı ile alt menü öğesi yani yürürlükte ben bu ve bir kızla memnunum bu kadar tamamlamayı vardı buraya şimdi biraz daha için tek Biraz daha profesyonel navigasyon menüleri için buraya paneli fanları onları bir sürü bir javascript aa biraz kullanacak Bir düğmeye tıkladığınızda, böylece navigasyon menüsü görünecektir bu yüzden deneyeceğim başka bir video yeni kural

Açıklama

Demo dosyası: http://www.sixminutessmarter.com/demofiles/webdev/navigation-menus2.html

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Ralph Phillips

Ralph Phillips

Üretkenlik yazılımları ve web geliştirme üzerinde durularak öğretici videolar. Web Geliştirme, HTML, CSS, JavaScript, PHP, Internet, SEO, Flash, Dreamweaver, Excel, Access, Word, PowerPoint, Web tabanlı uygulamalar ...

YORUMLAR



10/10

  • 11
    Olumlu
  • 0
    Olumsuz
  • 3
    Yorum
  • 1218
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Bart Baker

    Bart Baker

    1 Aralık 2006
  • GavinMichaelBooth

    GavinMichael

    26 AĞUSTOS 2006
  • TeachMeComputer

    TeachMeCompu

    31 EKİM 2009

ANKET



Bu sayfa işinize yaradı mı?