CSS3'te Zarif Bir Ekmek Kırıntısı Gezinme Menüsünü Kodlama
Gezinme menüleri ve bağlantıları, muhtemelen bir web düzenindeki en önemli arabirim öğeleridir. Bu kullanıcılar için sadece çıkışlar sayfalar arasında seyahat ve oluşturduğunuz tüm içeriklerle etkileşimde bulunun. Breadcrumb ek faydası ile benzer işlevsellik sunar Mevcut pozisyonunuzu takip. Yapabileceksin önceki tüm bağlantı yollarını göster kullanıcı site hiyerarşinizi geçtiğinde.
Bu derste, bazı CSS3 efektlerine sahip parlak bir breadcrumb navigasyon menüsü oluşturacağız. Bu, tüm büyük CSS3 uyumlu tarayıcılarda çalışacak şekilde test edilmiştir, CSS3'ü desteklemeyen eski tarayıcılar bile çoğu durumda düzgün şekilde çalışacaktır..
Koda dalmadan önce, kırıntımızın işlevselliği hakkında biraz konuşacağız, atlamada tam eğitim!
İzi Sunmak
Bir ekmek kırıntısı izi diğer herhangi bir menüden daha karmaşık değildir. Stillerimiz çoğu örnekten çok daha karmaşık CSS özelliklerini kullanacak, ancak çıplak kemik şablonumuz, kullanıcıları bir sayfadan diğerine yönlendirmek için hala hazır durumda.
Bu örnekte, Google destek menüsü ile benzer bir tarzı yeniden oluşturacağız. Nereye gittiğimize dair bir fikir edinmek için Gmail destek sayfasındaki menülerini görüntüleyebilirsiniz. Sonuçta biz istiyoruz tüm kullanıcılar için en iyi kullanıcı deneyimini sağlamak, İşletim Sisteminden veya tarayıcı yazılımından bağımsız olarak Eski tarayıcılar arasında zarif bir bozulmayı desteklemek için 2 farklı kod örneği.
İlk kullanılarak inşa edilmiştir özel arka plan resimleri ve uygun CSS hizalamaları. Tüm hover etkinlikleri ve etkin etkinlikleri, yalnızca birkaç CSS stiliyle önceden oluşturuldu, ancak görüntüleri kapatılan kullanıcılar bu efektleri yaşayamayacak! Bu yüzden CSS gradyanları, yuvarlatılmış köşeler ve kutu gölgeleriyle benzer bir görünüm menüsü oluşturdum..
Her iki stili de destekleme konusunda gerginseniz, kendi siteniz için aralarından birini seçebilirsiniz. Çoğu ziyaretçi varsayılan olarak görüntüleri kullanıyor olacak, ancak daha kesin ziyaretçi verileri almak istiyorsanız web sitesi analitik aracınızı araştırın.
Yeterli kelime, hadi projeye geçelim! Temel HTML çerçevesini oluşturarak başlayacağız ve farklı stil efektlerine geçeceğiz. Her şeyden önce görüntüyü indirmelisin proje için gerekli.
Çıplak Kemikler HTML
Belge ile başlıyorum standart HTML5 sayfa şablonu. Bu, varsayılan doktipi, bağlantılı CSS'yi ve tüm temel öğeleri içerir. Kendi belgenizi bu şekilde başlatmak istiyorsanız aşağıdaki kodu ekledim. Ekmek kırıntınızın nasıl görüntülendiğini etkilememesi gerektiğini unutmayın, bu nedenle isterseniz kendi sayfa şablonunuzu kullanmaktan çekinmeyin.
Varsayılan sayfa
Kodu iki farklı bloğa ayıracağım. Görüntüler ile ilk blok biraz farklı bir şekilde inşa edilmiştir, ardından görüntüleri olmayan menümüz vardır. Her küme kendi verilir İD bu yüzden içeriği daha kolay tanımlayabiliyoruz. Ayrıca bir jQuery hayranıysanız, #ID seçici tüm dahili DOM öğelerini değiştirmek için.
İlk önce bir div içeren kimliğiyle “içerik haritası“. Demo dosyasında, kodumuzu ayırmak ve bazı kenar boşlukları ile sayfa boyunca taşımak için bunu kullandım. Bu dış dalıcığı kaldırabilirsiniz, ancak yeni şablonu sığdırmak için her şeyi yeniden stillendirmeniz gerekir. Konumlandırmayı daha kolay kontrol edebildiğiniz için bir konteynırdan ayrılmak gerçekten acı vermez.
Dahili olarak, uncrumced listesini kullanarak ekmek kırıntılarını yaptım. Stilli HTML listelerini kişiselleştirmenin pek çok benzersiz yolu vardır ve ekmek kırıntıları bunlardan sadece bir tanesidir. İlk liste maddesine bir tane verdiğimi fark edebilirsiniz. sınıf arasında “ilk“. Menü öğelerini aynı hizada tutmak için bazı ekstra dolgu malzemeleri için bu gereklidir. Ek olarak küçük yayılma bloğu eklenir, böylece arka plan resmiyle örtüşmeyen uygun bir sol sınırımız olur..
Ek olarak, her bir bağlantı halkası için azalan bir sayı ile ekilir. Z-endeksi özelliği. Görüntüleri kullanarak ihtiyacımız olacak bağlantılarımızın her birinin üst üste gelmesini sağlayın ekmek kırıntı okunu düzgün şekilde görüntülemek için. Bunu başarmanın en kolay yolu z indeksini ayarlama bu yüzden her bağlantı bir sonrakine geçer. İle başladım 9 ve oradan aşağı çalıştı, ancak menünüzde daha fazla bağlantı varsa, sadece daha yüksek bir tamsayı ile başlayın.
Görselsiz Menü
için kırıntımızı incelikle bozun ikincil bir HTML listesi öğeleri grubuna ihtiyacımız var. Tek bir navigasyonda geri dönüş yapmaya çalışıyorsanız, tarayıcı aracısını tespit etmek ve buna göre bir kimlik uygulamak için jQuery kullanabilirsiniz. Ne yazık ki bu her zaman güvenilir değildir (örneğin, bazı mobil kullanıcılar için). Başka bir çözüm ise IE’ye özgü bir stil sayfası ekleyin ve hangi menünün en iyi şekilde çalıştığını gizlemek veya göstermek - ama elbette, bu seçenek yalnızca Internet Explorer içindir.
breadcrumb2 Menüyü resimsiz hedeflemek için kullanılan yeni kimliğimizdir. Kullandığım bu kalıba uymak crumbs2 sırasız liste için sınıf olarak. Kullandığımız nedeni unutmayın sınıflar onun için bu menüleri çoğaltmak için basitlik, sayfanızda birkaç farklı ekmek kırıntısı istediğinizde, bu sınıflarda bu sorun olmaz.
Biz tuttu .ilk sınıf ama ek olarak eklenmiş .sonson liste maddesi üzerine sınıf. Resimler olmadan gezinti menüsünün her bir öğesi için okları çoğaltamıyoruz, bu yüzden bazı yuvarlatılmış köşeler ikincil menüyü renklendirmek için. .ilk sınıf ve .son Gerçekten harika bir web 2.0 görünümlü stil oluşturmak için menümüzün kenarlarındaki sınır yarıçapını değiştirin.
CSS Kayan Arka Plan Resimleri
Bazı basit efektler için, özellikleri inşa ederken her iki ekmek kırıntısını bir araya getirdim. Bu, sadece biraz alan kazandırmakla kalmaz, aynı zamanda stilleri düzenlemeye geri dönerken kullanışlıdır. özelleştirmek daha kolay kendi görünümün.
Her ikisi için de #breadcrumb ve # breadcrumb2 Ayarladım liste tarzı: yok; bu nedenle tüm iç öğelerin işaretleri olmayacak. Efekti beğenirseniz bunları bırakabilirsiniz, ancak HTML'nin çalışmasının yorucu olduğunu ve yeni simgeler oluşturmak için çok daha kolay olduğunu gördüm. Öyleyse başlayalım bizim .kırıntıları sınıf.
.kırıntıları ekran: blok; .crumbs li görüntüleme: satır içi; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: ziyaret renk: # 666; Ekran bloğu; şamandıra: sol; yazı tipi boyutu: 12 piksel; sol kenar boşluğu: -13px; dolgu maddesi: 7px 17px 11px25px; pozisyon: göreceli; metin dekorasyon: yok; .crumbs li bir background-image: url ('… /img/bg-crumbs.png'); arka plan tekrarı: no-tekrarı; arkaplan pozisyonu:% 100 0; pozisyon: göreceli; .crumbs li a: hover color: # 333; arka plan konumu: 100% -48px; imleç: işaretçi; .crumbs li a: active color: # 333; arka plan konumu: 100% -96px; .crumbs li.first bir yayılma height: 29px; genişlik: 3px; sınır-sol: 1 piksel katı # d9d9d9; pozisyon: mutlak; üst: 0 piksel; sol: 0 piksel; Biz sırasız listemizi blok bu yüzden başka hiçbir şey bölgede sürünmez. Liste öğelerine dikkat edin satır içi görüntüleniyor Her bir çapa bağlantısına yayılacak çok daha fazla yer verilir. Menümüzdeki tüm alanların tıklanabilir olmasını istiyoruz, bu nedenle çapalarımızı blok elemanlar olarak inşa etmek.
Adlı bir resim kullandım bg-crumbs.png arka plan için. Bu, CSS'de basit bir hareketli sayfa veya alternatif olarak bir sürgülü kapılar tekniği. Bu, kullanıcı bir bağlantıya tıkladığında veya tıkladığında, güncellenmiş stili görüntülemek için arka plan konumunu değiştiririz. Bu tek görüntü, farklı konumlarda kırıntı kökeni oluşturmak için ihtiyaç duyduğumuz 3 tasarımın tümünü içeriyor; Arka plan konumlu kullanıcı etkileşimi temelinde taşınması özelliği.
CSS3 ile Özel Efektler
Orijinal kırıntı tasarımı oluşturmak çok daha kolaydır. Bu, CSS özelliklerinin birçoğunun hayal edeceğinizden daha temel olması nedeniyle farkedilir, ancak şimdi bu etkileri yalnızca CSS3 ile kopyalamaya odaklanmaya başladık!
Bireysel stiller çok fazla yer kaplıyor, bu yüzden onları 2 kod bloğuna ayıracağım.
.kırıntı2 ekran: blok; sol kenar boşluğu: 27 piksel; dolgu maddesi: 0; dolgu üst: 10px; .crumbs2 li ekran: satır içi; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: ziyaret renk: # 666; Ekran bloğu; şamandıra: sol; yazı tipi boyutu: 12 piksel; dolgu maddesi: 7px 16px 7px 19px; pozisyon: göreceli; metin dekorasyon: yok; sınır: 1px katı # d9d9d9; sınır-sağ genişlik: 0 piksel; .crumbs2 li a background-image: -webkit-gradyanı (doğrusal, sol alt, sol üst, renk durağı (0.45, rgb (241, 241, 241)), renk durağı (0.73, rgb (245.245, 245)))); arka plan görüntüsü: -moz-doğrusal-gradyan (merkez alt, rgb (241, 241, 241),% 45, rgb (245, 245, 245),% 73); / * Internet Explorer 5.5 - 7 * / filter için: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 için * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first bir border-top-sol-radius: 5px; -moz-border-radius-topleft: 5 piksel; -webkit-border-top-sol-yarıçapı: 5px; .crumbs2 li.last bir sınır-sağ genişlik: 1px; sınır-alt-sağ yarıçapı: 5px; -moz-sınır-yarıçapı-dipte: 5px; -webkit-border-alt-sağ yarıçapı: 5px;
.crumbs2 menü kullanıyor CSS degradeleri arka plan efektlerini çoğaltmak için Bunları bilmiyorsanız, CSS3 gradyanlarını verimli bir şekilde kullanmanıza yardımcı olacak CSS3 Gradyanları hakkında CSS Tricks 'rehberini şiddetle tavsiye ediyorum. Microsoft ve Opera tarayıcıları için birkaç özellik daha içeriyorlar, ancak bunlar her durumda tam olarak desteklenmiyor. Onları buraya demo koduna dahil etmedim - ancak tüm seçenekleri anlamak iyi.
-webkit-gradyan ve -Moz doğrusal gradyan işin çoğunu yapan temel çözümlerdir. Internet Explorer'ın eski sürümleri için eski kodu ekledim, ancak garanti edilmez her zaman düzgün şekilde görüntülemek için (sonuçta güçlü görüntü oluşturma tekniklerini kullanıyoruz). Arka plan özellikleri arasında hem RGB hem de hex renk kodları ayarladığıma dikkat edin. Daha rahat edersen bir yönteme veya diğerine yapışabilirsin.
sınır yarıçapı kod yalnızca ikincil kırıntı navigasyonumuza uygulanır. Bu, tüm breadcrumb menümüzün sol üst ve sağ alt kısmında temiz bir etki sağlar. Çubuk neredeyse sayfadan çıkıyor gibi görünüyor - stilleri destekleyen tarayıcılar üzerinde gerçekten harika bir etki, ancak bunlar yalnızca bağlantılarımız için varsayılan durumları kapsıyor. Şimdi, yukarıda kullandığımız resimlere benzer vurgulu efektler oluşturalım..
CSS3 Sınırlar ve Gölgeler
Ne zaman bir kullanıcı bir linke tıklarsa birkaç şeyi güncellemek istiyoruz. İlk önce ihtiyacımız var aktif elemanımızın üstündeki ve altındaki kenarlık renklerini koyulaştırın. Bu, görüntülerde hem asılı dururken hem de etkin durumlar için görülebilir.
.crumbs2 li a: hover border-top-color: # c4c4c4; sınır-alt-renk: # c4c4c4; arka plan görüntüsü: -webkit-gradyanı (doğrusal, sol alt, sol üst, renk durağı (0.45, rgb (241, 241, 241))), renk durağı (0.73, rgb (248.244))); arka plan görüntüsü: -moz-doğrusal-gradyan (merkez alt, rgb (241, 241, 241),% 45, rgb (248, 248, 248),% 73); / * Internet Explorer 5.5 - 7 * / filter için: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 için * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; renk: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; kutu-gölge: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; sınır-alt-renk: # c4c4c4; arka plan görüntüsü: -webkit-gradyanı (doğrusal, sol alt, sol üst, renk durağı (0.45, rgb (224,224,224)), renk durağı (0.73, rgb (235,235,235))); arkaplan-görüntü: -moz-lineer-gradyan (orta alt, rgb (224,224,224)% 45, rgb (235,235,235)% 73); / * Internet Explorer 5.5 - 7 * / filter için: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8 için * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; kutu gölge: -1px 1px 1px 0px #dadada eki; -webkit-box-shadow: -1px 1px 1px 0px #dadada eki; -moz-box-shadow: -1px 1px 1px 0px #dadada eki; renk: # 333;
Yukarıda kullandığımızla aynı gradyan kodunu kullanıyorum, ancak RGB değerlerimizi fark ettiyseniz bu sefer renkler çok farklıdır. Durumların her biri metin rengini kararacak # 333, diğer tanımlayıcılar kullanıcı komutlarına uyması için biraz değiştirildi.
Vurgulu bir göreceksiniz parlak kabartmalı etkisi ile birleştiğinde karanlık sınırları sayfa açılır stillerini verir. Eğer tıklar ve basılı tutarsanız, bir özelliği olan aktif duruma geçersiniz. karanlık arka plan gradyanı. Bu efekt, düğmelerin gerçekte oldukları gibi görünmesine neden olur “preslenmiş” sayfada.
Biz de uyguluyoruz kutu gölge yeni CSS3 özelliklerinden özellikler. -webkit, -moz, ve varsayılan stiller aynı ayarlarla kullanılır. Hovering görüntüler ışık gölge Seçilen bağlantının altından çıkıyor. Aktif olduğunda gölge üstte, sağda ve alt sınırlarda oluşacaktır. Bu etki ile oluşturulur ilave Her bir kutu gölgesi özellik satırının sonuna anahtar kelime eklendi. CSS hileleri, CSS3'teki sözdizimi ve uygun kullanımı hakkında konuştuğu gibi, kutu gölgesinde harika bir yazıyla en iyi arkadaşınız..
Bonus: Daha Fazla Stil
Eğitim koduna ek olarak uyarlanmış renk şemaları ile ekstra arka plan görüntüleri ekledim. Orijinal kökenden örnek aldım ve kendi web sitenize uygulayabileceğiniz birkaç varyasyon oluşturmak için Adobe Photoshop kullandım.
Bunlar bonus dosyaları kaynak dosyaya dahil edilmiştir .zip arşiv biçiminde indirebilirsiniz..
Neden bahsettiğim hakkında bir fikir edinmek için yukarıdaki resme bakabilirsiniz. Belirli bir renk düzenine ihtiyacınız varsa açılır Photoshop> Görüntü> Ayarlamalar> Ton / Doygunluk Renk şemasını kendi şablonunuza uyacak şekilde değiştirmek için Renklendir seçeneğini işaretleyin Renk hiç değişmediyse Ton / Doygunluk bölmesinde.
Sonuç
Bu eğitimde yeni CSS3 tekniklerinden bazılarına aşina olmanız gerekirdi. Benzer bir şekilde tasarlanmış iki fantastik breadcrumb menü oluşturduk ve eski tarayıcılarda incelikle bozunabilecek şekilde geliştirdik. Ek olarak demo kodumu ve bazı bonus resimlerini oynamanız için teklif ettim.
Özellikle burada yarattığımız stilleri seviyor musunuz? Ya da belki öğretici kodun nasıl geliştirileceği ile ilgili sorularınız veya fikirleriniz mi var? Lütfen aşağıdaki tartışma alanındaki düşüncelerinizi bizimle paylaşın ve kaynak dosyaları indirmeyi unutmayın, böylece demo ile oynayabilirsiniz.!
Daha fazla CSS3 Öğreticileri
Daha fazla CSS3 için özlem? Aşağıda teorik ve pratik olarak CSS3'ü anlamanız için yazdığımız makaleler!
- CSS3: Bir RSS Beslemesi Logosu Oluşturma
- CSS3: Bir Arama Alanı Oluştur
- CSS3: Bir AJAX İletişim Formu Oluşturun
- CSS3: HTML5 / CSS3 Web Sayfaları Oluşturma
