Bilgisayarlar, Yazılım
Açılan CSS menüler nasıl yapılır
Bugün, "Nasıl bir açılan CSS menüler oluştururum?" Sorusunu ele alacağız. Bu madde herhangi bir ek fon bağlanmadan yapılacaktır olduğunu hemen söylemek gerekir. O menü sadece CSS ve HTML ile oluşturulur vardır.
eğitim
Tamamen makalesinde İçinde ne olduğunu anlamak için, teorik malzemesi hakkında bilgi almak için biraz gerekir. Eğer sözde sınıfları aşina Ama eğer bu paragrafı atlayabilirsiniz. «: Vurgulu» Yani, dikey açılan CSS menüler oluşturmak için, biz bir öğe gerekir. Sözde «: vurgulu» herhangi atanabilir HTML etiketinin. İster bir öğe farenizi anı tanımlamanızı sağlar. «Bir: hover {: kırmızı renk;}» Örneğin, mülk atadık. Bu girdi getirdiğinizde demektir fareyi herhangi etiket içeriklerine kırmızıya döner. Bu sözde eleman da devre dışı bırakıldıktan dikkati çekiyor. Bu arada, «: hover» benzer unsurlar ile ilgili etmiştir. Ama bundan biz sözde CSS açılır menü yaratacak.
talimat
İlk olarak, bir açılır menü ne olduğunu anlayalım. Bu tanım altında farklı düzenler inşa farklı yöntemlerin bir sürü alır. Bu durumda, biz birkaç sürekli görünür öğeleri ve (gizli) birkaç ek oluşan bir yapıyı analiz edecek. teorisine bitirmek ve uygulamaya başlayalım.
- Bizim menü düzeni oluşturun. HTML kodu etiketleme yapmak için. iç içe geçmiş bir liste oluşturun:
-
- < / ul>. Böyle bir şey sizin açılır menüden gibi görünmelidir. CSS sonradan müdahale etmek. Bu durumda ana liste ekte üç ana alanları ve iki oluşur.
- Alt menüyü gizle. bir stil kullanmak Bunun için, aşağıdaki özelliklere tanımlayın: ul ul {görüntü: hiçbiri;} Bu ekrandan ikinci listesinin elemanları kaldırır.
- Bir menü CSS oluşturma ana listeden açılır. Basamaklı stil sayfaları aşağıdaki kural yazma: ül li: ul hover {display: block;}. Bu girdi, fare ul listede yer alan eleman li, ekran ul görünür üzerinde olduğunda (ekli) anlamına gelir. İlk bakışta, böyle bir düzeni karmaşık ve kafa karıştırıcı görünebilir. Ama aslında, her şey çok basittir.
- etiketlerini
- içerik ekleyerek bu düzeni kendiniz kullanın. Sen liste elemanlarının sayısını değiştirebilirsiniz.
dekoratif değişiklikler
En kısa sürede ana menü düzeni hazır olur olmaz, kayıt geçebilirsiniz. Muhtemelen, istekli ilk etapta birçok liste öğesini belirten belirteçlerin kurtulmak için. Bu, tek bir özellik CSS, yani liste tarzı tipi kullanılarak yapılır. li {list-style-type: none;} Aşağıdaki giriş eklemek gerekir. Sonra frame ekleyin yapabilirsiniz background. sınır ve arka plan bu konuda yardımcı. Belki bazı Açılan menü aynı temel unsurları iterek ek bir liste olarak görünecektir gibi olmaz. Bunu düzeltmek için, bunu yerleştirebilirsiniz. Bunu yapmak için, basamaklı stil sayfaları aşağıdaki giriş yazmak: ul ul {position: absolute; Sol: 15px; Sağ: 15px; En: 15 piksel; alt: 15 piksel;}. Tabii ki, değerler kendi kullanacaktır. Açılır menüleri görmek istiyorum yere bağlı olarak, CSS çeşitli efektler ekleyebilir ve bizim listelerini süslemeleri çok daha fazla özellik sunacak.
Sonuç
Bir kez daha o menü düzeni inşaatını dikkati çekiyor. Örneğin, ül ul bu durumda gömülü değeri kullanılan CSS kurallarını atayın. Eğer diğer benzer yapıyı karşılamak için belgede ise, büyük problemler olabilir. Bu durumlarda, örneğin, seçicileri veya id-kimlikleri için, özel bir amaca kullanmak gerekir. Yukarıdaki makale düzeni açılır menü genel tasarım tanımak için tasarlanmıştır. işin geri kalanı omuzlarında.
Similar articles
Trending Now