CSS ile Bio Açılır Kutu Nasıl Yapılır

Serbest bıraktıktan sonra en son Theme Lab tasarımı, Gezinme çubuğumda yer alan “bio açılır liste” kutusu hakkında birkaç yorum yaptım. Arka plan resmi ile birlikte sadece birkaç satır CSS ile kodladım.


Bu CSS ipucu gönderisinde, kendi sitelerinizde benzer bir fareyle üzerine gelme etkisine nasıl sahip olabileceğinize bakacağım.

Örnek

Bu örnekte, bir metin widget’ı Yirmi onbir teması, WordPress 3.2’den itibaren yeni varsayılan.

Temel olarak, widget’ı içeren div’ın üzerine geldiğinizde, biyo açılır kutumuz olacak bir “gizli” div görünür..

Soldaki resimde dikkat edin, “Bio Hover” başlığını içeren div’i getirmediğiniz sürece gri bio kutusu görünmeyecektir.

Seçici

Biyolojik açılır kutunuzu koymak istediğiniz div’a stil eklemek için benzersiz bir CSS seçiciye sahip olmak o kadar önemli değil. havada durma durumu.

Twenty Eleven söz konusu olduğunda, sadece “kenara” sınıfını şekillendirmekten kurtulabiliyor olsak da, şansınız var mı?.

Neyse ki WordPress ile kullanabileceğiniz bir ton benzersiz CSS seçicisi çıkarıyor. Bu örnekte, bundan sonra kullanacağımız # test-3 tükürüyor.

Not: Bu, WordPress kurulumunuza bağlı olarak değişebilir. Seçiciyi kolayca bulmak için Chrome Geliştirici Araçları gibi bir şey kullanın.

HTML İşaretlemesi

Bu örnekte, HTML işaretlemesi doğrudan WordPress metin widget’ına yerleştirilebilir. İşte buna koydunuz:

Leland!

Merhaba. Ben Leland Fiegel ve Theme Lab’ın yaratıcısı ve kurucusuyum. Kod yazmayı seviyorum, özellikle HTML, CSS ve WordPress için.

Kimliğimi çalmak istemediğiniz sürece, muhtemelen fotoğrafı kendi resminizle değiştirmek istersiniz. İsteğe bağlı olarak kaldırabilirsiniz.

Bir WordPress widget’ı kullandığımız için, dış işaretleme bizim için zaten oluşturuldu. Toplamda olan budur.

Bio Hover

Leland!

Merhaba. Ben Leland Fiegel ve Theme Lab’ın yaratıcısı ve kurucusuyum. Kod yazmayı seviyorum, özellikle HTML, CSS ve WordPress için.

Bunu ham bir HTML sitesinde yapıyorsanız, içindeki başka bir şeyle biyolojik açılır liste için bir çeşit sargıya ihtiyacınız olacak (bunun gibi bir kenara), aksi takdirde aşağı açılırken üzerine gidilecek hiçbir şey yoktur.

Gerçek hayat örneği: Biyolojik açılır listem gezinme menümdeki bir li etiketinin içinde.

CSS’nin İlk İki Satırı

İlk iki satır gerçekten geri kalanını oluşturdu, bu yüzden bunu kendi bölümüne koydum.

# text-3 {konum: göreceli; }
.bio-dropdown {display: none; }

açıklama

  • İlk satır: Biyolojik açılır listenin sargısını göreceli konumlandırmaya ayarladık. Bu, biyo açılır kutuyu orijinal sargıya kesinlikle daha yakın konumlandırmayı kolaylaştırır.
  • İkinci çizgi: Bu, temelde bio açılır kutusunu varsayılan olarak görünmez yapar. Sadece bir şeyin üzerine geldiğinizde görünmesi gerekiyor, hatırlayın?

Not: Görüntünün hayranı değilseniz: yok; ya da SEO ya da bir şey acıyor düşünüyorum, ayrıca pozisyon çizgisi boyunca bir şey kullanabilirsiniz: mutlak; sol: -100000em; temelde sayfa dışına taşıyacak, kimse yine de görmeyecek.

CSS’nin Geri Kalanı

Aşağıdaki CSS kodu, biyo açılır kutunun görünümünü ve izlenimini işler.

# text-3: fareyle üzerine gelin .bio-dropdown {
Ekran bloğu; z-endeksi: 99;
pozisyon: mutlak; üst: 25 piksel;
arka plan: #ccc; dolgu: 10 piksel 10 piksel 0 10 piksel;
yazı tipi boyutu: 11 piksel; satır yüksekliği: 18 piksel; renk: # 666;
}

açıklama

Bu, nihayetinde # text-3 seçicisini birlikte kullandığımız yerdir: biyolog açılır kutusunun yalnızca metin widget’inin üzerine geldiğinizde görünmesini sağlamak için hover pseudoclass.

  • İlk satır: Ekran: blok; bio açılır kutusunu görünür hale getirir. Z-endeksi: 99; kutunun engellenmeden her şeyin üzerinde gösterilmesini sağlar.
  • İkinci çizgi: Bu, kutuyu aşağıdaki 25 kenara kenara yerleştirir.
  • Üçüncü satır: Bunlar sadece bazı kozmetik stillerdir, arka planı düzgün dolgu ile açık griye ayarlar.
  • Dördüncü satır: Hepsi kendi kendini açıklayan tipografi.

Not: İlk satır hakkında, konumu kullanıyorsanız: mutlak; sol: -100000em; ekran yerine teknik: none; Yukarıda açıkladığım gibi, display: block komutunun kullanılması gerekli olmayacaktır (div öğelerinin zaten blok düzeyinde öğeler olduğu varsayılmaktadır). Bunun yerine sol kullanmanız gerekir: 0; div’i sayfaya geri taşımak için.

Ve görüntü için, sadece basit bir şamandıra ve sağ kenar boşluğu.

.bio-dropdown .photo {şamandıra: sol; kenar boşluğu: 10 piksel; }

WordPress Entegrasyonu

Bunu bir şeyden filtrelemeden dinamik bir WordPress menüsüne (wp_nav_menu) entegre etmenin iyi bir yolunu düşünemiyorum. En kolay yol olabilir navigasyonunuzu zor kodlayın ve üstesinden gelin (tüm sitelerimde yaptığım).

Bunun için gerekli olan bir WordPress menü öğesine biçimlendirme ekleme konusunda herhangi bir tekniğiniz varsa, yorumlarda duymak isterim. Bunun mümkün olduğuna eminim ama bu CSS ipucu yazısının kapsamı dışında.

Sonuç

Evet, muhtemelen kenar çubuğunuza biyolojik açılır liste koymak istemeyeceğinizi, tam olarak görüntülenmesi için yeterli alanı olmayan (sıkışık bir gezinme çubuğu gibi) bir yere koyacağınızı anlıyorum..

Neyse ki, bu tekiği hemen hemen her yerde kullanabilirsiniz. Fareyle üzerine gelindiğinde tüm bir div’in nasıl gösterileceğiyle ilgili temel bir tekniği gözden geçirmek istedim.

Çok karmaşık değil ve bunu yapmak için herhangi bir süslü Javascript’e ihtiyacınız yok, ancak bazı yüksek teknoloji solma efekti istiyorsanız, muhtemelen bazı Javascript kullanmanız gerekecek.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map