Menü
Bedava
kayıt
ev  /  programlar/ Menüyü css'nin tam genişliğine uzatın. CSS'de esnek bir duyarlı menü nasıl yapılır? Yatay menüler için HTML işaretlemesi ve temel stiller

Menüyü css'nin tam genişliğine kadar uzatın. CSS'de esnek bir duyarlı menü nasıl yapılır? Yatay menüler için HTML işaretlemesi ve temel stiller

Site menüsünün oldukça yaygın bir düzeni, içerdiği kap sayfada mevcut tüm genişliği kapladığında. Bu durumda, ilk öğe sol kenara, sonuncusu sağa bitişiktir ve tüm öğeler arasındaki mesafe eşittir. Bugün size bunun nasıl yapıldığını anlatacağız.

Kaynağınız için CSS kullanarak akıcı bir menünün nasıl uygulanacağına dair bir örnek sunuyoruz. Bu menüde öğeler bir satırda yer alacaktır. Javascript kullanılmayacaktır. Menünün içeriği düzenli bir listeye eklenecektir. Böyle bir menünün ana özelliği, öğelerin hem sayısının hem de uzunluğunun herhangi biri olabileceği gerçeğiyle ifade edilen çok yönlülüğüdür.

Bu nasıl uygulanır?

Her programcı sorunu çözmek için kendi yolunu sunabilir. Her şey onun hayal gücüne, profesyonellik düzeyine ve yeteneklerine bağlıdır. Bu sorunun en yaygın çözümü bir tablo kullanmaktır. Ayrıca, birçoğu javascript kullanmanızı önerir. Değer ile display özelliğini kullanmayı önerenler tablo veya tablo hücresi- Üzülmek için acele ediyorum. Bu yöntem, tarayıcılar arası yeterince uyumlu değildir.

Bizim çözümümüz

Teklifimiz, HTML5 ve CSS3 bilgisinin sağlam bir temeli üzerine inşa edilecektir.

Sürecin özü, bir yaslama değerine sahip metin hizalama özelliğine dayanır. Unutanlar için - Size hatırlatırım: bu özellik, metnin hizalamasını kabın tüm genişliği boyunca yönlendirir.

Çözümümüzü kullanırken uyulması gereken iki temel kural vardır. Birincisi, menü öğesi kapsayıcısının genişliğinin metinden daha küçük olması gerektiğidir. Yani tek satırda değil. İkinci önemli kural, kelimelerin aynı noktaya ait olup olmadığına bakılmaksızın eşit olarak uzatılmasıdır.

Aşağıda bir "kauçuk" menü oluşturmaya örnek teşkil eden kod verilmiştir:

HTML

< ul> < li>< a href= "#" >ev < li>< a href= "#" >Blog < li>< a href= "#" >Haberler < li>< a href= "#" >Popüler < li>< a href= "#" >Yeni öğeler

ul (metin hizalama: yasla; taşma: gizli; / * yöntemin yan etkilerini ortadan kaldırır * / yükseklik: 20 piksel; / * gereksizleri de kaldırır * / imleç: varsayılan; / * orijinal imleç şeklini ayarlar * / kenar boşluğu: 50px 100px 0 100px; arka plan: #eee; dolgu: 5 piksel; ) li (ekran: satır içi; / * menü öğelerini metin yapar * /) li a (ekran: satır içi blok; / * menüdeki kelime sonunu düzelt * / renk: # 444; ) a: üzerine gelin (renk: # ff0000;) ul: sonra ( / * yöntemin çalışılması için ikinci satırın oluşturulması * / içerik: "1"; kenar boşluğu- sol: %100; yükseklik: 1 piksel; taşma: gizli; ekran: satır içi blok; )

Eski güzel Internet Explorer'da çalışmak için aşağıdaki kodu CSS'ye eklemeniz gerekir.

ul (z- dizini: ifade (runtimeStyle. zIndex = 1, insertAdjacentHTML ("beforeEnd & apos,"< li class = "last" > "));) ul .last (sol kenar boşluğu: %100;) * html ul (/ * yalnızca ie6 gerekir * / yükseklik: 30 piksel;)

Gerekli özellik değerlerini ve kodu kaydettikten sonra aşağıdaki kauçuk menüyü alıyoruz:

Yöntemin dezavantajları

  1. Toplu kod
  2. Sınıf seçici aracılığıyla bir öğenin etkin durumunu belirleyememe. Bu, paragraflardaki kelimelerin kırılmasından kaynaklanmaktadır (eğer öyleyse). Bu sorunun çözümü, liste öğelerinin içine başka bir kap eklemektir.
  3. Açılır menü için, taşmanın olumsuz etkisi nedeniyle kodu özelleştirmeniz gerekir.

Hangi tarayıcılarda çalışır?

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

yatay menü site bölümlerinin bir listesidir, bu nedenle öğenin içinde işaretlemek daha mantıklıdır

    ve ardından öğelerine CSS stilleri uygulayın. Bu menü düzeni, bir web sayfasında konumlandırılmasının bariz avantajlarından dolayı en yaygın olanıdır.

    Yatay menü nasıl yapılır: işaretleme ve tasarım örnekleri

    Yatay menüler için HTML işaretlemesi ve temel stiller

    Varsayılan olarak, tüm liste öğeleri dikey olarak, genişlik olarak konteyner elemanının tüm genişliğini kaplar, bu da konteyner bloğunun tüm genişliğini kaplar.

    Yatay gezinme için HTML işaretlemesi

    Bir etiketin içindeki yatay bir menü, isteğe bağlı olarak bir öğenin içine yerleştirilebilir.

    ve / veya
    ...
    ... Bu sayede, html işaretlemesine anlamsal bir anlam verilir ve ayrıca menü bloğunu biçimlendirmek için ek bir fırsat vardır.

    Bunları yerleştirmenin birkaç yolu vardır. yatay olarak... İlk olarak, gezinme öğeleri için varsayılan tarayıcı stillerini sıfırlamanız gerekir:

    Ul (list-stili: yok; / * liste işaretçilerini kaldır * / kenar boşluğu: 0; / * 1em'e eşit üst ve alt kenar boşluğunu kaldır * / padding-left: 0; / * 40 piksele eşit sol kenar boşluğunu kaldır * /) a ( text-decoration: none; / * bağlantı metninin alt çizgisini kaldırın * /)

    Yöntem 1.li (ekran: satır içi;)

    Liste öğelerini küçük harf yaparız. Sonuç olarak, yatay olarak yerleştirilirler, aralarına 0,4em'e eşit bir boşluk eklenir (yazı tipi boyutuna göre hesaplanır). Kaldırmak için, li için negatif bir li sağ kenar boşluğu ekleyin (sağ kenar boşluğu: -4px;). Ardından, bağlantıları istediğimiz gibi şekillendireceğiz.

    Yöntem 2.li (kayan: sol;)

    Liste öğelerini yüzer. Sonuç olarak, yatay olarak konumlandırılırlar. Konteyner bloğunun yüksekliği ul sıfır olur. Bu sorunu çözmek için, ul'ye (overflow: hidden;) ekleyerek onu genişletir ve böylece yüzen öğeler içermesine izin veririz. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

    Yöntem 3.li (ekran: satır içi blok;)

    Listenin öğelerini satır içi blok yapıyoruz. Yatay olarak yerleştirilirler, ilk durumda olduğu gibi sağ tarafta bir boşluk oluşur. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

    Yöntem 4.ul (ekran: esnek;)

    Bir model kullanarak ul'yi esnek bir kap yapmak. Sonuç olarak, listenin öğeleri yatay olarak düzenlenmiştir. Bağlantılar için bir (ekran: blok;) ekleyin ve istediğiniz gibi biçimlendirin.

    1. Bir bağlantının üzerine gelindiğinde altı çizili efektli duyarlı menü

    • Çalışmak
    • Hakkında
    • Blog
    • Temas
    @import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (liste stili: yok; kenar boşluğu: 40px 0 5px; dolgu: 25px 0 5px; metin hizalama: merkez; arka plan: beyaz;) .menu-main li (ekran: satır içi blok;) .menu- ana li: after (içerik: "|"; renk: # 606060; ekran: satır içi blok; dikey hizalama: üst;) .menu-main li: son çocuk: sonra (içerik: yok;) .menu-main a (metin dekorasyonu: yok; yazı tipi ailesi: "Ubuntu Yoğun", sans-serif; harf aralığı: 2 piksel; konum: göreli; alt dolgu: 20 piksel; kenar boşluğu: 0 34 piksel 0 30 piksel; yazı tipi boyutu: 17 piksel; text-transform: büyük harf; görüntü: satır içi blok; geçiş: renkli .2s;) .menu-main a, .menu-main a: ziyaret edildi (renk: # 9d999d;) .menu-main a.current, .menu- ana a: üzerine gelin (renk: # feb386;) .menu-main a: önce, .menu-main a: sonra (içerik: ""; konum: mutlak; yükseklik: 4 piksel; üst: otomatik; sağ: %50; alt : -5px; sol: %50; arka plan: # feb386; geçiş: .8s;) .menu-ana a: vurgulu: önce, .menu-ana .akım: önce (sol: 0;) .menu-ana a: üzerine gelin: sonra, .menu-main .current: sonra (sağ: 0; ) @media (maks-genişlik: 550px) (.menu-main (dolgu-üst: 0;) .menu-main li (ekran: blok;) .menu-main li: after (içerik: yok;) .menu- ana a (dolgu: 25px 0 20px; kenar boşluğu: 0 30 piksel; ))

    2. Düğün sitesi için duyarlı menü

    @import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menü (konum: göreceli; arka plan: #fff; kutu-gölge: iç metin 0 0 10px #ccc;) .top-menü: önce, .top-menü: sonra (içerik: ""; ekran: blok; yükseklik : 1 piksel; kenarlık-üst: 3 piksel katı # 575350; kenarlık-alt: 1 piksel katı # 575350; kenar boşluğu: 2 piksel;) .üst-menü: sonra (kenarlık-alt: 3 piksel katı # 575350; kenar-üst: düz 1 piksel # 575350; kutu gölgesi: 0 2px 7px #ccc; kenar boşluğu: 2 piksel;) .menu-ana (liste stili: yok; dolgu: 0 30 piksel; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; konum: göreli;) .menu-ana: önce, .menu-ana: sonra (içerik: "\ 25C8"; satır yüksekliği: 1; konum: mutlak; üst: %50; dönüştürme: çeviriY (-50%) );) .menu-main: önce (sol: 15px;) .menu-main: after (sağ: 15px;) .menu-main li (ekran: satır içi blok; dolgu: 5px 0;) .menu-main a (metin dekorasyonu: yok; görüntü: satır içi blok; kenar boşluğu: 2 piksel 5 piksel; dolgu: 6 piksel 15 piksel; yazı tipi ailesi: "PT Sans", sans-serif; yazı tipi boyutu: 16 piksel; renk: # 777777; kenarlık-alt : 1px katı şeffaf; geçiş n: .3s doğrusal; ) .menu-main .current, .menu-main a: vurgulu (sınır yarıçapı: 3 piksel; arka plan: # f3ece1; renk: # 313131; metin gölgesi: 0 1 piksel 0 #fff; kenarlık rengi: # c6c6c6;) @media (maksimum genişlik: 500 piksel) (.menu-main li (ekran: blok;))

    3. Deniz taraklı uyarlanabilir menü

    • Çalışmak
    • Hakkında
    • Blog
    • Temas
    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (liste stili: yok; dolgu: 0 30 piksel; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; konum: göreceli; arka plan: beyaz;) .menu-ana: sonra (içerik: ""; konum: mutlak; genişlik: %100; yükseklik: 20 piksel; sol: 0; alt: -20 piksel; arka plan: radyal-gradyan (beyaz %0, beyaz %70, rgba (255,255,255,0) %70, rgba ( 255,255,255,0) %100) 0 -10px; arka plan boyutu: 20px 20px; arka plan-tekrar: tekrar-x;) .menu-main li (ekran: satır içi blok;) .menu-main a (metin-dekorasyon: yok; görüntüleme: satır içi blok; kenar boşluğu: 0 15 piksel; dolgu: 10 piksel 30 piksel; yazı tipi ailesi: "PT Sans Caption", sans-serif; renk: # 777777; geçiş: .3s doğrusal; konum: göreli;) .menu -main a: önce, .menu-main a: after (içerik: ""; konum: mutlak; üst: hesap (%50 - 3 piksel); genişlik: 6 piksel; yükseklik: 6 piksel; kenarlık yarıçapı: %50; arka plan: # F58262; opaklık: 0; geçiş: .5s kolay giriş-çıkış;) .menu-main a: önce (sol: 5 piksel;) .menu-ana a: sonra (sağ: 5 piksel;) .menu-ana a. akım: önce, .menu-main a.cur kira: after, .menu-main a: vurgulu: önce, .menu-ana a: vurgulu: sonra (opaklık: 1;) .menu-ana a.akım, .menu-ana a: vurgulu (renk: # F58262; ) @media (maksimum genişlik: 680 piksel) (.menu-main li (ekran: blok;))

    4. Şeritte duyarlı menü

    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menü (kenar boşluğu: 0 60px; konum: göreli; arka plan: # 5A394E; kutu gölgesi: iç metin 1px 0 0 rgba (255.255.255, .1), iç metin -1px 0 0 rgba (255.255.255, .1), iç metin 150px 0 150px -150px rgba (255.255.255, .12), iç metin -150px 0 150px -150px rgba (255.255.255, .12);) .top-menü: önce, .top-menü: sonra (içerik: ""; konum: mutlak ; z-endeksi: 2; sol: 0; genişlik: %100; yükseklik: 3 piksel;) .üst menü: önce (üst: 0; kenarlık-alt: 1 piksel kesikli rgba (255,255,255, .2);) .top- menu: after (alt: 0; kenar-üst: 1px kesikli rgba (255,255,255, .2);) .menu-main (liste stili: yok; dolgu: 0; kenar boşluğu: 0; metin hizalama: merkez;). menü-ana: önce, .menu-ana: sonra (içerik: ""; konum: mutlak; genişlik: 50 piksel; yükseklik: 0; üst: 8 piksel; kenarlık-üst: 18 piksel katı # 5A394E; kenarlık-alt: 18 piksel katı # 5A394E; dönüştürme: döndürme (360deg); z-endeksi: -1;) .menu-ana: önce (sol: -30 piksel; kenar-sol: 12 piksel katı rgba (255, 255, 255, 0);) .menu- ana: sonra (sağ: -30 piksel; kenar-sağ: 12 piksel katı rgba (2 55, 255, 255, 0); ) .menu-main li (görüntüleme: satır içi blok; kenar boşluğu: -4 piksel;) .menu-main a (metin süslemesi: yok; görüntü: satır içi blok; dolgu: 15 piksel 30 piksel; yazı tipi ailesi: "PT Sans Caption ", sans-serif; renk: beyaz; geçiş: .3s doğrusal;) .menu-main a.akım, .menu-ana a: vurgulu (arka plan: rgba (0,0,0, .2);) @media (maks-genişlik: 680px) (.top-menu (kenar boşluğu: 0;) .menu-main li (ekran: blok; kenar boşluğu: 0;) .menu-ana: önce, .menu-ana: sonra (içerik: yok;) .menu-main a (ekran: blok;))

    5. Ortasında bir logo bulunan duyarlı menü

    @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (konum: göreceli; arka plan: rgba (34,34,34, .2);) .menu-main (liste stili: yok; kenar boşluğu: 0; dolgu: 0;) .menu-main: sonra (içerik: ""; görüntü: tablo; temizle: her ikisi;) .left-item (kayan: sol;) .right-item (kayan: sağ;) .navbar-logo (konum: mutlak; sol: %50; üst : %50; dönüştürme: çevir (-50%, - %50);) .menu-main a (metin-dekorasyon: yok; görüntü: blok; satır yüksekliği: 80 piksel; dolgu: 0 20 piksel; yazı tipi boyutu: 18 piksel ; harf aralığı: 2 piksel; yazı tipi ailesi: "Arimo", sans-serif; yazı tipi ağırlığı: kalın; renk: beyaz; geçiş: .3s doğrusal;) .menu-main a: vurgulu (arka plan: rgba (0, 0,0, .3);) @media (maksimum genişlik: 830 piksel) (.menu-ana (üst dolgu: 90 piksel; metin hizalama: merkez;) .navbar-logo (konum: mutlak; sol: %50 ; üst: 10px; transform: translateX (-50%);) .menu-main li (kayan nokta: yok; görüntü: satır içi blok;) .menu-main a (satır yüksekliği: normal; dolgu: 20 piksel 15 piksel; yazı tipi -size: 16px;)) @media (maksimum genişlik: 630px) (.menu-main li (ekran: blok;))

    6. Solda logolu duyarlı menü

    @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menü (arka plan: rgba (255,255,255, .5); kutu gölgesi: 3px 0 7px rgba (0,0,0, .3); dolgu: 20px;) .top-menu: after (içerik: "" ; görüntüleme: tablo; temizle: her ikisi;) .navbar-logo (görüntüleme: satır içi blok;) .menu-main (liste stili: yok; kenar boşluğu: 0; dolgu: 0; kayan nokta: sağ;) .menu-main li (görüntüleme: satır içi blok;) .menu-main a (metin süslemesi: yok; görüntü: blok; konum: göreli; satır yüksekliği: 61 piksel; sol doldurma: 20 piksel; yazı tipi boyutu: 18 piksel; harf aralığı : 2 piksel; yazı tipi ailesi: "Arimo", sans-serif; yazı tipi ağırlığı: kalın; renk: # F73E24; geçiş: .3s doğrusal;) .menu-main a: önce (içerik: ""; genişlik: 9 piksel; yükseklik: 9 piksel; arka plan: # F73E24; konum: mutlak; sol: %50; dönüştürme: döndürme (45 derece) translateX (6.5 piksel); opaklık: 0; geçiş: .3s doğrusal;) .menu-ana a: vurgulu: önce (opaklık: 1;) @media (maks-genişlik: 660px) (.menu-main (kayan: yok; dolgu-üst: 20px;) .top-menu (metin hizalama: merkez; dolgu: 20px 0 0 0; ) .menu-main a (dolgu: 0 10px;) .menu-main a: be fore (dönüştürme: döndürme (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (ekran: blok;))

    Açılır menüler hakkında bir eğitimle seriye devam ediyoruz. Bir sonraki adım, kendi ellerinizle css'de yatay bir açılır menüdür.

    Buraya tesadüfen geldiyseniz veya açılır menünün başka bir uygulamasını arıyorsanız, ana bölüme gitmenizi tavsiye ederim.

    Bu bölüm, CSS ve HTML'deki yatay açılır menüyü açıklayacaktır.

    Sayfa gezintisi:

    Yani, görevimiz:

    jQuery ve Javascript kullanmadan ve ayrıca tablo kullanmadan css açılır menüsüyle (ul li listelerinde) yatay bir menü yapın

    kodda.

    Açılır yatay html menüsü

    Öncelikle kodu yazmaya başlamadan önce menü için bir html şablonu oluşturmamız gerekiyor.

    Evrensel bir menü yaptığımız için, WordPress menüsünün çıktısına mümkün olduğunca benzer hale getirmek istiyorum. Bence bu, en basit ve en çok yönlü Html menü kodlarından biridir. Şuna benziyor:

    Koddan da görebileceğiniz gibi, açılır menümüz ul ve li listelerinde uygulanacaktır. CSS stilleri olmadan bu menü şöyle görünür:

    Normal bir liste gibi çirkin göründüğünü söyleyelim. Ardından, bu menüyü CSS stillerini kullanarak renklendirmemiz gerekiyor.

    CSS yatay açılır menüsü

    Açılır menüler ve daha fazlası için CSS stilleri, air kadar önemlidir. Sonuçta, açılır sekme şuna dayanmaktadır: hover sözde sınıfı.

    Yatay bir açılır menü için aşağıdaki stillere ihtiyacımız var:

    # menu1 (konum: göreli; görüntü: blok; genişlik: %100; yükseklik: otomatik; z-endeksi: 10;) # menu1 ul (konum: göreli; görüntü: blok; kenar boşluğu: 0 piksel; dolgu: 0 piksel; genişlik: 100 %; yükseklik: otomatik; liste stili: yok; arka plan: # F3A601;) # menu1> ul :: after (ekran: blok; genişlik: %100; yükseklik: 0 piksel; temizle: her ikisi; içerik: "";) # menu1 ul li (konum: göreceli; ekran: blok; kayan nokta: sol; genişlik: otomatik; yükseklik: otomatik;) # menu1 ul li a (ekran: blok; dolgu: 9px 25px 0px 25px; yazı tipi boyutu: 14px; yazı tipi- family: Arial, sans-serif; renk: #ffffef; satır yüksekliği: 1.3em; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; yükseklik: 36 piksel; kutu boyutu: sınır kutusu; ) # menu1 ul li> a: vurgulu, # menu1 ul li: vurgulu> a (arka plan: # EBBD5B; renk: # 2B45E0;)

    Bu son değil, ana yatay menü için CSS'nin yalnızca bir kısmı. Ardından, açılır menü için stilleri yazacağız:

    # menu1 ul li ul (konum: mutlak; üst: 36 piksel; sol: 0 piksel; ekran: yok; genişlik: 200 piksel; arka plan: # EBBD5B;) # menu1 ul li: vurgulu ul (ekran: blok;) / * bu satır uygulanır düşürme mekanizması * / # menu1 ul li ul li (kayan: yok; genişlik: %100;) # menu1 ul li ul li a (ekran: blok; metin dönüşümü: yok; yükseklik: otomatik; dolgu: 7 piksel 25 piksel; genişlik: %100; kutu boyutlandırma: sınır-kutu; kenarlık-üst: 1px katı #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: hover ( arka plan: # FDDC96; renk: # 6572BC;)

    Şimdi bu kadar. Açılır mekanizmanın kendisi tek satırda uygulanır.

    Bu menü ile dış görünüme bakın:

    Pirinç. 2 (yatay açılır menü)

    Aşağıda, açılır menünün demo görünümü ve kaynağı indirmek için bir bağlantı bulunmaktadır. (Demo, bu sayfanın üst kısmında açılır menü olarak açılacaktır, yeni bir pencerede açmaya veya fare tekerleğine tıklamanıza gerek yoktur)

    Tam genişlikte yatay açılır menü

    Çoğunuz bana sitem edebilirsiniz, derler ki, yukarıda gösterdiğim gibi, bu tür menüler geçmişten selamlar ve kısmen haklısınız, ancak bu tür menülerle yeni düzenlere rastladım.

    Umarım yukarıdaki örneği indirmişsinizdir. Html aynı kalır, ancak CSS'yi tamamen değiştireceğiz. Buradan CSS kodunu alıp indirdiğiniz örneğe yapıştırabilir veya demo modunda izleyebilirsiniz.

    #conteiner (genişlik: 1000 piksel; yükseklik: otomatik; kenar boşluğu: 0 piksel otomatik; üst dolgu: 10 piksel;) # menu1 (konum: göreli; görüntü: blok; genişlik: %100; yükseklik: otomatik; z-endeksi: 10;) # menu1 ul (konum: göreceli; görüntü: blok; kenar boşluğu: 0 piksel; dolgu: 0 piksel; genişlik: %100; yükseklik: otomatik; liste stili: yok; arka plan: # F3A601;) # menu1> ul (metin hizalama: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (ekran: satır içi blok; genişlik: %100; yükseklik: 0 piksel; içerik: "";) # menu1 ul li (konum : göreceli; görüntü: satır içi blok; genişlik: otomatik; yükseklik: otomatik; dikey hizalama: üst; metin hizalama: sol;) # menu1 ul li a (ekran: blok; dolgu: 9px 35px 0px 35px; yazı tipi boyutu : 14 piksel; yazı tipi ailesi: Arial, sans-serif; renk: #ffffef; satır yüksekliği: 1,3em; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; yükseklik: 36 piksel; kutu boyutu : border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (arka plan: # EBBD5B; color: # 2B45E0;) # menu1 ul li ul (konum: mutlak; üst: 36 piksel; sol : 0 piksel; görüntü yok; genişlik: otomatik; arka plan: # EBBD5B; boşluk: nowrap; ) # menu1 ul li: last-child ul (/ * son öğe sağa eklenecektir * / left: auto; right: 0px;) # menu1 ul li: hover ul (ekran: blok;) / * bu satır * / # menu1 ul li ul li (ekran: blok; genişlik: otomatik;) # menu1 ul li ul li a (ekran: blok; metin dönüşümü: yok; yükseklik: otomatik; dolgu: 7px 35px; genişlik : %100 ; kutu boyutlandırma: kenarlık-kutu; kenarlık-üst: 1px katı #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: hover (arka plan: # FDDC96; renk: # 6572BC;)

    Ayrıca, bu örnek ilkinden farklıdır, çünkü açılır menünün kendisi, tüm menü öğelerinin genişliğine bağlı olarak uzanır.

    Çok uzun menü öğeleri için bu seçenek, sınırların dışına çıkacağından çok uygun olmayabilir. Bu özelliği devre dışı bırakmak için "beyaz boşluk: nowrap" özelliğini bulmanız yeterlidir; seçicide # menu1 ul li ul ve kaldırın.

    Aşağıda bir demo izleyebilir veya yatay açılır menü için kaynakları indirebilirsiniz:

    Ayırıcılar olmadan bu menü şöyle görünür. Ayırıcılar html'ye elle eklenebilir, ancak bir CMS'niz varsa, örneğin WordPress, bunları elle eklemek pek uygun değildir.

    Sınırlandırılmış yatay açılır menü

    Saf CSS'de menü öğeleri arasına nasıl şerit (ayırıcı) ekleneceğine dair birkaç düzine seçenek vardır. :: önce veya :: sonra veya çok daha basit kenarlık-sol kullanan varyantlar, sağ kenarlığı çoğaltmayacağım.

    Düzenin harika bir şekilde oluşturulduğu ve jquery olmadan yapamayacağınız durumlar vardır.

    Html kodu aynı kalır, yalnızca en başına jQuery kitaplığını ve onu kullanan dosyayı ekleriz:

    Hemen sonra.

    Anladığınız gibi, bir dosya oluşturmanız gerekiyor script-menu-3.js ve bu küçük kodu oraya koyun:

    $ (belge) .ready (işlev () ($ ("# menu1> ul> li: değil (: son çocuk)"). after ("");));

    Böyle bir menü için CSS stilleri olduğu gibi bırakılmalıdır, + bu parçayı sonuna atın:

    # menu1 ul li.razd (yükseklik: 28 piksel; genişlik: 1 piksel; arka plan: #ffffff; kenar boşluğu: 4 piksel;)

    JQuery'de sınırlayıcılara sahip böyle bir yatay açılır menü şöyle görünecektir:

    Demo modunda görüntüleyebilir veya aşağıdaki yatay menü şablonunu indirebilirsiniz:

    Bu çözümün avantajları şunlardır:

    • menü dinamik olarak sürüklenecektir;
    • ayırıcıdan paragrafa kadar olan girintiler her yerde aynıdır;
    • daha güzel ve esnek tasarım.

    CSS + HTML yatay katmanlı açılır menü

    Fareyle üzerine gelindiğinde çok seviyeli açılır menülerden bahsettiğimize göre, muhtemelen onları alt gruplara ayırmaya değer:

    1. yana doğru gezinirken bir vipadashka ile
    2. üçüncü seviye açılır açılır menü ile

    Örneklerimde 3 seviyeli çok seviyeli bir CSS menüsü göstereceğim, bundan sonra ne yapılması gerektiğini tahmin etmenin zor olmayacağını düşünüyorum.

    Fareyle üzerine gelindiğinde yan tarafta bir vipadash bulunan çok düzeyli açılır menü

    İlk olarak, html'mizi biraz düzeltmemiz gerekiyor. Seviye 3 için birkaç satır eklenecek:

    #conteiner (genişlik: 1000 piksel; yükseklik: otomatik; kenar boşluğu: 0 piksel otomatik; üst dolgu: 10 piksel;) # menu1 (konum: göreceli; görüntü: blok; genişlik: %100; yükseklik: otomatik; z-endeksi: 10;) # menu1 ul (konum: göreceli; görüntü: blok; kenar boşluğu: 0 piksel; dolgu: 0 piksel; genişlik: %100; yükseklik: otomatik; liste stili: yok; arka plan: # F3A601;) # menu1> ul (metin hizalama: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (ekran: satır içi blok; genişlik: %100; yükseklik: 0 piksel; içerik: "";) # menu1 ul li (konum : göreceli; görüntü: satır içi blok; genişlik: otomatik; yükseklik: otomatik; dikey hizalama: üst; metin hizalama: sol;) # menu1 ul li.razd (yükseklik: 28 piksel; genişlik: 1 piksel; arka plan: #ffffff; üst kenar boşluğu: 4 piksel;) # menu1 ul li a (ekran: blok; dolgu: 9 piksel 45 piksel 0 piksel 45 piksel; yazı tipi boyutu: 14 piksel; yazı tipi ailesi: Arial, sans-serif; renk: #ffffef; satır yüksekliği: 1,3 em; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; yükseklik: 36 piksel; kutu boyutu: sınır kutusu;) # menu1 ul li> a: vurgulu, # menu1 ul li: vurgulu> a (arka fon: #EBBD5B; renk: # 2B45E0; ) # menu1 ul li ul (konum: mutlak; üst: 36 piksel; sol: 0 piksel; ekran: yok; genişlik: otomatik; arka plan: # EBBD5B; boşluk: nowrap;) # menu1> ul> li: son çocuk> ul (/ * son öğe sağa eklenecektir * / sol: auto; sağ: 0px;) # menu1 ul li: hover> ul (ekran: blok;) / * bu satır bırakma mekanizmasını uygular * / # menu1 ul ul li (ekran: blok; genişlik: otomatik;) # menu1 ul li ul li a (ekran: blok; metin dönüşümü: yok; yükseklik: otomatik; dolgu: 7px 45px; genişlik: %100; kutu boyutu: border-box ; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: vurgulu, # menu1 ul li ul li : üzerine gelin> a (arka plan: # FDDC96; renk: # 6572BC;) # menu1 ul ul ul ul ul (üst: 0px; sol: %100; ekran: yok; arka plan: # fddc96;) # menu1> ul> li: son çocuk > ul ul (sol: otomatik; sağ: %100;) # menu1 ul li ul li ul a (renk: # F38A01;)

    jQuery dosyalarını önceki örnekte olduğu gibi kopyalayın. Menünün en azından biraz daha iyi görünmesi için ayırıcıları bırakmaya karar verdim. Tabii ki, onlarsız da yapabilirsiniz.

    İşte böyle oldu:
    Açılır listenin sağda ve ortada nasıl göründüğünü göstermek için bir arada 2 kaplama yaptım.

    Aşağıda bir demo izleyebilir ve bir örnek indirebilirsiniz:

    Fareyle üzerine gelindiğinde açılır bir vipadash içeren çok düzeyli açılır menü

    Başlıkta biraz yağ çıktı, ama işe yarayacak, asıl şey kod.

    Bu örneğin özü, tam genişlikte açılır menü + katmanlama ile tam genişlikte yatay açılır menü yapmaktır.

    Html kodunu değiştirmeyeceğim, önceki örnekten alınabilir. Ayrıca jQuery ayırıcılarını da tutuyoruz.

    Yalnızca tam CSS değişecek:

    #conteiner (genişlik: 1000 piksel; yükseklik: otomatik; kenar boşluğu: 0 piksel otomatik; üst dolgu: 10 piksel;) # menu1 (konum: göreli; görüntü: blok; genişlik: %100; yükseklik: otomatik; z-endeksi: 10;) # menu1 ul (konum: göreceli; görüntü: blok; kenar boşluğu: 0 piksel; dolgu: 0 piksel; genişlik: %100; yükseklik: otomatik; liste stili: yok; arka plan: # F3A601;) # menu1> ul (metin hizalama: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (ekran: satır içi blok; genişlik: %100; yükseklik: 0 piksel; içerik: "";) # menu1 ul li (konum : göreceli; görüntü: satır içi blok; genişlik: otomatik; yükseklik: otomatik; dikey hizalama: üst; metin hizalama: sol;) # menu1> ul> li (konum: statik;) # menu1 ul li.razd (yükseklik : 28 piksel; genişlik: 1 piksel; arka plan: #ffffff; kenar boşluğu: 4 piksel;) # menu1 ul li a (ekran: blok; dolgu: 9 piksel 45 piksel 0 piksel 45 piksel; yazı tipi boyutu: 14 piksel; yazı tipi ailesi: Arial, sans- serif; color: #ffffef; satır yüksekliği: 1,3em; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; yükseklik: 36 piksel; kutu boyutu: sınır kutusu;) # menu1 ul li> bir: gezin, # menu1 ul li: vurgulu> a (arka plan: # EBBD5B; renk: # 2B45E0; ) # menu1 ul li ul (konum: mutlak; üst: 36 piksel; sol: 0 piksel; görüntü: yok; genişlik: %100; arka plan: # EBBD5B;) # menu1> ul> li> ul :: sonra (açık: her ikisi; kayan nokta: yok; genişlik: %100; yükseklik: 0 piksel; içerik: "";) # menu1 ul li: hover> ul (ekran: blok;) / * bu satır bırakma mekanizmasını uygular * / # menu1 ul li ul li ( ekran : blok; genişlik: %30; kayan nokta: sol;) # menu1 ul li ul li a (ekran: blok; metin dönüşümü: yok; yükseklik: otomatik; dolgu: 7 piksel 45 piksel; genişlik: %100; kutu boyutu: border -box;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: vurgulu, # menu1 ul li ul li: hover> a (arka plan: # FDDC96 ; color: # 6572BC;) # menu1 ul li ul li ul (üst: 0px; sol: %100; ekran: yok; arka plan: # fddc96; z-index: 15;) # menu1 ul li ul li ul li (ekran : blok; kayan nokta: yok; genişlik: %100;) # menu1 ul li ul li ul a (renk: # F38A01; kenarlık-üst: 1 piksel katı #ffffff;)

    Menü şu şekilde görünecektir: Sağdaki aşırı öğenin açılır menü için yeri olmadığından, sitenin yeterli alana sahip olması gerekir. Bu sorun şu şekilde çözülebilir: nth-child, ama bahçeyi çitle çevirmekle uğraşmadım.

    Yatay katmanlı bir açılır menünün demosunu görün:

    Fark etmiş olabileceğiniz gibi: alt plaka da tam genişliktedir. Birkaç blokta bırakmalar bu şekilde yapılır.

    Benim için bu kadar, umarım örneklerimden en az biri size uyar. Dikkatiniz için teşekkürler.

    hem onlara hem bana faydası olur 🙂.

    Yazının tamamını okuduysanız, ancak css'de yatay açılır menünüzü nasıl yapacağınızı bulamadıysanız, yorumlarda bir soru sorun veya site aramasını kullanın.

    Ayrıca ana sayfayı ziyaret etmenizi tavsiye ederim. https: // site / vypadayushhee menüsü /, tüm açılır menü örnekleri ve çeşitleri burada toplanır.

    Selam. Çok uzun zamandır html / css çalışmaları hakkında yazı yazmadım. Son zamanlarda, yeni bir düzen oluşturmaya başladım ve bu süreçte menüyü lastik gibi yapmanıza izin veren ilginç bir numara ile karşılaştım (ona yeni öğeler ekleyebilir ve boyut artmaz, ancak her zaman 100 olacaktır. üst bloğun %'si). Bu yüzden bugün kauçuk menüyü css'de uygulayacağız.

    Yazıyı okuyamayacak kadar tembelseniz bu videoyu izleyebilirsiniz. Yazar ayrıca her şeyi çok havalı bir şekilde açıklıyor:

    CSS Sakız Menüsü - Adım 1

    İlk adım her zaman html işaretlemesidir, onsuz nereye gidebiliriz? Ancak bizim durumumuzda her şey basit olacak:

    1. menü için blok sarmalayıcı
    2. madde işaretli bir liste (ul etiketi) aracılığıyla görüntülenen menünün kendisi
    3. iyi, menü öğeleri içeride ve bunlara göre zaten bağlantılar var

    Her şey açık, bu benim işaretleme kodum:



    Her şey standart görünüyor, şöyle:

    Şimdi her şeyi istenen forma getireceğiz, CSS işi devralacak.

    2. Adım - temel stiller

    Ardından, sarmalayıcı bloğuna stil ekleyeceğim. Yani, maksimum genişliği 600 piksele ayarlayacağım (sadece menünün sığması için ekran görüntüsü almayı uygun hale getirmek için) ve ayrıca bloğu ortalayacağım.

    Dürüm (
    arka plan: #fff;
    maksimum genişlik: 600 piksel;
    kenar boşluğu: 0 otomatik;
    }

    Adım 3 - lastikliği uyguluyoruz

    Şimdi menünün kendisine inelim. İşaretçileri ondan kaldıracağım (ul etiketinde), arka plan doğrusal gradyanını yapacağım ve en önemlisi, menü kabının bir tablo satırı gibi davranmasını sağlamak için display: table-row özelliğini kullanacağım. Daha fazla manipülasyon için bunu yapmak önemlidir.

    R-menüsü (
    arka plan: doğrusal gradyan (sağa doğru, # b0d4e3 %0, # 88bacf %100);
    ekran: tablo satırı;
    liste stili: yok;
    }

    Gördüğünüz gibi, verilen kod hakkında yazdığım her şeyi çözdü. Bu arada, Ultimate CSS Gradient oluşturucu aracını kullanarak degradeler oluşturmak uygundur. Bir süre sonra onun hakkında yazacağım.

    R-menüsü li (
    dikey hizalama: alt;
    ekran: tablo hücresi;
    genişlik: otomatik;
    metin hizalama: merkez;
    yükseklik: 50 piksel;
    sağ kenarlık: 1 piksel katı # 222;
    }

    • dikey hizalama: alt - bu özellik, menü öğesindeki metnin 2 satır alması durumunda tam olarak görüntülenmesi için gereklidir. Menüyü yaptığımızda bu özelliği kaldırabilir, yakınlaştırarak itemlerin küçülmesini ve yazının iki satıra sarılmasını sağlayabilirsiniz ve bir görüntü sorunu görürsünüz. Mülkü iade edin ve her şey yolunda olmalı.
    • display: table-cell - görüntüleme menüsünün kendisini bir tablo satırı olarak ayarladığımız için, öğelerini tabloda hücreler olarak görüntülenecek şekilde ayarlamak mantıklı olacaktır. Bu gerekli.
    • genişlik: otomatik - genişlik, paragraftaki metnin uzunluğuna bağlı olarak otomatik olarak hesaplanır
    • text-align: center sadece içindeki metni ortalamak içindir
    • yükseklik: 50 piksel - yüksekliği 50 piksele ayarlayın
    • peki, border-right sadece sağdaki bir sınırdır, öğeler için böyle bir ayırıcı

    Menü çirkin görünse de, hiçbir şey olmasa da, onu akla getirmenin zamanı geldi.

    Yapılması gereken son şey, paragrafların içindeki bağlantıları biçimlendirmektir. İşte bu koda sahibim:

    R-menüsü li bir (
    metin-dekorasyon: yok;
    genişlik: 1000 piksel;
    yükseklik: 50 piksel;
    dikey hizalama: orta;
    ekran: tablo hücresi;
    renk: #fff;
    yazı tipi: normal 14 piksel Verdana;
    }

    Ve menü şimdi böyle görünüyor:

    Yine, bazı satırları açıklayacağım:

    • text-decoration özelliği, bağlantılar için varsayılan alt çizgiyi kaldırır
    • genişlik: 1000 piksel muhtemelen en önemli satırdır. Bağlantıları yaklaşık olarak aynı genişliğe ayarlamak gerekir, mümkün ve daha az, ancak mutlaka en geniş menü öğesinden daha fazladır. Genişliği otomatik olarak ayarlanmış li menü öğesi genişliği sınırlayacağından, bağlantılar 1000 piksel genişliğinde olmayacak, ancak bu, menüdeki herhangi bir sayıda öğe için her zaman yüzde 100 geniş olacak şekilde yapacaktır.
    • dikey hizalama: orta ve ekran: tablo hücresi - ilki metni dikey olarak merkeze hizalar ve ikincisi de bağlantıların hücreler olarak görünmesini sağlar. Her iki özelliğe de ihtiyaç vardır.
    • yazı tipi sadece bir grup yazı tipi ayarıdır. Bu makaledeki yazı tipleri için css özellikleri hakkında bilgi edinin.

    4. Adım (isteğe bağlı) etkileşim ekleyin

    Örneğin, fareyle üzerine gelindiğinde menü öğesinin rengini değiştirmek için. Bu, fareyle üzerine gelme sözde sınıfı kullanılarak oldukça basit bir şekilde yapılır:

    R-menüsü li: üzerine gelin (
    arka plan rengi: # 6bba70;
    }

    Menüyü kauçukluk açısından test etme

    Harika, menüler hazır, ancak en önemli şeyi kontrol etmedik - size söz verdiğim gibi ne kadar esnek olduğunu. Peki, menüye 2 öğe daha ekleyeceğim:

    Menü 600 piksel genişliğinde kalır. Öğelerin geri kalanı 2 yenisine uyacak şekilde biraz küçüldü.

    1 uzun nokta daha ekleyeceğim:

    Gördüğünüz gibi, menü biraz daha küçüldü ve uzun öğe oldukça normal bir şekilde görüntülendi. Ve size bahsettiğim dikey hizalama: alt özellik olmasaydı, menü daha kötü görünürdü.

    Menüyü üç öğeye indireceğim.

    Öğeler çok daha özgür hale geldi, ancak menünün genişliği değişmedi. Bu yüzden %100 kauçuk bir menü yaptık!

    Nasıl uyarlanır?

    Temel olarak, sarmalayıcı bloğa sabit bir genişlik yerine maksimum bir genişlik verdiyseniz, uyarlanmasına bile gerek yoktur. Benim durumumda, bir max-width: 600px özelliğim var ve genişlik 600 pikselden az olduğunda, blok yatay bir kaydırma oluşturmadan ekranı takip ederek küçülecek.

    Peki, mobil cihazlarda veya geniş ekranlarda bir şekilde menüyü değiştirmek veya düzeltmek istiyorsanız, medya sorguları size yardımcı olacaktır! Site yapımında iyi şanslar!