CSS kullanarak sorunsuz bir şekilde açın. CSS'de dikey açılır menü: nasıl yapılır
Yazardan: Herkese hoş geldim. Bazı nedenlerden dolayı, web yöneticilerinin açılır menüsü komut dosyalarıyla ilişkilendirilir, ancak bu tür bir navigasyonu yapmak için uzun zamandır saf CSS'de kesinlikle sakin bir şekilde yapabilirsiniz. Dahası, böyle bir menü daha kötü olmayacak. Bugün size CSS'de bir açılır menü oluşturmayı göstereceğim. Paylaşacağım, bu yüzden konuşmak için tarif.
Ders Planı ve Menüyümüzü İşaretleme
Genel olarak, önce menünün kendisini nasıl oluşturduğumuzu tanımlayacağız. HTML5'te, Standart Yolu kullanarak NAV konteynerinde oluşturduğu kabul edilir. İşaretli liste. Bunu yapalım. İşaretçiler, daha sonra CSS ile kaldıracağız, menüde bize gerek yok.
Aslında, iç içe geçmiş listelerle HTML işaretlemesine hemen yazarım. Yani, listemiz iki seviyeli olacak - başka bir listeye sahip olacak. Yani, bir açılır menü oluşturacak her öğe 1 listesi için.
Burada var Önemli anBu, düşmeyi yapmak için her maddeye ihtiyacınız olmayabilir, ancak sadece bazıları. Sorunsuz, daha sonra kayıpsız noktalarda sadece yatırım listeleri oluşturmayın.
Aslında, burada hepsi işaretleme:
< nav id = "nav" > < ul > < li > < a href = "#" > Paragraf 1< / a > < ul class = "second" > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < / ul > < / li > < li > < a href = "#" > Nokta 2< / a > < ul class = "second" > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < / ul > < / li > < li > < a href = "#" > Nokta 3< / a > < ul class = "second" > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < / ul > < / li > < li > < a href = "#" > Paragraf< / a > < ul class = "second" > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < li > < a href = "#" > Alt paragrafı< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Çok büyük olduğunu anlıyorum. Bu, çok fazla kod yazmak için gereken iç içe geçmiş listelerin problemidir. Ancak 4 ana eşya yaptığımız gerçeğini ve her biri için açılır menü olacaktır.
Aslında, tüm navigasyon NAV tanımlayıcısını ayarladım ve yatırım yapılan tüm listeler, yatırım yaptıklarını anlamak için ikinci stil sınıfıdır.
Mükemmel, Markup'a hazırız, sonuca bakabilirsiniz:
Evet, korkunç görünüyor. Ancak şimdi CSS çalışmalarına dahil edileceğiz ve birkaç dakika içinde navigasyonumuz dönüştürülecek. Hadi çalışalım.
CSS-Stilleri yazıyoruz
Yapacağım ilk şey tüm öğeler için tüm varsayılan girintileri dondur. Sadece bize müdahale edecekler, girintileri kendilerini daha iyi ayarlayacaklar.
* (Marj: 0; Dolgu: 0;)
marj: 0; dolgu: 0; |
#Nav (yükseklik: 70px;) #nav ul (liste tarzı: Yok;)
#Nav ( yükseklik: 70px; #Nav ul ( liste - Stil: Yok; |
Şimdi, aslında, menünün ne olacağına karar vermek için ihtiyacımız var. Yatay veya dikey mi? Öncelikle yatay yapmayı ve örneğinde her şeyi görmeyi öneriyorum. Bunu yapmak için böyle stilleri yazın:
#Nav\u003e ul\u003e li (şamandıra: sol; genişlik: 180px; pozisyon: göreceli;)
#Nav\u003e ul\u003e li ( Şamandıra: Sol; genişlik: 180px; konum: Göreceli; |
İşaretin yardımı ile\u003e UL'ye doğrudan yatırılan ve doğrudan NAV'ye yatırılan listenin maddelerine hitap ediyoruz. Bu, stilin ekteki listelerin noktalarına uygulanmamasına izin verdiği için çok önemlidir. Gerçek şu ki, ana liste öğelerindeki fikrim tarafından yatay olarak ve iç içe geçmiş - dikey olarak bulunacaktır.
Ama sen, elbette, fikrinizle uyum içinde farklı yapabilirsin. Tüm öğeleri tek bir satırda yapabilirsiniz.
Her durumda, yukarıdaki kod, umarım anlarsınız. Ana listenin öğelerinin sol kenara basmasına neden olur, böylece hepsi bir satırda bir araya gelirler, ancak blok elemanları olmalarına rağmen. Ayrıca onlara bariz bir genişlik ve göreceli konumlandırma sordum.
Konum nedir? Yatırım listelerini yerine getirmek için gereklidir. CSS'de konumlandırıldıysanız, muhtemelen göreceli konumlandırma ünitesini ayarlarsanız, o zaman tüm öğeleri bu belirli bloğun içinde kesinlikle yerleştirilebilir ve tüm tarayıcı penceresi değil.
Bu arada, zaten varmıştık:
Bu ekran görüntüsü tarafından zaten örnek bir sonuç hayal edebiliyorsunuz. Tabii ki, hala eşyaları yerleştirmek için güzel olmalıyız, böylece gözlerin navigasyonu görürken merhamet için yalvarmaz.
#Nav li a (ekran: blok; arka plan: # 90DA93; sınır: 1px katı # 060A13; Renk: # 060A13; Dolgu: 8px; Metin Hizası: Merkezi; Metin-Dekorasyon: Yok;) #nav li a: Hover ( Arka plan: # 2F718E;)
#Nav li a ( ekran bloğu; arka plan: # 90DA93; sınır: 1px katı # 060A13; renk: # 060A13; dolgu: 8px; metin - Hizala: Merkez; metin - Dekorasyon: Yok; #Nav li a: Hover ( arka plan: # 2F718E; |
İlk olarak, bağlantıların kendileri engellenmesi gerekir. Bu, iç girintileri çalıştırmak için gereklidir ve tüm özellikler doğru kullanıldı. Daha sonra, arka planın, metnin, çerçeve parametrelerinin, iç girintilerin ve merkezdeki metin hizalamasının renklerini belirtirim. Sonunda, alt çizgileri iptal ediyorum.
Bütün bu parametreler mutlaka yaptığım gibi reçete etmiyor. Renkler keyfi bir şekilde seçebileceğiniz, başka birisini yapmak veya kullanmamak için, girintiler azaltılabilir veya arttırılabilir.
Bu durumda, işareti\u003e kullanmadık, böylece belirtilen kurallar, iç içe geçmiş ürünler de dahil olmak üzere tüm bağlantılar için geçerli olacaktır. Yani, şimdi aşağıdakilere sahibiz:
Mükemmel, ancak alt paragrafların görülmemesi gerektiğini, istenen maddeye geldiğinizde ortaya çıkmaları gerektiğini anlıyorsunuz. Bundan, menümüz masaya benzer. İyi, iç içe maddeleri gizleme zamanı.
#Nav li .Second (Ekran: Yok; Konum: Mutlak; Üst: 100%;)
#Nav li .second ( görüntü yok; konum: Mutlak; en iyi 100%; |
İlk önce, tamamen ekli listeleri gizleyin. İkincisi, onlara mutlak konumlandırma ve koordinat üstü: 100%. Bu, açılır menünün, ait olduğu ana kalem altında açıkça gösterileceği anlamına gelir. Bu öğenin yüksekliğinin% 100'ünün altında.
Şimdi web sayfasında sadece ihtiyacımız olan ana menüde görüyoruz.
Kaybı uyguluyoruz
En önemli şeyi yapmaya bıraktık - çok zararı gerçekleştirmek için. Bunda karmaşık bir şey yok, bu koda bakın:
#Nav li: Hover .Second (Ekran: blok;)
#Nav li: Hover .Second ( ekran bloğu; |
Bu kod tertemiz çalışacak. Ana menüde gezindiğinde, ekli liste görünür hale gelir. Ve sadece imlecin yönlendirildiği maddeye yatırılan liste.
Sadece bir küçük problem var - iç içe maddelerin genişliği, ana genişliğe karşılık gelmiyor. Ancak ilgili stilleri ekleyerek çok kolay çözülür:
#Nav li li (genişlik: 180px;)
#Nav li li ( genişlik: 180px; |
Hepsi, sorun çözüldü:
Her şey mükemmel çalışıyor. Ana öğeye ulaştığınızda ilgili açılır menü belirir. İmleci yana çıkarırsanız - kaybolur. İmleci ekli parçalara çevirirseniz, bunlara tıklayabilir ve sitenin istediğiniz bölümüne gidersiniz. Böylece, size scriptler olmadan kesinlikle çok basit ve kolay bir açılır menü yaptık.
Menüyü dikey olarak çıkarın
Peki, iyi, yatay navigasyonla, tamamen çözdük, ancak sitelerine ek olarak, çok sık dikey ile karşılaşılır ve ayrıca bırakılabilir. Aslında, yataydan dikeyden menüyü yeniden verin çok kolaydır, kelimenin tam anlamıyla birkaç kod satırını değiştirmemiz gerekecektir.
İlk olarak, şamandırayı çıkarmanız gerekir: ana nokta listesinden sola. Bu özellik, ürünlerimizin bir satırda gösterildiğine katkıda bulunur, ancak navigasyon dikey olması gerekirse neden ihtiyacımız var?
Şimdi #Nav Li .Second seçicisi için kuralları değiştirmeye devam ediyor, yani yatırım listeleri için, yani, biraz farklı konumlandırmaları gerekir. Böyle:
#Nav li .Second (Ekran: Yok; Konum: Mutlak; Sol:% 100; Üst: 0;)
#Nav li .second ( görüntü yok; konum: Mutlak; sol:% 100; Üst: 0; |
Yani, bir yerine iki koordinat kaydetmek gerekir. Öncelikle, yatay navigasyon durumunda, fikrin, menünün öğelerinin ana noktalar altında gösterilmesi gerektiğini söyledim. Dikey menü durumunda, uygun değildir - madde tarafında gösterilmelidir.
Bu nedenle, yukarıdaki% 100'ü değiştiriyoruz:% 100. Ek olarak, koordinat üstü de gereklidir. 0 soruyoruz, böylece ekli menü, geçerli olan öğeyle aynı düzeydedir.
Her şey, şimdi her şey işe yaramaz. Test edebilirsin. Gördüğünüz gibi, sadece birkaç kod satırını yeniden yazmanız gerektiğini söylediğimde yalan söylemedim.
Birden fazla seviyeli yatay menü
Aynı yaklaşımla ilgili olarak, eğer gerekli ise, daha fazla menü seviyesi oluşturabilirsiniz. Örneğin, alt öğelerden birine yatırılacak olan ana menü listesinin dördüncü maddesi için yaratalım.
Mikhail Sat, 09/20/2014 - 12:28
Yorumumun görünmemesi değil bir şey - yinelenen:
===========
Teşekkür ederim, ancak menüden düşmüyorum (int.expl-8 altında). Şunlar. Dize çalışmıyor "UL. nav.li: Hover ul (Ekran: blok;) "
Bana sorun ne olduğunu söyle?
Malzemenin söndürülmesi var:
Bu hatta güzel olurdu (ul.aaaaa li: Hover ul (ekran: blok;)) "Düzen Menüsü" nin sorumlu olduğunu ve daha derin bir iç içe geçme seviyesinin saklanmasından dolayı ne bir kısmının sorumlu olduğunu ifade etmek için
Örneklerde, her satırın yaptığı yorumu sağladı.
Özellikle, neden bir dizgiye ihtiyacınız olduğunu belirsizdir "
Web istemcisindeki dosyalarla çalışmak için uzantı
Gmail Mail'i bağlarken "sunucu POP3 üzerinden erişimi reddetti" hatasını düzeltmek!
1 Windows 10'da başlamıyor