7 Mart 2012, ÇARŞAMBA

Basamaklı Açılan Navigasyon Menüsü İle Css (Bölüm 1)

Bu videoyu aa yatay navigasyon menüsü oluşturmak istediğiniz yer hey bu Ralph Sadece stilleri kullanarak Yani burada bir örnek diğer küçük yatay navigasyon menüsü var ve o zamandan beri var açılan seçimler basamaklı var oluyor ve aynı zamanda aktif ana seçimi biraz farklı bir renk ile biçim Şuna takip see böylece yapacağız benim editörü üzerinden atlamak senin oluşturmak konum ne ve ben burada bir sürü şeyler var ama onun olacak şeyler çok yerleşim için kolay iyi yapmak ve söylemek net her şey K o dersi kurtarmak mazisi temiz başlamak senin atış benim tarzım etiketi kapanış vücut etiketi e

tiketli vardı Ben buraya gitmek ve yenilemek şimdi eğer ben kesinlikle boş bir sayfa var bu yüzden zaten var mı asla benim Beş belgenin her takım saldırdı için mark-up politikasını kurmak ördek bant tanım başlık karakte

r kodlama Onları Genel SGA orada yazar bir araya geldi Ben kesinlikle stil yaratmak olacağım ama kurmak gerekiyor ağlarız gon benim listemde biraz daha düşük Addis burada Doolittle h1n yardımcı olacağını

“Navigasyon menüsü, basamaklı, bir multi-level içine yuvalanmış sırasız liste dönüştürmek aşağı açılan CSS kullanarak. Merkezli gezinti çubuğu Demo Dosya: http://...”
Ralph Phillips

Bu olacak tabii ki ufak navigasyon menüsü olacak Benim navigasyon menüsü yukarıda yapılan olacak ve sırasız liste 10 ve beni benzersiz devam onu ​​tespit edelim alan Benim sırasız listeye bu bir dizi liste öğeleri ve Coursey olacak var olan olacak köprü olmak orada biz gitmek anlaşılabilir bana bağlantı grubu antsy orada biz gitmek köprü biri ve ben köprüleri kurmak edeceğiz 3 beş yüzden bu benim üst olduğunu navigasyon menüsü ve bu hiç şüphesiz bir

Basamaklı Açılan Navigasyon Menüsü İle Css (Bölüm 1) Resim 1 Basamaklı Açılan Navigasyon Menüsü İle Css (Bölüm 1) Resim 2 Basamaklı Açılan Navigasyon Menüsü İle Css (Bölüm 1) Resim 3 Basamaklı Açılan Navigasyon Menüsü İle Css (Bölüm 1) Resim 4

kişinin sağ iken gördüğü yumurta olacak Onlar sayfasına gidin Yaz istediğim bu seçenekler böyle bazı alt menüler ve şeyler var bu yüzden anne sanatçısı gitmek için burada bazı benim ikinci birinde almak benim İkinci liste öğesi benim köprü için ben ve ben var benim Bir ekleme de liste öğesi etiketinin içine orada işaret ve gitti iş bana oda vermek benim enerji birkaç kez basın edildi Ben bu liste öğesi ve bir yarısında bu yüzden Bu sipariş listedeki başka olacak aa biraz classier olacak O olacak bir alt biri olacak, çünkü b

en klasik birini yapacağım bu yüzden sadece bu yüzden olduğumuzu bir sıralı liste elbiselerimi koyarak yardımcı olabilir Gerçekten açık Bu alt bu sırasız liste Tamamen bir liste öğesinin kadar içeride ebeveyn köprü ya da öylesine ana liste öğesi için o halledilir almak ve sonra biraz daha bağlantıları yapma sadece bir konuda serbest Ben bir kopyasını istiyorum en olacağım Bu yapıştırın köprü olacak 2.1 tekrar bir kaç kere 2.2 ve 2.3 yıl önce bu yüzden bizim alt tane var ve Amerikalı tekrar gitmeyi bu süreci temelde copping kopyalayarak kopyalama haber Benim köprü için bu liste öğesi içinde öyle şey güzel dört buraya almak anlaşıldı değil şimdi var bu yüzden burada yapıştırılan 4.1 4.2 4.3 bunların hepsi bu tamam başka bir alt menü vardır ve sadece biraz daha derine burada ben de 4.3 için bir alt menü yapacağız bu yüzden beni önde gidelim ve orada sağ kasalı ve bana bize sıyrılıyor sadece bu yüzden bazı girinti yapalım Eğer ben biliyorum hiç bu biraz garip bakmak Bu olacağını ise bu olacak sınıf alt olacak için için olacağını bu en 43 tek 432 Burada bir sürü insan kaybettim gibi 433 hayır hissediyorum Bu sadece gerçekten bir karmaşık görünümlü menü CHT kuruyor temelde benim liste öğeleri ile şimdi göstermek için sözsüz komple var alt ve aslında bu muhtemelen gitmek için iyi bir yoldur bu hemen etkisini görebilirsiniz size ilk aşağı tüm HTML olsun o senin main kurmak biliyorum ve benim tarayıcı şimdi ne istediğini ve olsun Onlar gerçekten var ve iç içe dizi görüyorum demek sevgi ve sözsüz benim akran listesini görebilirsiniz Köprü 12 3 & 4 ve daha sonra orada beş var ve ben 2,1 2.2 ve 2.3 ile başa çıkmak için köprü için bir alt listesi var Köprü ile ben olacak bir alt liste 4 4.1 4.2 4.3 ve ben 4.3 bir alt liste lazım Bu tamam nedenle temelde bayan yardım bu iyi bir iç listedir Hiç iç içe listenin aaa dizi yapmak gerekirse öylesine tekniği olduğunu Yani temelde sadece liste öğesi içinde tam sırasız listeleri koyarak ebeveyn yani gerçekten HD çivi burada yapılır sup listemi yaz okulu konser üzerinde çalışırken kukla köprüler ele geçirmek için olsun stilleri ve gerçek iş gerçekleşecek nereye işte stilleri olacak bir araştırma kural için Araştırma kuralları gün hayvanları yapıyor seviyorum olacak benim vücut için bir kural var İşte bunlar bence sıfırlama kuralı önemli bir araçtır bilirler 0 dolgu: Tom tüm elemanları 20 margin setleri bu yüzden sürekli dışarı farklı tarayıcılarda arasında olması için güzel bir yol var Vücudun sadece sereceğim ben anne yapacağım statik olmak font-family: Verdana background-color: ABC Burada bol dolgu çok ve ben bir başlık var biri Bazı bir biçim o senatör lacivert margin-bottom yapın: İptal burada ne var bakın tamam bu yüzden bu benim benim yeni yeni ve geliştirmek listesi Ben bu yüzden biraz konuşmak benim yuvalama kaybettim fark ve ben kenar boşluklarını ayarlayın çünkü girintileri kaybetti ve dolgu 0 stirs Bu kırık değil ve böyle sayfaları yapıyoruz zaman Sadece kendine güven lazım ve ben bunu daha önce çalışıyordu biliyorum Biliyorum şimdi farklı görünüyor ama farklı görünüyor neden tam olarak biliyorum ben marjları ve dolgu istatistikleri dedi çünkü farklı görünüyor 0 yürürlükte ben tüm bu varsayılan çentikler kurtuldum ama yine de bu yüzden bu bir iyi biliyorum benim HTML modifiye biliyoruz iyi yazılmış com sırasız liste veya Ben buna iyiyim yani iç içe liste çıkışları birlikte gerçek bir menü koymak için en süreleri let ve bazıları için çoğu için bu kurallar dizisi önemli değil gerçekten o biz gidip Saunders başlayacak teker teker dışarı bazı şeyler nakavt onun burada bazı listemi alanında çalışmaya başlamak benim editör gerçek Eğer sadece biraz konum snow benim navigasyon menüsü yıldızı kurallarını biçimlendirme Burada ve yazarlar ilk şey bir anlaşma Benim 100 listesinde artık menü demek değildir style type 09:00 ve her Buraya gelirken uğrayıp göstermek bu yüzden Firefox ve yenileme üzerine geri bu kafa kaydetmek bu şeyler zaman çoğu Los topları ama Gerçekten daha fazlasını bu yüzden benim sırasız listeye ek olarak şimdi Menü Ben hemen hemen herhangi bir sırasız liste yapabiliriz Ben bu yapabileceğini çift yolları ben yazabilirim Tüm bakılmaksızın gitti dokuz tüm bu topları alacağım listesi Benim sayfadaki diğer bazı sırasız listeleri vardır olabilir eğer orada olsa sorunlu olabilir bu yüzden yeni bir gelen sırasız liste NaH yapabilir virgül kol sırasız liste doc birisi Ortak kelime listesi özen kentte kadar başlar Benim ana yönetici sen benim alt 100 listeleri Benim alt 200 listesinde sayısında bu doktorlar eğlenceli sınıfları Bir kimlik olarak karşı bu tasarruf eğer öyleyse Hiçbir blitzer hala yenilemek Bu oluşturmaya başlayabilirsiniz yapmak üzerine öz sonraki şey k yapı nasıl nasıl bu sayfayı görünüyor Devam edin ve başlamak için gidiyorum bu yüzden menü sezon Tamam görünüyor liste öğeleri işlemek Kendi sıralı liste 100 listesinde artık menüsü Liste öğeleri ve geçici bir anahat vereceğini biz şeyleri görebiliyorum sadece bu yüzden tek düz kırmızı tamam alır bu yüzden Seni daha önce yapılan bütün o kalktıktan sona ama o koyarak seviyorum o görselleştirmek başlamak için gerçekten kolaylaştırır çünkü unsurları bizim sınırları özetliyor işler ve bazıları kalın bazı tür iki katına arıyoruz nerede görebilirsiniz yukarı bir alt listesi var ama ne zaman ama o kadar biraz daha kolay hayatımızı yapacak kalacağız var Şimdi ilk Emma ile onların ayarlamanız gerekir yan bu liste öğesi tarafı olsun 125 piksel yapmak bundan başka, ve bir doer şeyler text-align: center Merkezi içlerindeki metni Muhtemelen değil ama kritik ve en yapacaksın cami görelim position: relative bu burada gerçekten önemli bir adımdır böylece position: relative olacak kullanımda subbed olan pozisyona bize izin olduğunu kesinlikle muhtemelen bir bu pozisyon yakınları silindir bir liste öğesi içinde En önemli adımlar diyelim See ben de olacak benim liste öğeleri almak olduğunu solu yüzen gecikmesi edeceğiz meydana yan yana Bu görünümlü ve nasıl Dom görürdünüz jericho şeyler de burada güzel gidiyor yan yan bakmak beni go ahead ve biraz da koyalım alıyorsanız kenar Burada sadece korumak için orada biz bu yüzden sadece muhtemelen ben fark biraz marj koymak gidip sadece biraz atladı ama biraz daha geniş onların Bu el anahat a satın almak için bir ceza biraz ahlak öne olacağını kol mükemmel sınır bölgesini kazanmak o attı onlar aslında benim liste zamanları arasındaki boşluklar görebilirsiniz sınır onların Bu oyunda K çok az farklı sınır anahat haline geliyor nereye kadar işte böylece aline bu marj alanı dışında biraz iyi tüm hakları kol ve aynı zamanda benim in alamadım Üye, bu ortada in nasıl görünebileceğini dağınık dert etmeyin Ameliyat tabiri caizse Ben gerçekten sadece zaten bakarak orada benim menü öğeleri var yaşıyorum kol olacak birileri manipüle etmek Kendime sonraki şeyle mutluyum olabilir Bir sırasız listeleri de navigasyon menüleri yapıyoruz zaman etiketleri çapa kesinlikle bizi manipüle etmek istemiyorum korur hücre atlama buraya geri döndü sırasız liste şimdi menü grup gitmek böylece Omg vergi tabi Bir Doula metin dekorasyon gibi görünüyordu ne: none geri gerçekten edeceğim ekran yapmak altını çizerek var: block Bu blok elemanlarında benim hat elemanı çapa etiketlerini dönüştürür ve ben gibi Orada yapıyor çünkü şimdi benim çapa etiketleri olacak işlemek için kolay olan Ben o ve benim liste öğeleri yapar akşam yüksekliği ile onların işleyebilirsiniz düğmeler gibi davranmaya Bir bana sadece bir önde gidelim hızlı check this out Aslında şimdi beni gerçekten görebilirsiniz görmek için bu gece ayarlamak izin Bazı ben bir bayi 125 TX yapacağız Yorum yüksekliği beni ikinci orada durmak 25 piksel, bu check out Şimdi daha önce vurmak yenileme öylece bu bir zihinsel not edin Ben mesela benim köprüyü üç etkinleştirmek istiyorsanız Ben metin üzerinde tam anlamıyla benim işaretçisi koymak zorunda K ve ben istiyorum ben tüm ama şekil istiyorum yapmıyoruz Ben yenilediğinizde şimdi köprüler olmak bu kadar her yerde benim imleci koyabilirsiniz düğme o küçük ve şimdi bir köprüdür tamam bu yüzden beni bu dikdörtgen yapmak için izin neyi düğmesi köprü temelde alıyordu benim çapa etiketleri ve blok elemanları ve Ben olmak o dikdörtgen istedim şekli yüksekliği ile orada oturan Gerçekten önemli bir adım kullanılabilirlik kendi aşk geliştirir gördüm navigasyon menüsü tamam efendim oraya ve Seni biraz do line-height: 25 piksel ve temelde bu bana bir vereceğini bir ima dikey merkezleme yarı tür Teksas dikey merkezli olabilir Ben olsaydı birden fazla satır saldırılar sorunlu ama o bir satır alırsınız çünkü Her düğmenin metnin Ben onların merkezleme o küçük kinaye dikey olsun bu iyi ve eylem bunları renklendirmek arka planı değiştirmek için nasıl bu kadar oldukça iyi ve ben sınır edeceğiz onların Şimdi biraz gri ve biraz border-radius var gibi: bir müezzinin görelim çarpık endişeler 5 piksel ve bakıyor nasıl 10 tür büyük ne şimdi kale için bu kırmızı sınırları bu kırmızı sınırları görmezden Bitti değişirse ve aslında hep yerine buraya bir sınır atlama olabilir zaman Bunu büyü eğer doğru anahat var anahat alanlar bu biraz daha net görünüşlü olduğunu ve bu hiç olmasaydı ve daha sonra bu nedenle gördüklerinizi geri koymak onların alanlar bu benim navigasyon menüsü yolunda bakıyordu nasıl Bu video içine CSM yaklaşık 15 dakika kol Burada gizli bir durak arasında yer alıyor kadınların yaptıklarını düşünüyorum ve bir saniye içinde bu pick up video Bir dakika görülen ikinci Parkı efendim harf.

Açıklama

Navigasyon menüsü, basamaklı, bir multi-level içine yuvalanmış sırasız liste dönüştürmek aşağı açılan CSS kullanarak. Merkezli gezinti çubuğu Demo Dosya: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-centered.html Sayfanın üst kısmında Sabit başlık navigasyon. Demo Dosya: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-fixed.html Https://www.youtube.com/watch?v=XRJq1DqYcPs: Nav Menu merkezi No-Blok vs Blok: http://www.ralphphillips.com/youtube/links.html Pozisyon Mutlak: http://www.youtube.com/watch?v=5S1PtC4wRAg Z-index zaman Konumlandırma: http://www.youtube.com/watch?v=WisFFeOsMIs

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



9.7/10

  • 1169
    Olumlu
  • 25
    Olumsuz
  • 293
    Yorum
  • 279322
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • bethliebert

    bethliebert

    23 EKİM 2008
  • kimaliz

    kimaliz

    18 Temmuz 2006
  • mliskIT

    mliskIT

    29 Mart 2012

ANKET



Bu sayfa işinize yaradı mı?